React 16 and Babel 6 from the browser
Question
I'd like to use React from the browser without creating bundles with browserify/webpack.
I'm trying to use babel-standalone and react from the browser, I have modified some code I had but I get ReactDOM is not defined plus other two warnings (process is not defined)
I've found the reference to react and react dom here . Is it correct to include the cjs version? What does cjs stand for?
The code I'm using is the following. I'd like to use ReactDOM.render
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/cjs/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <div id="output"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello World</h1>, document.querySelector('output') ); </script> </html>
1 answers
solution1
1 ACCPTED 2017-12-27 22:18:05
I believe cjs is referring to CommonJS. Since you're using a simple HTML template, you can include the plain JavaScript bundles instead.
I changed the included script tags according to this minimal HTML template from the official React documentation.
I also changed document.querySelector('output') to document.getElementById('output') .
Try this:
<!DOCTYPE html> <html> <head> <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="output"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello World</h1>, document.getElementById('output') ); </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.