| ☰ See All Chapters |
ReactJS Basic Installation or Setup – Including JavaScript files to web page
Basic Inclusion
ReactJS is a library written in JavaScript. ReactJS is distributed as a JavaScript file, and can be added to a web page with a script tag. ReactJS is contained in a single file react-<version>.js that can be included in any HTML page. Developers also commonly install the React DOM library react-dom-<version>.js along with the main React file. React also supports JSX syntax. JSX is an extension created by Facebook that adds XML syntax to JavaScript. In order to use JSX you need to include the Babel library to translate JSX to JavaScript code.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script type="text/javascript" src="babel.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>; } ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html> |
OR load from facebook repository
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>; } ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html> |
It's best that ReactJS libraries are imported before all other libraries and code.
All Chapters
