Set Up Your First Project
When you build a React app, you create a description of the desired result, then hand it over to React, which takes charge of modifying the DOM to match your description. Instead of enhancing existing HTML, you define the whole HTML structure in JavaScript. This makes it simpler to express the UI as a function of the data.
We’ll test our setup by outputting an <h1> header with the “Hello World” message. Typically, you use React to insert components into an existing HTML page, so you’ll usually generate the basic structure like the <head> and <body> tags on the server. You’ll use two files: index.html, which will contain the basic HTML skeleton, and hello.js, which will hold all the JavaScript code.
| | ├── index.html |
| | ├── hello.js |
Create a basic HTML skeleton in index.html that looks like the following:
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="utf-8"/> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| | <title>Hello World</title> |
| | </head> |
| | <body> |
| | <div id="app"></div> |
| | </body> |
| | </html> |
The fastest way to run React code is to include the React and ReactDOM libraries from a Content Delivery Network, or CDN, using <script> tags. Insert the CDN links above the closing <body> tag. You’ll load React before your own code, which you also include with a <script> tag:
| » | <script src="https://unpkg.com/react@15/dist/react.js"></script> |
| » | <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> |
| » | <script src="hello.js"></script> |
| | </body> |
We’re linking to the development builds of React and ReactDOM. To get more helpful error messages, use the development build of React and ReactDOM, which run much slower than the production builds; in production, link to the production builds of React you find on the React website.[3]
You’ll render “Hello World” in an <h1> tag inside the <div> with the app id. To do this, create a React element, which is a JavaScript description of a DOM structure that React uses to efficiently render interfaces. Open hello.js in your favorite text editor and type this code:
| | ReactDOM.render( |
| | React.createElement('h1', {}, 'Hello World!'), |
| | document.getElementById('app') |
| | ); |
Let’s break down the code. ReactDOM.render takes a description of the UI and creates the matching DOM elements. React.createElement returns a description of the UI. The first argument to React.createElement determines the top element. Passing a string, ’h1’, returns a representation of the matching HTML tag, <h1>. The second argument configures additional properties of the top element—for example, HTML attributes. Pass an empty object since we don’t need to configure anything. Each argument after that becomes a child element of the top element. In this case, <h1> has a single child, the “Hello world” text.
ReactDOM.render creates a new tree of DOM nodes that matches the description returned by React.createElement. It places the result inside the DOM node you pass as its second argument. document.getElementById is a native browser API that takes a string and retrieves the DOM node with a matching id.
Save hello.js. Then open index.html in your browser, and “Hello World” appears in all its glory:
If you don’t see anything, make sure the element with id"app" exists, and that you’ve saved your HTML and your JavaScript files.
You’ve seen how to describe HTML elements with React.createElement. Next, we’ll use this ability to create configurable interface elements.