React Tutorial: Random Number Generator

React is one of the most extensively used JavaScript libraries and is worth learning for any professional or intermediate level developer.

Let's walk through the process of creating an app using react-create-app and discuss the knowledge required to do so. The contents below will outline the individual pieces, then the code at the end will put it all together. If you'd like to skip the explanation and get directly to the code, feel free to do so by scrolling to the bottom. The video shown here shows the code being written in real time and the final product in action.

The video shown here is a part of our Web Dev with Music Playlist, where we code examples, such as this, in real-time and view the results as we go.

Example Requirements

We're going to create a random number generator which behaves as follows:

1. Each random number will be an integer between -1000 and 1000.
2. The user will be able to generate a new random number by clicking on a button.
3. A random number should be available as soon as the application is started.

Creating the App

In this project, we've reused the code generated by the create-react-app command line interface tool. This requires Node.js to be installed on your computer. If you don't have it, please install from the Node.js website, then come back here to proceed. To create the react app, open a terminal and run:

If you'd like to use a different name, use that name as the argument instead of react-random-number-generator. Once the command is entered, it will take a moment for everything to be installed. Once that's done, we can open the code and make some changes.

Generating a Random Number

We need to be able to generate a random integer between -1000 and 1000. To do this, we can use the Math.random() function with some additional logic. The Math.random() function creates a random number (not integer) between 0 and 1. To make this a random number between -1000 and 1000, we can multiply the result by 2000, which brings it into the range of 0 to 2000, then subtract 1000 from that result, which brings it into the range of -1000 to 1000. Finally, we can use Math.floor(), Math.ceil(), or Math.round() to adjust the number so it becomes an integer. The full implementation will look something like:

Working With the Component

For this example, we will directly reuse the component within App.js instead of creating a new component. We'll also reuse most of the styles generated in App.css. The App.js component is initially declared as a function, but for this example we'll refactor it into a class, then use methods and instance properties to handle the random number generation logic. At all times, we'll need to display a randomly generated number to the user. Therefore, we'll include a property in the component's state called randNumVal. In the component's constructor, we'll initialize that state to some random number using the function described above. We'll also create a new method which handles updating the component's state to a new random number. This will be called when the user clicks on the generate button. Lastly, we'll need to update the HTML in render() to display the number and update when the button is clicked. To summarize:

1. Refactor into a class.
2. Initialize the component's state to a random number.
3. Create a method to update the state with a new random number.
4. Create a button which binds the click event to the method described above.
5. Create a binding to display the current random number.

Since we are storing the random value in the component's state, React will automatically handle updating the document when its value changes. Therefore, we don't need to worry about this ourselves.