React Hooks Tutorial — Create a Number Trivia Generator Website

Hooks have been officially added to React as of React 16.8. One of the main benefits of Hooks in React is that you can use state and effect (which is generally a combination of different life cycles into one) in a component without creating a class.

In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that gives the user some options to pick from in order to generate some random number trivia.

You can check out the demo for the website here, and the source code on the GitHub repository.

Let’s first start by creating a react app. Since our website will be very simple, we will use the create-react-app command. If you don’t have it installed, you can install it using npm.

Run the following in your terminal or CMD:

npm i -g create-react-app

This will install create-react-app globally.

Now we can create our React app:

create-react-app numbers-trivia

Running this command will create a directory in the working directory with the name you supply for the React app. I named it numbers-trivia but you can call it whatever you want.

Inside that directory, it will also install all the packages and files needed to run the website. It will install packages like react, react-dom, react-scripts and more.

Once it’s done, change into the newly created directory and start the server:

cd numbers-trivia
npm start

Once you start the server, a web page of your website in your favorite browser will open. You will see a page with just the logo and a link to learn React.

Before we start changing the page, if you are not familiar with React, let’s take a look at the structure of our React app. It should look something like this:

In our root directory, we will find a bunch of directories. node_modules holds all the packages React needs to run and any package you might add. public…