|
| 1 | +# Using react and react-dom in an HTML Page |
| 2 | + |
| 3 | +The `react.js` file is the core file needed to create React elements and write react components. |
| 4 | + |
| 5 | +When you intend to render your components in an HTML document (i.e., the DOM) you'll also need the `react-dom.js` file. |
| 6 | + |
| 7 | +A React component is created by calling `createReactClass()` (or, React.Component if using ES6 classes). React.createClass is deprecated, `create-react-class` is available on npm. To use `createReactClass()` you need to include `create-react-class` file. |
| 8 | + |
| 9 | +An example of an HTML document properly including React is shown below. |
| 10 | + |
| 11 | +``` |
| 12 | +<!DOCTYPE html> |
| 13 | +<html> |
| 14 | + <head> |
| 15 | + <meta charset="UTF-8"> |
| 16 | + <title>Learn React</title> |
| 17 | + <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> |
| 18 | + <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> |
| 19 | + <script crossorigin src="https://unpkg.com/create-react-class@15.6.0-rc.0/create-react-class.min.js"></script> |
| 20 | + </head> |
| 21 | + <body> |
| 22 | + </body> |
| 23 | +</html> |
| 24 | +``` |
| 25 | + |
| 26 | +With the `react js` file and `react-dom js` file loaded into an HTML page it is then possible to create React nodes/components and then render them to the DOM. In the HTML below a `HelloMessage` React component is created containing a React `<div>` node that is rendered to the DOM inside of the `<div id="app"></div>` HTML element. |
| 27 | + |
| 28 | +``` |
| 29 | +<!DOCTYPE html> |
| 30 | +<html> |
| 31 | + <head> |
| 32 | + <meta charset="UTF-8"> |
| 33 | + <title>Learn React</title> |
| 34 | + <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> |
| 35 | + <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> |
| 36 | + <script crossorigin src="https://unpkg.com/create-react-class@15.6.0-rc.0/create-react-class.min.js"></script> |
| 37 | + </head> |
| 38 | + <body> |
| 39 | + <div id="app"></div> |
| 40 | + <script> |
| 41 | + var HelloMessage = createReactClass({ |
| 42 | + displayName: 'HelloMessage', |
| 43 | + render: function render() { |
| 44 | + return React.createElement('div', null, 'Hello ', this.props.name); |
| 45 | + } |
| 46 | + }); |
| 47 | +
|
| 48 | + ReactDOM.render( |
| 49 | + React.createElement(HelloMessage, { name: 'Brian' }), |
| 50 | + document.getElementById('app') |
| 51 | + ); |
| 52 | + </script> |
| 53 | + </body> |
| 54 | +</html> |
| 55 | +``` |
| 56 | + |
| 57 | +This setup is all you need to use React. However this setup does not make use of JSX. The next section we will discuss about JSX usage. |
| 58 | + |
| 59 | +**Note:** Don't make the `<body>` element the root node for your React app. Always put a root `<div>` into `<body>`, give it an ID, and render into it. This gives React its own pool to play in without worrying about what else potentially wants to make changes to the children of the `<body>` element. |
| 60 | +{: .notice--warning} |
0 commit comments