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.
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
Run the following in your terminal or CMD:
npm i -g create-react-app
This will install
Now we can create our React app:
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:
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…