Build a React App using Basic Hooks
How to use React Basic Hooks useState, useEffect and useContext
Hooks are a new feature released in React 16.8. Previously, only class components could have lifecycle methods such as state and componentDidMount. But with React Hooks, functional components can also have these features.
In this tutorial, we will build a simple Book App using three Basic Hooks. It looks like this:
Let’s get started!
Table of Contents
- Creating React App
- Using Materialize
- Using Context
- Creating Components
- Updating the App component
- Styling the App
- Testing the App
Creating React App
To create a new app, use the following method:
yarn create react-app react-hooks-app
If you have never used Yarn, you will need to install it on your system. Or, you can use
Move to the app’s directory and start a local server:
A new browser tab opens and displays the initial page. If not, open http://localhost:3000 to view it in your browser.
App.js file and see how the display changes:
Save the file and look at your browser. Did “App” appear?
logo.svg files are not used, you can remove them from your project.
In this tutorial, we will use Materialize as a front-end framework. You can easily get started with CDN. In addition, include a line for using Material Design Icons. Open the
index.html file in the
Simply add the
<link> tags inside the <head> tag and the
<script> tag inside the <body> tag. Also, change the title.
To be honest, the app we are going to create is so simple that we do not need to use Context, but I would like to use it as a test.
Create a new folder named
contexts in the
src directory, then add a new file named
BookContext.js inside the folder:
useState is one of the Basic Hooks. It returns a stateful value
[state, ...], and a function
[..., setState] to update it.
Context objects come with a
Provider component. It takes a
value property and passes it to descendant components.
uniqid is a unique ID generator.
yarn add uniqid
It is very easy to use.
Create a new folder named
components in the
src directory, then add some component files inside the folder.
First, create a file named
useContext, one of the Hooks, receives a context object and returns the current value of the context.
Create a file named
Form components use a state to store temporary values. After submitting a form data, use the
setBook function to empty the values.
If a state object has multiple values, we can write
handleChange using the Spread Operator.
Create a new component to bundle these two components:
Create a simple component for the about page:
Also, create a component for the contact page:
Finally, create a navbar component:
The last one of the Basic Hooks,
useEffect, is used here. It is clearly described in the React Docs:
If you’re familiar with React class lifecycle methods, you can think of
useEffect hook, initialization code for a slide-out menu provided by Materialize is set.
Install a module to use
yarn add react-router-dom
Updating the App component
Now, nest all the components we have created in the
We can use the contexts by setting our
ContextProvider as above.
Styling the App
As a final touch, style our app a bit. Open the
App.css file and overwrite it as follows:
It is convenient to define CSS variables for colors that are used repeatedly. It will be effective when your app grows.
Testing the App
The Book App should look like this:
Add some items to see if the form is working. Also, test the delete action.
The slide-out function is also working well. Sorry that the picture is not so good…
Routing is also perfect!
This is the end of this tutorial. This time we tried to build a simple app to test the Basic Hooks. In the next step, I will write about database connection and deployment.
The source code used in this tutorial is available on GitHub.
Leave a comment below if you have any questions or concerns. You can also contact me via Twitter.
Thank you for reading :)