I am using Plunker to produce my React Example.
The React Libraries are included by "Find and external libraries" provided by Plunker.
https://plnkr.co/edit/U3soXYgU2ek8j2IA22WE?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
script.jsx
class App extends React.Component {
render(){
return (<h1>Hello World!</h1>)
}
}
ReactDOM.render(
<App/>,
document.getElementById("app")
);
In the console, It throws the below exception
Uncaught ReferenceError: React is not defined
at VM26837 script.js:32
(anonymous) # script.js:32
However, This example works if I tried another react libraries such as that provided by unpkg.com.
<script src="https://unpkg.com/react#16.0.0-alpha.13/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0-alpha.13/umd/react-dom.production.min.js"></script>
In your code type="text/jsx" is missing. Add type="text/jsx" to your script as <script type="text/jsx" src="script.jsx"></script> and try. And use umd build for development. See the working code below
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script type="text/jsx" src="script.jsx"></script>
</body>
</html>
cjs(commonjs2): User will use this format in a build tool, it excludes all modules in node_modules folder from bundled files.
umd: User will use this format directly in browser, all 3rd-party packages will be bundled within.
Related
I'm working on a project, which has already a webserver. The webserver runs PHP and it is limited. Many software cannot be installed.
I understand that React does not require any installation but adding JSX to a project needs to run these commands:
Step 1: Run npm init -y
Step 2: Run npm install babel-cli#6 babel-preset-react-app#3
Unfortunately, I cannot add NodeJS to the webserver.
JSX coding syntax would be very useful for me using the JavaScript files.
Option for adding it to HTML
I understand that I could add JSX to an HTML file:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
But I would like to use in .js files.
Examples
I have 2 examples:
Example is working but it has no JSX.
Example has JSX but it is not working.
The HTML file is the same.
1. Example project: Unexpected token error with JSX
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
2. Example project: React is working without JSX
const myelement2=React.createElement('h1', {}, 'No JSX!');
ReactDOM.render( myelement2, document.getElementById('reactRoot'));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
My Question
How could I fix 1. Example project, if no program installation is possible?
you have to set type attribute as text/babel, this way the problems will be resolved, e.g:
<html>
<body>
<div id="reactRoot"></div>
<script type="text/babel">
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
</script>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
I have been attempting to run a simple hello world react application. I am not using any tools. I have created an index.html and index.js in the same directory. Within my index.js, if I turn the elements variable into a string, it works, but not how I expected it to work. It passes a string in and that string is displayed exactly as typed
<h1>Hello, world</h1>
I want to pass the html into the render method but I keep getting the following error:
Uncaught SyntaxError: Unexpected token <
See code below:
'use strict'
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('app'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>
The tutorial that I am following is:
https://reactjs.org/docs/rendering-elements.html
Without using babel, we can't use jsx. See the solution below and note the React.createElement function instead of passing html directly into the ReactDOM.render function.
Solution:
'use strict'
ReactDOM.render(React.createElement('h1', null, 'Hello, world'), document.getElementById('app'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I don't think it's possible to use JSX syntax without a bundler/Babel.
You have to use React.createElement('h1', null, 'Hello, world').
Source: https://medium.com/#clmyles/react-without-npm-babel-or-webpack-1e9a6049714
Edit:
If you plan to use Babel, #Chris answer in his comment (import React ...) is correct. React then needs to be in scope to use JSX.
My code is as below, but "hello world" is not displayed
is there problem with my code ?
please help
<html>
<head>
<script src="theme/public/js/react.production.min.js"></script>
<script src="theme/public/js/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
you also need to import babel
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
This is from the official docs which is using the development version docs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
Hi i am very new to Reactjs. instead of setting up webpack and babel, i am executing examples with React cdn references.i also want to use react-datepicker component,when i included this through cdn it throughs some error,guys help me out how to get rid of this and make it work
<!DOCTYPE html>
<html>
<head>
<title> React Basic Example </title>
</head>
<body>
<div id="root"></div>
<!-- React Libraries -->
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- React date picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.47.0/react-datepicker.min.js"></script>
<script type="text/babel">
var App = React.createClass({
render:function(){
return (
<h1> Hello this is an APP </h1>
);
}
});
ReactDOM.render(<App />,document.getElementById('root'));
</script>
</body>
</html>
and the error i am getting in the console is
I read ngbook2. And I try to create hello-world application on angular2.
But I get error 404:
GET /node_modules/angular2/bundles/angular2.dev.js 404 5.460 ms - 58
app.ts:
import { bootstrap } from "#angular/platform-browser-dynamic";
import { Component } from "#angular/core";
#Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld {
}
bootstrap(HelloWorld);
index.html:
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src="resources/systemjs.config.js"></script>
<script>
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
Look like the problem is in line
But I newbie in angular and have not idea about how can I correct this line.
How can I fix this app?
I have read documentation
And I see I must change libraries URLs in index.html to these:
<!-- Libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>