I am making a simple "Hello World" program in React.js. I am expecting "Hello World" to be printed in the body of the html.
index.html
<html>
<head>
<script src="http://fb.me/react-0.12.2.min.js"></script>
<script>
var HelloWorld = React.createClass({
render: function() {
return <div>Hello, world!</div>;
}
});
React.render(new HelloWorld(), document.body);
</script>
</head>
<body>
</body>
</html>
Error:
Uncaught SyntaxError: Unexpected token <
Can someone tell me where am I making a mistake?
Sol's answer covers why the simple hello app doesn't execute. The best practice on the latest React.js as of Jan 2017 is to import
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
and have the script type set to text/babel.
With this, you can execute JSX normally e.g.
class Greeting extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<p>Hello, Universe</p>
);
}
}
What you're missing is including something that transforms the JSX into JS. You need to include the JSXTransformer.js. Also notice the React.render doesn't use document.body, it should be a dom element. Here's an example that should work:
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="greeting-div"></div>
<script type="text/jsx">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello, Universe</p>
)
}
});
React.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
i just thought that i would share my solution with everyone. I wanted to set up a simple project without all the npm, node guff, like the OP i was having problems, it took me three hours to figure out, below is my solution.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boy</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<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="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type ="text/babel" src="js/app.js"></script>
</head>
<body>
<div id="root">Loading...</div>
</body>
</html>
The key is to include the appropriate script files from React and Babel. I am using an external app.js file, if you would like to do this then remember to include type ="text/babel".
Once done you can execute the hello world example from React. My app.js file:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
CSS file:
#root {
color: skyblue;
}
I hope this helps.
Related
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.
I am trying to use some pre-builtin react component from a library called ant design. Also, I would like to call the react and the component library through a cdnjs(don't wish to use webpack or else). How could I accomplish it? My approaches are like below and it's not working for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
import Button from 'antd/lib/button';
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
You don't need to import, because when you use prebuilt version, it's already injected into a global variable call 'antd' (just like React)
I also updated a little bit your scripts because for React you need . the umd version and antd needs the with locale version.
However, using prebuilt version is strongly NOT RECOMMENDED be careful.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Button } = antd;
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
I'm new to react and I was just going through a tutorial. But when I write this piece of code here, there's an error saying "cannot read property 'purgeUnmountedComponents' of undefined". I'm trying to achieve a very basic first program. -
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script type = "text/babel">
var HelloWorld = React.createClass({
render: function() {
return <div>
<h1>Hello</h1>
</div>;
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('hey'));
</script>
<title>Make or break</title>
</head>
<body>
<div id="hey">
</div>
<!-- <h1>Hello bro</h1> -->
</body>
</html>
Has anyone else faced this? Thanks in advance!
Looks like bug at minificated version, as previous version is ok and non-mimified version is ok
I mean this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
and this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
i am newbie to react.js and i was going through a tutorial to start with.
I tried both the jsx format and non jsx format code. however i am not getting the output displayed. I checked the console and no errors reported in chrome.
what am i missing here?
My code:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title> React.js <title>
<script type="text/javascript" src = "http://fb.me/react-0.12.2.js"></script>
<script type="text/javascript" src = "http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<script type="text/jsx">
/*var App = React.createClass(
{
render:function()
{
return <h1> Hello there </h1>
}
});
React.render(<App />, document.body);*/
</script>
<script>
var App = React.createClass(
{
render: function()
{
return React.DOM.h1(null,"Hi there")
}
});
React.render(App(), document.body);
</script>
</body>
</html>
You're not closing the title tag. This: <title> React.js <title> should be this: <title> React.js </title>. If you change that, the heading renders like it should.