Create a Component
Components are JavaScript functions or classes that accept parameters, called props, and return a description of the UI based on those parameters. In this way, you can render the HTML elements and the application data in one go, without writing additional code to update values inside the HTML. When the data changes, you pass updated props to the component. React takes care of re-rendering the page.
A component can be any JavaScript function that takes an object as a parameter and returns an element created with React.createElement. Since components are JavaScript functions, you can transform the data with the full power of JavaScript before creating the output. Our first component will be a function that takes two numbers and displays the sum. We’ll call this function Adder. Define Adder in a new file named Adder.js.
| | function Adder({ n1, n2 }) { |
| | const sum = n1 + n2; |
| | return React.createElement('h1', {}, sum); |
| | } |
Adder takes a JavaScript object and returns a React element. Returning a React element makes Adder a component. When you define an object parameter for a component function, the object properties automatically become props. The object parameter has two properties, n1 and n2, which represent the numbers to add. When you use this syntax, JavaScript automatically assigns the value of the parameter properties to variables with the same name in the function body, so the n1 and n2 automatically take the values of the n1 and n2 properties. We add n1 and n2 and assign the result to sum. We then return a React element describing an <h1> header containing the sum.
Declaring values with const prevents you from accidentally overwriting them later, as JavaScript throws an error if you attempt to reassign them. It might sound surprising, but outside of loops, it’s fairly rare that you need to assign a new value to the same variable. If you do, declare the variable with let. let will stand out outside of a loop, and you will know that something special is going on. If you’ve used JavaScript in the past, you might be used to declaring variables with var. The advantage of let compared to var is that the scope of the let variable is the same as const variables, while var variables follow different scoping rules.
Next, we’ll create a React element based on our component, then render the React element to the DOM.
To set prop values, pass an object with properties matching those in the component function parameter as the second argument to React.createElement. For example, set n1 to 2, and n2 to 4. Then pass the result of React.createElement to ReactDOM.render to render it to the DOM. Add the call to ReactDOM.render below the Adder definition in Adder.js:
| | ReactDOM.render( |
| | React.createElement(Adder, { n1: 2, n2: 4 }), |
| | document.getElementById('app') |
| | ); |
Include Adder.js in index.html instead of hello.js and reload the page. You’ll see the sum of 2 and 4 appear.
If you use either Chrome or Firefox, the React developer tools browser extension[4] offers a great way to debug your component. In Chrome or Firefox, go to the add-ons or extensions settings, search for “React developer tools,” and install the extension. Once you’ve installed the extension, activate the developer console. You’ll notice a new tab labeled React. Expanding the React tab reveals two panes:
If the extension doesn’t work, try checking “Allow access to file URLs” in the extension options page.
The left pane displays the component hierarchy on the current page and lets you expand and select components. The right pane displays the props for the selected components. First, check that the developer tools detect the Adder component. If not, look in the console for error messages. The application might have failed to start at all. Then, select the Adder component and check that the n1 and n2 match the numbers that you passed.
A React component can receive props, perform computations, and describe how to display the result. The next step is to create more complex structures by combining multiple React elements. Since React.createElement calls can become difficult to read, we can use an alternative syntax called JSX to create components.