How to avoid error 'Unexpected token <' with a React app when running babel from a CDN?
Question
I am new to React and would at the moment like to run everything using CDNs. It seems that similar questions to avoid the same error I am getting ("Uncaught SyntaxError: Unexpected token <") are solved by including ''. But that is not working in this example when I run this very basic React app. Does it not work because Babel cannot transcompile the script from this same file?
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script type="text/babel"></script>
<div id="app"></div>
</head>
<body>
<script>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
2 answers
solution1
2 2018-04-23 04:59:26
<!DOCTYPE html> <html> <head> <title>First React App</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <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> </head> <body> <div id='app'></div> <script type='text/babel'> console.log('App.js is running!'); class Template extends React.Component{ render(){ return( <div> <h1>John</h1> <p>Age: 26</p> <p>Location: Philadelphia</p> </div> ) } } //ReactDom function starting var AppRoot = document.getElementById('app') ReactDOM.render(<Template/>, AppRoot) </script> </body> </html>
Use Reactjs version 16. Create class-based component then render it. Use this documentary for better understanding. Link
solution2
1 ACCPTED 2018-04-23 04:47:26
You have to add type='text/babel' to your script. I also recommend to use at least react 16 if you want to start learning. You might also want to make sure to use UMD versions of react and reactDOM to make sure they run in the browser.
<!DOCTYPE html> <html> <head> <title>First React App</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <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> </head> <body> <div id='app'></div> <script type='text/babel'> console.log('App.js is running!'); var Template = ( <div> <h1>John</h1> <p>Age: 26</p> <p>Location: Philadelphia</p> </div> ) var AppRoot = document.getElementById('app') ReactDOM.render(Template, AppRoot) </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.