getting unexpected token error while running react code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script>
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<h1>Hello, world!</h1>);
</script>
</body>
</html>
[React official website][1]
I am trying to run react code from the official react website but getting unexpected token error,
You need Babel to use JSX. Just add this tag to your page:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Now you can use JSX in any tag by adding type="text/babel" attribute to it.
This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. For production you should install Babel using NPM:
Go to your project folder in the terminal, and paste these two commands:
Step 1: Run npm init -y
Step 2: Run npm install babel-cli#6 babel-preset-react-app#3
The only requirement is to have Node.js installed on your computer.
Related
<script>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
<div id="root">
</div>
I am running the html snippet but getting a console error message , this code is from https://reactjs.org/docs/hello-world.html ,it runs fine on codepen but not my local browser, please help as i am new to react.js
That snippet won't run in your browser's console as-is. In the code pen go to settings > JS > Add External Scripts/Pens. You'll see react and react-dom are dependencies for the code to run.
This tutorial for create-react-app will help you get everything installed correctly so you can try the hello world example - https://create-react-app.dev/docs/getting-started/
Here's the full setup in order for this example code to run:
<!-- INCLUDE REACT LIB -->
<script src="https://unpkg.com/react#18/umd/react.production.min.js" crossorigin></script>
<!-- INCLUDE REACTDOM LIB -->
<script src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js" crossorigin></script>
<!-- INCLUDE BABEL COMPILER LIB FOR JSX -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>
<!-- Change the type to text/babel in order for the Babel compiler to detect and compile the JSX syntax -->
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
You can find the CDN links used in this example for the React, ReactDOM and Babel libraries on the link that #abo mentioned above.
Happy Hacking and welcome to the wonderful world of React! ;)
I was watching tutorials on React and tried copying an example, but for some reason nothing that I attempt is working. Here's the simple code:
index.html:
!DOCTYPE html>
<head>
<title>React Stuff</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>, document.getElementById('root'));
I installed react using npm install react react-dom and attempted to open the .html file, but nothing appears on the screen. I also tried moving the script to the or even putting it inside the <script>, but none of that worked.
Some of the features here rely on build tools to precompile the code as they are not natively supported.
For example jsx (HTML like syntax directly in JavaScript) would be compiled with Babel .
node_module package imports import React from 'react' without needing to reference the full url import React from '/node_modules/react/index.js' needs to be compiled with webpack (or a similar tool).
create-react-app is a great way to get started with all the required setup.
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This works here. Can you reproduce your error in your question?
Does your project have a package.json?
If so does it have scripts, specifically a start script?
Then you need enter 'npm run start' in your console to compile the code and it should launch on localhost:3000.
Try following create-react-app
React noob here, I am working on a simple JSX based component with the code below:
<!DOCTYPE html>
<html>
<head>
<title>React Boot camp Day 1</title>
</head>
<body>
<div id='app'></div>
<!--Needed for react code-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<!--Needed for react dom traversal-->
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
<script>
console.log('Test React', window.React)
const name = "Callat"
const handle = "#latimeks"
// create components and use jsx
function FirstComponent(props){
return <h1>{props.name}</h1>
}
function TestJSX(){
return (<FirstComponent name={name}/>)
}
ReactDOM.render(<TestJSX/>, document.getElementById('app'))
</script>
</body>
</html>
Running this code yields no UI and in dev tools I see this
Uncaught SyntaxError: Unexpected token < index.html:42
Which is the
function FirstComponent(props){
return <h1>{props.name}</h1>
}
What is wrong here? According to everything I've seen online and in the bootcamp instructions my syntax is correct and this should work.
Can anyone give some insight?
I found an answer to this. Including the CDN was only part of the fix. The second part is to include the following:
<script type="text/babel">//My react code</script>
Once that's done reloading the page works. I really should get more used to the native react ecosystem though.
just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.
Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.
Thanks!
Prem
HTML Code:
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="script.jsx" type="text/babel"></script>
</body>
</html>
my JSX File:
var Button = React.createClass({
render: function () {
return (
<button> Go! </button>
)
}
});
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot just include the jsx in your site like that - it won't work :)
You need to transpile your jsx via a tool like Webpack.
The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.
Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:
React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)
For good measure, something like this should work:
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
App.jsx:
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
I am building an webapp using react native. I am very new to react native. I started to build an simple page but its give an error. I don't know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
<script src="scripts/header.js"></script>
</body>
</html>
The above screenshot is of header.js. Where I did wrong could not understand. Help me out for any silly mistake.
Thanks
Your file header.js contains JSX, which the browser doesn't understand.
You need to transform your JSX file into JS before attempting to load it in the browser.
One way to do this is to include browser.js (from Babel) and add the attribute type="text/babel" to your JSX script.
Other options include using a tool such as Webpack with a loader that can pre-process your JSX before sending it to the client.