DEV Community: Amir Ghezala

Docs are boring, let's build a movie finder app to learn React hooks (useReducer, useEffect and useContext)

Amir Ghezala — Sat, 29 Aug 2020 01:31:48 +0000

This article is meant to help you understand three React hooks: useReducer, useEffect, and useContext, by using them in real-world scenarios. If you believe in learning by doing and want to learn more about these hooks, this article is what you're looking for.

For each one of these hooks, we'll answer the following questions:

What is it?
What's its purpose?
How to implement it in our app?

Eventually, our app will look like this:

You can find the final source code here and the live version here.

The app requirements

Users can search for a movie by title.
Our app fetches the data from themoviedb API and displays the search results in the form of movie cards where each card has: the movie cover, the movie rating, and the number of votes.
Users can select a movie from that list.

Project Setup

We use create-react-app CLI tool to bootstrap our project:

npx create-react-app moviefinder

This gives us the react boilerplate and takes care of the building process.

Clean our boilerplate

Let's delete the unnecessary files in our app.

From the command line, go to your src/ folder and execute the following commands:

cd src
rm  App.test.js App.css logo.svg serviceWorker.js setupTests.js index.css

Create the folder that will contain our components files:

mkdir components

Create a javaScript file for each component:

cd components touch MoviesList MovieCard

Note: I am using "tailwind" to style the app without any CSS files, you can either copy our app tailwind configuration or feel free to style it on your own.

Now we are ready to code our app

Title

The First thing we can do is output the app title as a warm-up.

import React from "react";

function App() {
  return (
    <div className="w-1/2 h-screen sm:auto md:auto lg:auto shadow-2xl mx-auto flex flex-col items-center">
      <div className="py-5">
        <span className="text-5xl font-light text-white">Movie</span>
        <span className="text-5xl font-light py-2 px-2 text-red-600 ">
          Finder
        </span>
      </div>
    </div>
  );
}

export default App;

Input

Our second UI element would be an input field.

import React from "react";

function App() {
  return (
    <div className="w-1/2 h-screen sm:auto md:auto lg:auto shadow-2xl mx-auto flex flex-col items-center">
      <div className="py-5">
        <span className="  text-5xl font-light text-white">Movie</span>
        <span className="  text-5xl font-light py-2 px-2 text-red-600 ">
          Finder
        </span>
      </div>
      <input
        type="text"
        placeholder="Search"
        className="rounded shadow-2xl outline-none py-2 px-2"
      />
    </div>
  );
}

export default App;

As per the app requirement, users type-in a movie title.

Accordingly, we have to handle such a scenario in our app, so we need to implement two things:

An state to store the typed-in value to use it in our app
An event listener that calls a function to update that state every time an input is changed.

Let's start by our state.

Usually, we resort to useState hook to define our state. However, there is another advanced hook called useReducer.

What is useReducer?

Just like useState, useReducer is another hook to manage state. It has a different syntax and purpose, as explained in the following two parts.

Why useReducer and not useState to manage our state?

As we will see later, our state is a complex object with different primitive data. Sometimes these values are updated together and some of them depend on the previous values of others. To avoid having a useState function for each and multiple calls to their resulting setter functions every time we want to update something, we use useReducer to manage everything in one place and have better code readability.

How to implement useReducer in our app?

The useReducer hook takes a reducer and an initial state as arguments to return an array with two constant elements:

A state.
Something you can call it to update that state called dispatch.

Similarly to what we used to get from useState hook. An array that contains a state and a function to update that state.

  const [state, dispatch] = useReducer(reducer, initialState);

Three steps to implement our useReducer hook:

1- Get access to useReducer in our app.

import React,{useReducer} from "react";

2- Call useReducer in our app function block.

import React from "react";
import { useReducer } from "react";

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div className="w-1/2 h-screen sm:auto md:auto lg:auto shadow-2xl mx-auto flex flex-col items-center">
      <div className="py-5">
        <span className="text-5xl font-light text-white">Movie</span>
        <span className="text-5xl font-light py-2 px-2 text-red-600">
          Finder
        </span>
      </div>
      <input
        type="text"
        placeholder="Search"
        className="rounded shadow-2xl outline-none py-2 px-2"
      />
    </div>
  );
}

export default App;

OOps!

We get an error in our console because we still did not define an initial state for our app and a reducer function.

3- Define the useReducer function arguments:

Initial state: An object where all our application data lives in. Outside our App component, we define our first state value to store the typed-in movie title.

const initialState = {
  typedInMovieTitle: "",
};

Reducer: It is a function that takes the current sate and an action to return a new state.

(state, action) => newState

and our reducer function is the following:

const reducer = () => {};

Leave it empty for now just to clear our console from undefined argument error.

We have achieved the first step in setting up the logic to store what users type-in. We have where the typed data will be stored. Now we need to set up an event listener to track the changes as the users type-in.

We add an event listener as an attribute to our input element. It references a javaScript function called onChange .


function onChange() {}

<input
    type="text"
    placeholder="Search"
    className="rounded shadow-2xl outline-none py-2 px-2"
    onChange={onChange}
 />

How to use the onChange, dispatch, and reducer to update our state?

Inside our onChange function block we call the dispatch method we got from calling the useReducer function and we pass to it an object of two properties as a dispatch command to our reducer function.

const ACTIONS = {
  TYPE_SEARCH: "TYPE_SEARCH",
};

function onChange(event) {
    dispatch({
      type: ACTION.TYPE_SEARCH,
      value: event.target.value,
    });
  }

The concept of dispatch is to just declare what changes we want to make to our state when an action happens. For example here, when the action type is ACTION.TYPE_SEARCH, which means a user typed something on the input, we want the typed value value: event.target.value to be assigned to typedInMovieTitle. The reducer is the one that will host the logic to this implementation.

Let's take a look at the passed object properties:

Type: Type of action that happened. We define a proper ACTIONS object that holds all the action types.
Value: The typed-in movie title by the user.

Now we are ready to use the reducer function that we left empty.

The object we passed by the dispatch method mimics a scenario that happens on our app. In our case, It can either be a scenario of a user interacting with the app or a data fetching operation. It is passed as an action parameter to our reducer.

const reducer = (state, action) => {
  switch (action.type) {
    case ACTION.TYPE_SEARCH:
      return {
        ...state,
        typedInMovieTitle: action.value,
      };

    default:
      return state;
  }
};

Once the reducer receives the action object, we use a switch statement to determine the scenario that happens on our app using the action.type property. For every scenario case, our function should return an object that contains the unchanged state values and the updated ones. Accordingly, typedInMovieTitle is assigned the value we passed in our dispatched object, which is the typed value by the user. In a case where there is no action on our app, a default case, it returns the state.

Nice!

We just finished setting up our code logic to track what users type-in and where to store it. Now we have to allow a user to submit this data to use it later for our fetch operation.

Submit form

Once the user finishes typing the movie name, he submitted it by clicking "Enter".

To make this requirement possible we go through the following implementation steps:

Wrap our input element in a form and handle the form submission with a javaScript function called onSubmit.

function onSubmit() {}

<form onSubmit={onSubmit}>
    <input
        type="text"
        placeholder="Search"
        className="rounded shadow-2xl outline-none py-2 px-2"
        onChange={onChange}
    />
 </form>

Define an action for the movie submission scenario.

const ACTIONS = {
  ...
  SUBMIT_SEARCH: "SUBMIT_SEARCH"
};

Define a new state value submittedMovieTitle to store this data.

const initialState = {
  ...
  submittedMovieTitle: ""
};

Inside the onSubmit function we dispatch a command to our reducer to update the submittedMovieTitle state value.

function onSubmit(event) {
    event.preventDefault();
    dispatch({
      type: ACTION.SUBMIT_SEARCH,
    });
  }


 const reducer = (state, action) => {
  switch (action.type) {

     ...

     case ACTION.SUBMIT_SEARCH:
      return {
        ...state,
        submittedMovieTitle: state.typedInMovieTitle,
      };

    default:
      return state;
  }
};

If you notice here, in our dispatch method we did not include a value attribute. It is because our reducer is updating the submittedMovieTitle with the previous value we got from typedInMovieTitle.

Fetch the movies data

Now we use the submittedMovieTitle as a query argument to fetch the movies data from the themoviedb.

Another argument is used in the query link is the API key:

const API_Key = "16c66b0f7fd3c3447e7067ff07db3197";

Note: Read the database documentation to know how to generate an API key for your app.

And this is our data fetching link.

`https://api.themoviedb.org/3/search/movie?api_key=${API_Key}&query=${state.submittedMovieTitle}`

This operation will lead us to our second important hook which is useEffect.

What is useEffect and Why do we use it?

It is a hook to perform side effects, i.e. operations that affect anything outside our component such as API calls, DOM manipulation, and user authentication.

The useEffect hook takes two arguments:

A callback function that executes the code after rendering the components.
A Dependency array.

useEffect(()=>{},[])

Dependency array

This array simply controls when useEffect runs. It tells react to run the code inside the useEffect only when the values inside the array change. All values from inside the component that are used in the useEffect function must be in the array, including props, state, functions. Sometimes this might cause an infinite loop but there is another solution to such issue rather than hiding these variables from the dependency array.

To make sure that our dependency array has all the required values, we install the ESLint plugin 'exhaustive-deps'.

Installation

yarn add eslint-plugin-react-hooks@next
# or
npm install eslint-plugin-react-hooks@next

ESLint config:
{ "plugins": ["react-hooks"], 
 "rules": { "react-hooks/rules-of-hooks": 'error',
 "react-hooks/exhaustive-deps": 'warn'
}

How do we implement useEffect:

Similarly to useReducer we implement our useEffect hook:

Get access to useEffect in our app

import React,{useEffect,useReducer} from "react";

Define the proper actions that come with the fetch operation.

const ACTIONS = {
  ...
  FETCH_DATA: "FETCH_DATA",
  FETCH_DATA_SUCCESS: "FETCH_DATA_SUCCESS",
  FETCH_DATA_FAIL: "FETCH_DATA_FAIL",
};

Define new state variables to store the fetched movies and the loading state of data.

const initialState = {
  typedInMovieTitle: "",
  submittedMovieTitle: "",
  movies: [],
  isLoading: false,
  isError: false,
};

Implement our fetch operation logic. We use a conditional statement to check if a user submitted a movie title. If so, we fetch data from the API and dispatch the proper commands for our reducer function to update the corresponding state values.

 const API_Key = "16c66b0f7fd3c3447e7067ff07db3197";

  useEffect(() => {
    if (state.submittedMovieTitle) {
      const fetchData = async () => {
        dispatch({ type: "FETCH_DATA" });
        try {
          const result = await axios(
            `https://api.themoviedb.org/3/search/movie?api_key=${API_Key}&query=${state.submittedMovieTitle}`
          );

          dispatch({
            type: ACTION.FETCH_DATA_SUCCESS,
            value: result.data.results,
          });
        } catch (error) {
          dispatch({ type: "FETCH_FAILURE" });
        }
      };
      fetchData();
    }
  }, [state.submittedMovieTitle]);

We have three scenarios:

Data fetching is ongoing. Reducer returns an object that contains the unchanged state values and updated value of isLoading which is true.

const reducer = (state, action) => {
  switch (action.type) {

    ...

    case ACTION.FETCH_DATA:
      return {
        ...state,
        isLoading: true,
      };

    default:
      return state;
  }

};

Data fetching succeed. Reducer function returns an object that includes the unmodified state values and updated values of movies and isLoading. The movies state value is assigned the fetched list of movies. The isLoading is false because the fetched successfully happened and we are not waiting for our data anymore.

const reducer = (state, action) => {
  switch (action.type) {

    ...

    case ACTION.FETCH_DATA_SUCCESS:
      return {
        ...state,
        movies: action.value,
        isLoading: false,
      };

    default:
      return state;
  }

};

Data fetching failed. Similarly, our reducer returns an object with only one updated state value, isError to true.

const reducer = (state, action) => {
  switch (action.type) {

    ...

    case ACTION.FETCH_DATA_FAIL:
      return {
        ...state,
        isError: true,
      };

   default:
      return state;
  }

};

Now we want to show something to the user whenever a state is updated in every scenario we mentioned above.

In case data is loading, we want to output a circular progress component on our DOM to inform users that data is loading. If data failed to load, we just output a text mentioning data failed to load.

To do so:

We get access to a CircularProgress component from the Material-UI library.

import CircularProgress from "@material-ui/core/CircularProgress";

Use a ternary operator to conditionally output:

The CircularProgress if isLoading value is true.

The text "Data failed to load" if isError is true.

The fetched movies if all of the above are false.

{state.isLoading ? (
  <CircularProgress color="secondary" />
) : state.isError ? (
  <p className="text-white shadow-xl mt-10 font-bold">
     Data failed to load
  </p>
) : (
  <MoviesList movies={movies} />
)}

Do not worry about the MoviesList component code, we will discuss it in detail in the MoviesList component section.

Now Let's dive in a little bit in how our usEffect function runs, what actually happens under the hood?

Before a user types-in any movie name

1- React renders the component based on the initial state.

2- After the first render, the useEffect function runs but it doesn't do anything since state.submittedMovieTitle is still empty.

When a user submits a movie name:

1- When the user submits a movie title, state.submittedMovieTitle is updated, which triggers a new render.

2- After that render, React will realize that the new state.submittedMovieTitle value is different from the last iteration and runs the effect function.

3- Since state.submittedMovieTitle is now defined, an API request is made to fetch the movies.

To output the fetched movies we do the following:

Create a MoviesList component in our MoviesList.js file.

MoviesList component

Productivity tip: Download the VS Code ES7 React/Redux/React-Native/JS snippets extension. It saves you time by automatically creating a functional component that has the name of its file and a default export.

In the MoviesList.js file type the following prefix:

rcfe

And you will get your component.

import React from 'react'

function MoviesList() {
  return (
    <div>

    </div>
  )
}

export default MoviesList

Import MoviesList in our App.js file to be able to call it in our App component.

import MoviesList from "./MoviesList";

function App() {
  ...

  return (
      <div className="w-1/2 sm:auto md:auto lg:auto shadow-2xl h-screen mx-auto flex flex-col items-center">
        <div className="py-5">
          <span className="text-5xl font-light text-white  ">Movie</span>
          <span className="text-5xl font-light  py-2 px-2 text-red-600 ">
            Finder
          </span>
        </div>
        <form onSubmit={onSubmit}>
          <input
            type="text"
            placeholder="Search"
            className=" rounded shadow-2xl outline-none py-2 px-2"
            onChange={onChange}
          />
        </form>
        <MoviesList />
      </div>
  );
}

export default App;

Pass to it the fetched movies as a prop.

  <MoviesList movies={movies} />

To make our code more readable. Let's make our MoviesList component responsible for only one task. Inside the component, we map through the passed movies array and pass every movie as a prop to the MovieCard component.


function MoviesList({ movies }) {
  return (
    <div className="overflow-auto my-3">
      {movies.map((movie, index) => (
        <MovieCard key={movie.index} movie={movie} />
      ))}
    </div>
  );
}

export default MoviesList;

We get an error in our console because we still did not define our MovieCard component.

Define a MovieCard component to output the movie details in a card.

MovieCard component

Similarly to the way we created the MoviesList component we use the ES7 React snippet to implement the MovieCard component.

In the MovieCard.js file type:

rcfe

And we get our component.

import React from 'react'

function MovieCard() {
  return (
    <div>

    </div>
  )
}

export default MovieCard

The MovieCard gets a movie from the MoviesList to render its cover, rating, and the number of votes in a card.

function MovieCard({ movie }) {
  return movie.poster_path ? (
    <div className="max-w-sm  overflow-hidden shadow-xl  mt-3 mb-6 rounded-lg shadow-2xl">
      <img
        src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
        alt="404"
        className="  w-full object-cover "
      />

      <div className="py-2 bg-white text-black font-semibold flex justify-evenly items-center">
        <div className=" flex flex-col justify-center items-center  ">
          <span className="" role="img" aria-label="Star">
            ⭐️
          </span>
          <p>{movie.vote_average}</p>
        </div>
        <span className=" flex flex-col justify-center items-center  ">
          <p className="sm:text-xs">Vote </p>
          <p className="sm:text-xs">{movie.vote_count} </p>
        </span>
      </div>
    </div>
  ) : null;
}

export default MovieCard;

Why are we using conditional rendering in our MovieCard component?

If you take a look at the movies we get from our API, some of them do not have a cover and we are not interested in ruining our UI with a bunch of not found alert that occupies the cover position.

To make our app looks good we just render the movies that have a cover.

Now we get to the Last requirement in our app.

Selecting a movie

For the user to select a movie he can tick a checkbox on the movie card and eventually our UI will display only that movie card. To put it as a code logic, we have to update our state movies that stores the movies list to have only the selected movie. In this way, React will re-render our UI to show only that selected movie.

Before we jump into coding our logic, let's implement a checkbox in the MovieCard.

Get access to a Checkbox component from the Material-UI library.

import Checkbox from "@material-ui/core/Checkbox"

Integrate it into our MovieCard.

function MovieCard({ movie }) {
  ...

  return movie.poster_path ? (
    <div className="max-w-sm  overflow-hidden  mt-3 mb-6 rounded-lg shadow-2xl">
      <img
        src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
        alt="404"
        className="  w-full object-cover "
      />
      <div className="py-2 bg-white text-black font-semibold flex justify-evenly items-center">
        <div className=" flex flex-col justify-center items-center  ">
          <span className="sm:text-xs" role="img" aria-label="Star">
            ⭐️
          </span>
          <p className="sm:text-xs">{movie.vote_average}</p>
        </div>
        <span className=" flex flex-col justify-center items-center  ">
          <p className="sm:text-xs">Vote </p>
          <p className="sm:text-xs">{movie.vote_count} </p>
        </span>
        <Checkbox color="default"/>
      </div>
    </div>
  ) : null;
}

export default MovieCard;

Add an onChange event listener as an attribute to our Checkbox component.

<Checkbox color="default" onChange={onChange} />

Once a user checks a movie card, our onChange event listener triggers an onChange event handler.

 function onChange(event) {}

Let's also have a selectMovie function in our App component where we have access to the dispatch method.

function selectMovie() {}

Inside it, we call the dispatch method and pass to it our typical object that mimics the movie selection scenario. We just want to tell the reducer if there is any movie selection action update our movies state to contain only that selected movie.

const ACTIONS = {
  ...
  SELECT_MOVIE: "SELECT_MOVIE",
};

function selectMovie(movie) {
    dispatch({
      type: ACTION.SELECT_MOVIE,
      value: [movie],
    });
  }

As you notice, we are missing the movie parameter. It is the selected movie object that we want to pass to our reducer as a value to update our state as we mentioned before.

Accordingly, inside our onChange function in the MovieCard, we call the selectMovie function and pass to it the movie as an argument. In this way, it can use it as a parameter to dispatch the command.

To call the selectMovie function inside our MovieCard we have to pass it as a prop from our root component to the MoviesList component then again pass it as a prop to the MovieCard component.

<MoviesList movies={state.movies} selectMovie={selectMovie}/>

function MoviesList({ movies,selectMovie }) {
  return (
    <div className="overflow-auto my-3">
      {movies.map((movie, index) => (
        <MovieCard key={movie.index} movie={movie} selectMovie={selectMovie}/>
      ))}
    </div>
  );
}

Call the selectMovie function in our handler.

function MovieCard({ movie,selectMovie }) {

   function onChange(event) {
      selectMovie(event.target.checked ? movie : null);
   }

   ...

}

export default MovieCard;

If a movie card checkbox is checked, our onChange calls the selectMovie function with the selected movie as an argument. Else, a null takes a place as an argument. Once our reducer receives the right parameters, it embarks on changing the state accordingly.

const reducer = (state, action) => {
  switch (action.type) {

    ...

    case ACTION.SELECT_MOVIE: {
      return {
        ...state,
        movies: action.value,
      };
    }

    default:
      return state;
  }

};

Once the state is updated React renders the changes to the DOM:

Perfect!

However, there is an issue with this logic though. Our user in this case can not go back to the list of movies to select a different movie if he changes his mind. This because we changed our state movies value to contain only the selected movie. We can't fetch the list of movies again and assign it to movies because the fetch happens only once.

How can we solve it ?

We have to keep the state movies unchanged. In other words, it will always store the list of movies and not assign it another value.

To do so:

First, we define selectedMovie as the last state variable that is responsible for storing only the selected movie object.

const initialState = {
  ...
  selectedMovie: {},
};

Then change our reducer code.

function selectMovie(movie) {
    dispatch({
      type: ACTION.SELECT_MOVIE,
      value: movie,
    });
  }

const reducer = (state, action) => {
  switch (action.type) {

    ...

    case ACTION.SELECT_MOVIE: {
      return {
        ...state,
        selectedMovie: action.value,
      };
    }

    default:
      return state;
  }

};

Now as a better solution, we have two values to render conditionally, a selected movie or the movies list if there is no selected one.

Define a const variable call it filteredMovies and give it a value based on the two scenarios we mentioned earlier:

1- If a user selects a movie then we assign it an array that contains only that movie object.

2- Else we give it the movies list.

const filteredMovies = !state.selectedMovie
    ? state.movies
    : [state.selectedMovie];

Then we pass the filteredMovies value as a prop to the MoviesList component.

<MoviesList filteredMovies={filteredMovies} />

Let's test it.

The app works fine and we managed to code all the functionalities. However, there is one last thing to fix in our code, we have to use a better coding practice when passing our selectMovie function from the root component to the MovieCard component.

We should use something that enables us to directly pass the selectMovie function to our MovieCard component without drilling it down the components tree. The MoviesList does not need the selectMovie function, so why bother using it as an intermediate.

And here we get to introduce our last hook feature, useContext.

What is useContext?

Let us first remember what is Context API in React. It is an alternative to "pop-drilling", so instead of passing data through the component tree, it allows us to go back, have a global state that can be consumed by only the components interested in it.

Why do we need useContext in our app?

If we draw a simple scheme of our App components

We can see that we are passing the selectMovie that updates the local state two layers down. Having a global state will allow us to skip the MovieList component layer and directly pass the function to the MovieCard. It is also useful to know such a technique for your future practices too. You might have deeply nested components that all of them or some of them might need access to a Theme, language preference, or authentication information.

How do we use useContext?

Let's have a separate file for our context creation, call it moviesContext.js.

Three steps to implement useContext:

Access createContext in our file which allows us to create our context object.

import { createContext } from "react";

Create our moviesContext object.

const moviesContext = createContext(null);

export default moviesContext;

Get access to our moviesContext in our App component.

import moviesContext from "../moviesContext";

Wrap the children components of our App component with a Provider that we get from moviesContext object.

 <moviesContext.Provider>
      <div className=" app w-1/2 h-screen sm:auto md:auto lg:auto  shadow-2xl h-screen mx-auto flex flex-col items-center">
        <div className="py-5">
          <span className="  text-5xl font-light text-white  ">Movie</span>
          <span className="  text-5xl font-light text-white py-2 px-2 text-red-600 ">
            Finder
          </span>
        </div>
        <form onSubmit={onSubmit}>
          <input
            type="text"
            placeholder="Search"
            className="rounded shadow-2xl outline-none py-2 px-2"
            onChange={onChange}
          />
        </form>
        <MoviesList filteredMovies={filteredMovies} />
      </div>
    </moviesContext.Provider>

The Provider component allows our children components to subscribe to the moviesContext and consume it. It takes a value prop that is passed to all the consuming components. In our case, it would be the selectMovie function, because we want our MovieCard to be able to access it.

<moviesContext.Provider value={selectMovie}>
      <div className=" app w-1/2 h-screen sm:auto md:auto lg:auto  shadow-2xl h-screen mx-auto flex flex-col items-center">
        <div className="py-5">
          <span className="  text-5xl font-light text-white  ">Movie</span>
          <span className="  text-5xl font-light text-white py-2 px-2 text-red-600 ">
            Finder
          </span>
        </div>
        <form onSubmit={onSubmit}>
          <input
            type="text"
            placeholder="Search"
            className="rounded shadow-2xl outline-none py-2 px-2"
            onChange={onChange}
          />
        </form>
        <MoviesList filteredMovies={filteredMovies} />
      </div>
    </moviesContext.Provider>

Get access to useContext in our MovieCard component so we can consume our moviesContext there.

import React, { useContext } from "react";

Consume the context in our movieCard

 function MovieCard({ movie }) {

  const selectMovie = useContext(moviesContext);

  function onChange(event) {
    selectMovie(event.target.checked ? movie : null);
  }

  ...

}

export default MovieCard;
  }

Done.

Validate our code

One last thing we can add to our application is props validation using prop-types to avoid catching bugs. Our passed in props have to be of certain types. Let's implement this in our code.

First, we get access to PropTypes from 'prop-types' in our App and MoviesList components.

import PropTypes from "prop-types";

Use the validators we get from PropTypes to enforce validation rules on the passed props.

App component

MoviesList.propTypes = {
  filteredMovies: PropTypes.arrayOf(PropTypes.object),
};

MoviesList component

MovieCard.propTypes = {
  movie: PropTypes.object,
};

Conclusion

I publish articles monthly and I'm currently looking for my first Frontend Developer job in either Europe or Canada.

Stay tuned by following me on Twitter (@amir_ghezala) or checking my portfolio.

Level-up your JavaScript and React by building a Todo app (tutorial)

Amir Ghezala — Wed, 22 Jul 2020 19:20:16 +0000

We will build THE classic React app: a TodoList. It’s a simple app and yet full of interesting React and JavaScript concepts.

We will cover:

Creating functional React components and managing their state with hooks.
Handling conditional rendering in React.
Using PropTypes for a safer code.
JavaScript concepts: the ternary operator, array methods, and the spread operator.
Refactoring code to reduce code redundancy and increase code readability.

You can find the final source code here and the live version here.

The app requirements

The app allows us to perform the following operations:

Add a todo (it gets added to the Pending section).
Complete a todo (it gets added to the Completed section).
Delete a todo (whether it’s pending or completed).

User Interface Mock

Here’s a simple sketch of the UI of our application:

As you can see, our UI consists of the following parts:

Text input field where the user types a todo.
Pending section: contains the todos added by the user that have not been completed yet.
Completed section: contains the todos completed by the user.

Project Setup

We use create-react-app CLI tool to bootstrap our project:

npx create-react-app todo-app

This gives us the necessary boilerplate to immediately get productive and not worry about any build tools.

We’re now ready for implementation.

Note: to keep this article short and focused, we will not get into details about the CSS part of the app. To have a similar look to the final result, make sure to copy the same code in App.css file and use the same classNames.

Adding a heading with the App title

Let’s delete the boilerplate code in App.js and add a header that contains the title of our todo app:

import React from "react";

import "./App.css";


function App() {
  return (
    <div className="app">
        <h1>Todo</h1>
    </div>
  );
}
export default App;

Adding the Input field

Let's add a basic text input element for the user to type a todo.

To keep track of the value in the input field, we need to save and update that value whenever the user types-in something.

In React we store our application data in the app state. To manage our text input state, we use React.useState hook.

Note: You can find a detailed article about handling state with React.useState hook here.

We can import the useState function from React as follows:

import React, { useState } from "react";

The typed-in todo by the user has a text value. Therefore, let’s initialize it with an empty string:

const [typedInTodo, setTypedInTodo] = useState("");

useState provides an array that contains 2 elements:

A typedInTodo value that we can use to populate the input field.
A setTypedInTodo function to update the todo. We’ll see later how to do that.

import React, { useState } from "react";

import "./App.css";


function App() {
  const [typedInTodo, setTypedInTodo] = useState("");

  return (
    <div className="app">
        <h1>Todo</h1>
        <input type="text" placeholder="Add todo..." value={typedInTodo} />
    </div>
  );
}
export default App;

Handling changes to the input

If we try to type anything in the input field, we’ll notice that it stays empty. This is because we‘re not updating its value based on what the user is typing.

To react to the user typing, we add an onChange event listener to the input field.

Our event listener receives an event parameter that we can use to extract the typed-in value and update the state with it:

onChange={(event) => setTypedInTodo(event.target.value)}

import React, { useState } from "react";

import "./App.css";


function App() {
  const [typedInTodo, setTypedInTodo] = useState("");

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
      />
    </div>
  );
}
export default App;

Now if we type something in the input field, it gets updated. We can check if the state is updated by outputting the new value of typedInTodo to the console:

console.log(typedInTodo)

Let’s make it possible to submit a todo

Since the pending section will hold the submitted todos, it has to have its own state to store such data. We define its state, similarly to how we did it for the typed-in todo, using React.useState. Since it’s a list, we need an array to store this data. Initially, it is an empty array:

const [pendingTodos, setPendingTodos] = useState([]);

import React, { useState } from "react";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
      />
    </div>
  );
}
export default App;

Let’s now make it possible to add a todo to the pending section by hitting the “Enter” key.

We can do so by adding the onKeyDown event listener to the input field. The listener function adds the typed-in todo to the pending section if the following conditions hold:

The user pressed the “Enter” key.
The typed-in todo is not empty. To remove spaces when checking that, we can use String.prototype.trim() method.

To add the todo to the pendingTodos, we use the Spread operator, which allows us to expand the array into individual elements and add a new todo to it.

We should also not forget to clear the input field once the todo is submitted. We can do so by updating the typedInTodo to an empty string.

import React, { useState } from "react";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
    </div>
  );
}
export default App;

Let's see if our logic works properly by adding some logs:

console.log(typedInTodo);
console.log(pendingTodos);

Note: if your console is logging values twice then you need to remove the StrictMode element from index.js file.

Showing the Pending todos

The todos submitted by the user are stored in the state, but we can’t see them in the UI yet.

Let’s add a “Pending” section to show these todos.

The pending section has:

Title: an 'h2' header named "Pending" that appears dimmed when the section is empty and appears bold whenever a todo is added.
List: contains the current pending todos.

We use Array.prototype.map method to map each pending todo in pendingTodos to a div that has:

The text of the todo.
A button to complete the todo.
A button to delete the todo.

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <div className="todoContainer">
          <h2
            className={
              pendingTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Pending
          </h2>
          <div>
            {pendingTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button className="transparent completeButton">
                    <CheckOutlined className="icon" />
                  </button>
                  <button className="transparent deleteButton">
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Note: your console will inform you that every rendered todo task in our components needs its own key attribute to identify it from its siblings and that is why we added such attribute to the todos.

Adding the delete ❌ functionality

Let's make the delete button work. Our delete function:

Gets the index of the todo to delete.
Filters out the todo from the current list of pending todos, by removing any todo that has the same index as the target one.

Note: the filter function passed to Array.prototype.filter accepts 2 arguments: the todo itself (which we don't need and therefore we labeled it as _ ) and the index of the todo.

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);

  function deleteTodo(todoIndex) {
    const filteredTodos = pendingTodos.filter(
      (_, index) => todoIndex !== index
    );
    setPendingTodos(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <div className="todoContainer">
          <h2
            className={
              pendingTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Pending
          </h2>
          <div>
            {pendingTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button className="transparent completeButton">
                    <CheckOutlined className="icon" />
                  </button>
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index)}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Adding the complete ✅ functionality

We first need to create a state value for the completed todos:

 const [completedTodos, setCompletedTodos] = useState([]);

The complete function:

Gets the pending todo as an argument.
Adds the pending todo to completedTodos by using the spread operator [...].
Deletes the todo from the pendingTodos array.

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);
  const [completedTodos, setCompletedTodos] = useState([]);

  function completeTodo(todoIndex) {
    const pendingTask = pendingTodos[todoIndex];
    setCompletedTodos([...completedTodos, pendingTask]);
    deleteTodo(todoIndex);
  }

  function deleteTodo(todoIndex) {
    const filteredTodos = pendingTodos.filter(
      (_, index) => todoIndex !== index
    );
    setPendingTodos(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <div className="todoContainer">
          <h2
            className={
              pendingTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Pending
          </h2>
          <div>
            {pendingTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button
                    className="transparent completeButton"
                    onClick={() => completeTodo(index)}
                  >
                    <CheckOutlined className="icon" />
                  </button>
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index)}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Since the Completed section is exactly the same as the Pending one, let's copy paste the same code and just remove the complete button from it and update the section's heading:

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);
  const [completedTodos, setCompletedTodos] = useState([]);

  function completeTodo(todoIndex) {
    const pendingTask = pendingTodos[todoIndex];
    setCompletedTodos([...completedTodos, pendingTask]);
    deleteTodo(todoIndex, "pending");
  }

  function deleteTodo(todoIndex) {
    const filteredTodos = pendingTodos.filter(
      (_, index) => todoIndex !== index
    );
    setPendingTodos(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <div className="todoContainer">
          <h2
            className={
              pendingTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Pending
          </h2>
          <div>
            {pendingTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button
                    className="transparent completeButton"
                    onClick={() => completeTodo(index)}
                  >
                    <CheckOutlined className="icon" />
                  </button>
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index)}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="todoContainer">
          <h2
            className={
              completedTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Completed
          </h2>
          <div>
            {completedTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index)}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Notice that the deleteTodo function only works with pending todos.

Making the delete ❌ functionality work in the Completed Section

To make our deleteTodo function support both sections, we should provide it a second argument that tells it what the target section is.

Based on that, the deleteTodo function can then know whether to delete a pending todo or a completed one.

After all the only things that change when deleting a completed or a pending todo are the target todo list and its state setter function:

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);
  const [completedTodos, setCompletedTodos] = useState([]);

  function completeTodo(todoIndex) {
    const pendingTask = pendingTodos[todoIndex];
    setCompletedTodos([...completedTodos, pendingTask]);
    deleteTodo(todoIndex, "pending");
  }

  function deleteTodo(todoIndex, targetSection) {
    const targetList =
      targetSection === "pending" ? pendingTodos : completedTodos;
    const setter =
      targetSection === "pending" ? setPendingTodos : setCompletedTodos;
    const filteredTodos = targetList.filter((_, index) => todoIndex !== index);
    setter(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1>Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <div className="todoContainer">
          <h2
            className={
              pendingTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Pending
          </h2>
          <div>
            {pendingTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button
                    className="transparent completeButton"
                    onClick={() => deleteTodo(index, "pending")}
                  >
                    <CheckOutlined className="icon" />
                  </button>
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index, "completed")}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="todoContainer">
          <h2
            className={
              completedTodos.length > 0
                ? "boldSectionTitle"
                : "dimmedSectiontTitle"
            }
          >
            Completed
          </h2>
          <div>
            {completedTodos.map((todo, index) => (
              <div key={index} className="todoItem">
                <p>{todo}</p>
                <div className="buttonsSection">
                  <button
                    className="transparent deleteButton"
                    onClick={() => deleteTodo(index)}
                  >
                    <CloseOutlined className="icon" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

The todo app is working now, but we should try to make our code more readable by removing some redundancy.

Refactoring

If you look at our rendered sections code you can notice that it is just one list of todos in a section that we duplicated to create another section. So why don’t we just create that list as a single reusable component and render our sections lists Conditionally based on the necessary props we pass to that component.

What are these props that our list component needs in order to render the sections we created in the previous approach?

sectionType: either"Pending" or "Completed"
todoList: the list of todos to render (either completedTodos or pendingTodos).
deleteTodo and completeTodo functions.

Let’s refactor our code following these steps :

Create a variable named sectionTypeTitle to store the values of the first prop and avoid potential typos.
Create our component, call it TodoList and pass to it the props.
Show the appropriate section header based on sectionType.
Only render the complete button if the sectionType is "pending".
Map through the passed todoList and render the todos.

import React, { useState } from "react";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

const sectionTypeTitle = {
  completed: "Completed",
  pending: "Pending",
};

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);
  const [completedTodos, setcompletedTodos] = useState([]);

  function completeTodo(todoIndex) {
    const pendingTask = pendingTodos[todoIndex];
    setcompletedTodos([...completedTodos, pendingTask]);
    deleteTodo(todoIndex, "pending");
  }

  function deleteTodo(todoIndex, todoSection) {
    const targetList =
      todoSection === "pending" ? pendingTodos : completedTodos;
    const setter =
      targetList === pendingTodos ? setPendingTodos : setcompletedTodos;
    const filteredTodos = targetList.filter((_, index) => todoIndex !== index);
    setter(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1 className="title">Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <TodoList
          sectionTitle="pending"
          completeTodo={completeTodo}
          deleteTodo={deleteTodo}
          todoList={pendingTodos}
        />
        <TodoList
          sectionTitle="completed"
          todoList={completedTodos}
          deleteTodo={deleteTodo}
        />
      </div>
    </div>
  );
}

export default App;

function TodoList({ sectionTitle, completeTodo, deleteTodo, todoList }) {
  return (
    <div className="todoContainer">
      <h2
        className={
          todoList.length > 0 ? "boldSectionTitle" : "dimmedSectiontTitle"
        }
      >
        {sectionTypeTitle[sectionTitle]}
      </h2>
      <div>
        {todoList.map((todo, index) => (
          <div className="todoItem" key={index}>
            <span>{todo}</span>
            <div className="buttonsSection">
              {sectionTitle === "pending" && (
                <button
                  className="transparent completeButton"
                  onClick={() => completeTodo(index)}
                >
                  <CheckOutlined className="icon" />
                </button>
              )}
              <button
                className="transparent deleteButton"
                onClick={() => deleteTodo(index, sectionTitle)}
              >
                <CloseOutlined className="icon" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Adding validation to our code

One last thing we can add to our components is props validation using prop-types.
Our passed in props need to be of certain types and we need to enforce that in our code to avoid catching bugs.

First, we import PropTypes from 'prop-types' at the top of our app code.

import PropTypes from 'prop-types';

Then use the validators that come with it to validate the data our TodoList component receives.

TodoList.propTypes = {
  sectionTitle: PropTypes.oneOf(["pending", "completed"]).isRequired,
  completeTodo: PropTypes.func,
  deleteTodo: PropTypes.func.isRequired,
  todoList: PropTypes.arrayOf(PropTypes.string),
};

Let’s add it to our final app code :

import React, { useState } from "react";
import PropTypes from "prop-types";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import "./App.css";

const sectionTypeTitle = {
  completed: "Completed",
  pending: "Pending",
};

function App() {
  const [typedInTodo, setTypedInTodo] = useState("");
  const [pendingTodos, setPendingTodos] = useState([]);
  const [completedTodos, setcompletedTodos] = useState([]);

  function completeTodo(todoIndex) {
    const pendingTask = pendingTodos[todoIndex];
    setcompletedTodos([...completedTodos, pendingTask]);
    deleteTodo(todoIndex, "pending");
  }

  function deleteTodo(todoIndex, todoSection) {
    const targetList =
      todoSection === "pending" ? pendingTodos : completedTodos;
    const setter =
      targetList === pendingTodos ? setPendingTodos : setcompletedTodos;
    const filteredTodos = targetList.filter((_, index) => todoIndex !== index);
    setter(filteredTodos);
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && typedInTodo.trim()) {
      setPendingTodos([...pendingTodos, typedInTodo]);
      setTypedInTodo("");
    }
  }

  return (
    <div className="app">
      <h1 className="title">Todo</h1>
      <input
        type="text"
        placeholder="Add todo..."
        value={typedInTodo}
        onChange={(event) => setTypedInTodo(event.target.value)}
        onKeyDown={onKeyDown}
      />
      <div className="sectionsContainer">
        <TodoList
          sectionTitle="pending"
          completeTodo={completeTodo}
          deleteTodo={deleteTodo}
          todoList={pendingTodos}
        />
        <TodoList
          sectionTitle="completed"
          todoList={completedTodos}
          deleteTodo={deleteTodo}
        />
      </div>
    </div>
  );
}

export default App;

function TodoList({ sectionTitle, completeTodo, deleteTodo, todoList }) {
  return (
    <div className="todoContainer">
      <h2
        className={
          todoList.length > 0 ? "boldSectionTitle" : "dimmedSectiontTitle"
        }
      >
        {sectionTypeTitle[sectionTitle]}
      </h2>
      <div>
        {todoList.map((todo, index) => (
          <div className="todoItem" key={index}>
            <span>{todo}</span>
            <div className="buttonsSection">
              {sectionTitle === "pending" && (
                <button
                  className="transparent completeButton"
                  onClick={() => completeTodo(index)}
                >
                  <CheckOutlined className="icon" />
                </button>
              )}
              <button
                className="transparent deleteButton"
                onClick={() => deleteTodo(index, sectionTitle)}
              >
                <CloseOutlined className="icon" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

TodoList.propTypes = {
  sectionTitle: PropTypes.oneOf(["pending", "completed"]).isRequired,
  completeTodo: PropTypes.func,
  deleteTodo: PropTypes.func.isRequired,
  todoList: PropTypes.arrayOf(PropTypes.string),
};

Conclusion

I publish articles monthly and I'm currently looking for my first Frontend Developer job in either Europe or Canada.

Stay tuned by following me on Twitter (@amir_ghezala) or checking my portfolio.

Cool kids handle state with Hooks

Amir Ghezala — Tue, 02 Jul 2019 19:42:51 +0000

A React application is basically a set of React components put together to serve the application’s purpose. These components can be either functional or classes. Functional components are functions that receive props (properties) and return JSX code that is rendered to the screen. They are categorized as stateless components because they do not utilize state and lifecycle methods.

However, prior to 16.8, if you wanted to have a state in your component or wanted to use life-cycle methods, you would need to make your component as a class-based one. Using both types of components has its own advantages when creating an application. However, conversion between them is really annoying and knowing which lifecycle to use, when and how to use it correctly is really challenging when it comes to complex applications.

React 16.8 introduces a new feature: hooks. React hooks are a fundamental change since they make it finally possible to create stateful (with state) function components!

This writeup aims to showcase the current state of state management in React. We will take the example of a simple calculator app and implement it using class components logic, then using two different React Hooks: useState and useReducer. By doing so, we will go through state manipulation in both class and function components.

The final result of our calculator app will look as follow:

The calculator accepts two input numbers to performs arithmetic operations according to the selected operator.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     ....
    };
  }
  ...
  };
  render() {
    return (
      <form>
        <label>
          <div>
            Number 1 : <input type="text" onChange={this.firstNumUpdate} />
          </div>
          <br />
          <div>
            Number 2 : <input type="text" onChange={this.secondNumUpdate} />
          </div>
          <br />
          <div>
            <select onChange={this.operatorUpdate}>
              <option value="+">+</option>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
            <br />
            <br />
          </div>
          <input type="button" onClick={this.executeComputation} value="Execute" />
          <div />
          <br />
          <input type="text" value={this.state.result} />
        </label>
      </form>
    );
  }
}

I- Using a class component

To remind you again, we resorted to the class-based type component to create our App in order to catch the user inputs and update the state values accordingly. The state of our app consisted of the following:

firstnumber: the Number 1 user input,
secondnumber: the Number 2 user input,
operator: the operator the user chooses,
result: the final result of computing Number 1 and Number 2 with the operator.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstnumber: 0,
      secondnumber: 0,
      operator: "+",
      result: 0
    };
    this.firstNumUpdate = this.firstNumUpdate.bind(this);
    this.secondNumUpdate = this.secondNumUpdate.bind(this);
    this.operatorUpdate = this.operatorUpdate.bind(this);
  }
  ...
}

We also had our onChange and onClick handlers that call this.setState to update the dynamic stored values in this.state:

firstNumUpdate: function that updates the state value firstnumber according to the Number 1 user input,
secondNumUpdate: function that updates the state value secondnumber according to the Number 2 user input,
operatorUpdate: function that updates the state value operator according to the operator user selection.
executeComputation: function that computes the result depending on the Number 1, Number 2 and the chosen operator.

firstNumUpdate(evt) {
    this.setState({ firstnumber: Number(evt.target.value) });
  }
  secondNumUpdate(evt) {
    this.setState({ secondnumber: Number(evt.target.value) });
  }
  operatorUpdate(evt) {
    this.setState({ operator: evt.target.value });
  }

  executeComputation = () => {
    let z = null;
    let operator = this.state.operator;
    let firstnumber = this.state.firstnumber;
    let secondnumber = this.state.secondnumber;

    switch (operator) {
      case "+":
        z = firstnumber + secondnumber;
        break;
      case "-":
        z = firstnumber - secondnumber;
        break;
      case "/":
        z = firstnumber / secondnumber;
        break;
      case "*":
        z = firstnumber * secondnumber;
        break;
      default:
        throw new Error();
    }

    this.setState({ ...this.state, result: z });
  };

All in all, our class component's return method looks like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstnumber: 0,
      secondnumber: 0,
      operator: "+",
      result: 0
    };
    this.firstNumUpdate = this.firstNumUpdate.bind(this);
    this.secondNumUpdate = this.secondNumUpdate.bind(this);
    this.operatorUpdate = this.operatorUpdate.bind(this);
  }

  firstNumUpdate(evt) {
    this.setState({ firstnumber: Number(evt.target.value) });
  }
  secondNumUpdate(evt) {
    this.setState({ secondnumber: Number(evt.target.value) });
  }
  operatorUpdate(evt) {
    this.setState({ operator: evt.target.value });
  }

  executeComputation = () => {
    let z = null;
    let operator = this.state.operator;
    let firstnumber = this.state.firstnumber;
    let secondnumber = this.state.secondnumber;

    switch (operator) {
      case "+":
        z = firstnumber + secondnumber;
        break;
      case "-":
        z = firstnumber - secondnumber;
        break;
      case "/":
        z = firstnumber / secondnumber;
        break;
      case "*":
        z = firstnumber * secondnumber;
        break;
      default:
        throw new Error();
    }

    this.setState({ ...this.state, result: z });
  };

  render() {
    return (
      <form>
        <label>
          <div>
            Number 1 : <input type="text" onChange={this.firstNumUpdate} />
          </div>
          <br />
          <div>
            Number 2 : <input type="text" onChange={this.secondNumUpdate} />
          </div>
          <br />
          <div>
            <select onChange={this.operatorUpdate}>
              <option value="+">+</option>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
            <br />
            <br />
          </div>
          <input
            type="button"
            onClick={this.executeComputation}
            value="Execute"
          />
          <div />
          <br />
          <input type="text" value={this.state.result} />
        </label>
      </form>
    );
  }
}

That’s it for our class component! You can check out the code here.

Now that we’ve seen how our calculator looks like as a class component, let’s implement it using hooks.

II- Using a functional component

a) Using the useState hook

Let’s now implement the same application using a functional component and the useState hook. We can’t use the this.state or this.setState properties anymore because we wont use a class-based component. However, our functional component with the help of hooks will store and update the state. As mentioned before, hooks are React helper functions to create & manipulate the state of your component.

First let’s import useState from React.

import React, { useState } from "react";

We then write our App class-based component as a functional component using the following syntax:

function App() {

We then call the useState hook function that takes an initial state for the user input and returns an array of two elements:

const initialState = {
  firstnumber: 0,
  secondnumber: 0,
  operator: "+",
  result: 0
};

function App() {
  const [state, setState] = useState(initialState);
  ...
}

The first element of the array is the state of the object,
The second element is a function that is used to update that state. For the initial state we can pass anything, an empty string, 0, null, an empty array, an empty object, whatever kind of state you want to manage initially.

const [state, setState] = useState(initialState);

In our case we decide to put the initial value as “0” for the first number, second number and result input elements, while the operator select input element takes an initial value of “+”.

We can of course use a single useState call and have all our state (including the numbers, the result, and the operator) in a single object. However, the advisable way is to use multiple calls so you can separate your states, change them independently and focus on one state at a time.

When an event is triggered (e.g. the onChange event of the first number input), we use its corresponding state updater function to perform a state update.

const operatorUpdate = evt => {
  setState({ ...state, operator: evt.target.value });
};

const firstNumUpdate = evt => {
  setState({ ...state, firstnumber: Number(evt.target.value) });
};

const secondNumUpdate = evt => {
  setState({ ...state, secondnumber: Number(evt.target.value) });
};

const executeComputation = () => {
  let z = null;
  let operator = state.operator;
  let firstnumber = state.firstnumber;
  let secondnumber = state.secondnumber;

  switch (operator) {
    default:
      z = firstnumber + secondnumber;
      break;
    case "-":
      z = firstnumber - secondnumber;
      break;
    case "/":
      z = firstnumber / secondnumber;
      break;
    case "*":
      z = firstnumber * secondnumber;
      break;
  }

  setState({ ...state, result: z });
};

Voilà 🎉! Checkout how our calculator App looks like here

b) Using the useReducer hook

useState is not the only hook we can use to manipulate our component state. We will see now another hook, useReducer, which helps achieve the same result with a different syntax. This hook uses a reducer with two arguments: a state and an action and returns a new state of the app. If you’ve ever used Redux state management library, you will find the useReducer hook very familiar to Redux’s reducer.

useReducer takes a function (called a reducer) which has 2 arguments: the state and an action. Depending on the action passed to the reducer, a new state of the app is returned. We’ll come back to the reducer in a bit.

Step1: Configuring the useReducer

We first import the useReducer:

import React, { useReducer } from "react";

We then define the hook like so:

const [state, dispatch] = useReducer(reducer, initialState);

Step2: Defining the logic for the user input

Let’s look at our problem again: we wish to add, subtract, multiply or divide 2 numbers. To do that, the user first inputs the 2 numbers. So let’s take a look at our Number 1 and Number 2 input fields.

Since the complexity of the tree is not that high and the data of the user input doesn’t need to be passed from a component to another embedded one, we could add a useState hook, as we did above, just to manipulate the user input. However, for the sake of the example, let’s use useReducer for everything , that is, for handling the user input and the logic of the calculator.

We define two actions: FIRST_NUM_UPDATE and SECOND_NUM_UPDATE in our reducer, representing the actions to be dispatched or “triggered” when the user inputs Number 1 or Number 2 respectively:

function reducer(state, action) {
  const firstnumber = Number(action.firstnumber);
  const secondnumber = Number(action.secondnumber);

  switch (action.type) {
    // User Input actions
    case "FIRST_NUM_UPDATE":
      return {
        ...state,
        firstnumber: firstnumber
      };
    case "SECOND_NUM_UPDATE":
      return {
        ...state,
        secondnumber: secondnumber
      };
    case "OPERATOR_UPDATE":
      return {
        ...state,
        operator: action.operator
      };
    // Computing actions
    case "ADD":
      return {
        ...state,
        result: firstnumber + secondnumber
      };
    case "SUBTRACT":
      return { ...state, result: firstnumber - secondnumber };
    case "MULTIPLY":
      return { ...state, result: firstnumber * secondnumber };
    case "DIVIDE":
      return { ...state, result: firstnumber / secondnumber };
    default:
      throw new Error();
  }
}

The inputted values for firstnumber or secondnumber are passed through the action parameter. Depending on which number was inputted, FIRST_NUM_UPDATE or SECOND_NUM_UPDATE are then dispatched to return a new state containing the newly inputed values of firstnumber and secondnumber.

Now that our reducer handles these actions, let’s actually trigger them whenever the user changes the inputs for the first and second numbers.

const firstNumUpdate = evt => {
    dispatch({
      type: "FIRST_NUM_UPDATE",
      firstnumber: evt.target.value
    });
  };

const secondNumUpdate = evt => {
    dispatch({
      type: "SECOND_NUM_UPDATE",
      secondnumber: evt.target.value
    });
  };

We know that we want to dispatch them during the onChange of Number 1 and Number 2 input fields. So let’s call firstNumUpdate and secondNumUpdate in the onChange handler for each number input field as such:

<div> Number 1 :
  <input type="text" onChange={evt => firstNumUpdate(evt)} value={state.firstnumber} />
</div>
<br /> 
<div> Number 2 :
  <input type="text" onChange={evt => secondNumUpdate(evt)} value={state.secondnumber} />
</div>

Now we have successfully used our reducer to update the state to whatever the user inputs in the number input fields! Let’s do the same to our operator select element:

We define the OPERATOR_UPDATE action to return the selected operator in our reducer function

case "OPERATOR_UPDATE":
      return {
        ...state,
        operator: action.operator
      };

We define a helper method operatorUpdate to dispatch the OPERATOR_UPDATE action:

const operatorUpdate = evt => {
    const operator = evt.target.value;
    dispatch({
      type: "OPERATOR_UPDATE",
      operator: operator
    });
  };

We call operatorUpdate from our onChange handle in our operator select element:

<select onChange={evt => operatorUpdate(evt)}>
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
</select>

Cool, now let’s get our hands dirty with the calculator’s logic!

Step3: Defining the logic for the calculator

Our calculator gives the user the ability to add, subtract, multiply or divide two numbers. Just from stating the problem we already have 4 reducer actions!

ADD action representing the sum of our numbers

case "ADD":
      return {
        ...state,
        result: Number(action.firstnumber) + Number(action.secondnumber)
      };

SUBTRACT action representing the subtraction of our numbers:

case "MULTIPLY":
      return { ...state, result: firstnumber * secondnumber };

DIVIDE action representing the division of our numbers:

case "DIVIDE":
      return { ...state, result: firstnumber / secondnumber };

Ultimately, our reducer function looks like this:

function reducer(state, action) {
  const firstnumber = Number(action.firstnumber);
  const secondnumber = Number(action.secondnumber);

  switch (action.type) {
    // User Input actions
    case "FIRST_NUM_UPDATE":
      return {
        ...state,
        firstnumber: firstnumber
      };
    case "SECOND_NUM_UPDATE":
      return {
        ...state,
        secondnumber: secondnumber
      };
    case "OPERATOR_UPDATE":
      return {
        ...state,
        operator: action.operator
      };
    // Computing actions
    case "ADD":
      return {
        ...state,
        result: firstnumber + secondnumber
      };
    case "SUBTRACT":
      return { ...state, result: firstnumber - secondnumber };
    case "MULTIPLY":
      return { ...state, result: firstnumber * secondnumber };
    case "DIVIDE":
      return { ...state, result: firstnumber / secondnumber };
    default:
      throw new Error();
  }
}

We then define our helper method executeComputation to dispatch those actions depending on which operator is used:

const executeComputation = () => {
    const operator = state.operator;

    switch (operator) {
      case "+":
        dispatch({
          type: "ADD",
          firstnumber: state.firstnumber,
          secondnumber: state.secondnumber
        });
        break;

      case "-":
        dispatch({
          type: "SUBTRACT",
          firstnumber: state.firstnumber,
          secondnumber: state.secondnumber
        });
        break;

      case "*":
        dispatch({
          type: "MULTIPLY",
          firstnumber: state.firstnumber,
          secondnumber: state.secondnumber
        });
        break;

      case "/":
        dispatch({
          type: "DIVIDE",
          firstnumber: state.firstnumber,
          secondnumber: state.secondnumber
        });
        break;

      default:
        throw new Error();
    }
  };

Now we just need to display the result simply using state.result:

<input type="text" value={state.result} />

And we’re done 🎉! You can check out what we just did here

Conclusion

According to the React documentation, if you are already using class components, you don’t have to switch to hooks. However, you no longer have to use classes just to have state in your component. The useState and useReducer React hooks provide a nice syntax to achieve the create & manipulate state in a function component.

An important notice concerning the rules of using React hooks.

Hooks are used at the top level of your component, for example; you can’t call the hook function nested in another function , or in an if statement or in a loop. Moreover, they have to be component functions that take props and returns JSX.

Some other cool ones to look at would be:

useContext: Accepts a React.createContext context object and returns the current context value for that context.
useEffect: Similar to componentDidMount and componentDidUpdate.
useCallback: Returns a memoized callback.

To read more about Hooks, checkout the Hooks API.

Did you like this article? Was it helpful? Do you have any suggestions to improve it? If you have any thoughts or comments, we would love to hear them!

Notice: My sister @anssamghezala and I are both learning React and publish articles every month. Follow us on twitter @amir_ghezala and @anssam_ghezala to get in touch! :)

Understanding the React build workflow and the folder structure

Amir Ghezala — Sat, 01 Jun 2019 22:15:32 +0000

React is an open-source JavaScript library that is used to form user interfaces. In this article we tend to discuss what it takes to build a React application on our local machine and understand all the folders and files that comes with the create react app tool.
Building a React project on our machine requires an elaborate workflow whether it is a single page or a multipage application. So an important question that should be asked is:

Why it is necessary to have this workflow and how to compose it?

Lets tackle the why part of the question first:

We have to optimize our code. For React application we have to be able to generate an optimized small code in order to increase the performance of the application.
Another important reason is to be able to benefit from using next-generation JavaScript features. JavaScript is evolving and the language has from time to time new features that are not immediately supported in all browsers. Having a tool like babel allows us to use those features immediately, since its responsible to translate our code to a code that is supported by the browsers we target.
A third reason concerns productivity. The CSS auto-prefixing in the next-generation JavaScript features allow us to reach a maximum browser support for CSS features. If we try to add them manually it would be a real hassle.
Another aspect of productivity is the provided tool linter. Acquiring a linter in our code IDE will save us time to find an error before the execution of the code. The below code illustrates how a linter works.

The above are the main reasons we need a workflow.
Now let's see how to achieve it:

The first thing is to have a dependency management tool. Dependencies are third party libraries. React, React DOM and every built tool that we will eventually use are dependencies. NPM (node's package manager) is a recommended built tool to use as it manages packages and dependencies.
Next to a dependency management tool a bundler is used to produce modular code. By modular, we mean the code will be divided over multiple files and each file has its own function and specialty.

Webpack is an example of a bundler that has a great advantage when it comes to eventually sending the divided files to browsers because some of these web browsers might not support the divided files and if they do, we cant just send all requests to these specialized files.

Lastly, we need a server to test our project on our local machine. This really looks complex. Fortunately, React team came up with a tool that can create an app supporting all what we mentioned above without configuration from us. It is maintained by Facebook and its community. The tools is Create React app. You can find the installation instructions here. > Just an important notice, after installation leave the NPM start process running. So whenever we change something in our code it will automatically reflects the changes. After setting up the project we will all have the same amount of created folders and files. # Now let us discuss the most important folders and files. Starting with the package.json file that has the general dependencies of our project.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

As you notice we have three dependencies in this project created by create React app.
You can also see that we obviously import React. Here we are using:
Latest version of React at the time I am writing the article.
ReactDOM: provides DOM-specific methods. We will only use the "render" method of the module in index.js to render our application in the DOM.

Latest version of React at the time I am writing the article.
ReactDOM: provides DOM-specific methods. We will only use the "render" method of the module in index.js to render our application in the DOM. React Scripts: a package that has scripts and configurations used to provide all what we mentioned about the build workflow including development server and the next generation javaScript feature support which we use in the project.

The node_modules folder :

It has all the dependencies and sub-dependencies of our project.
In the package.json file we discussed only three dependencies including React, React DOM and React Scripts. More specifically, React Scripts have a lot of other dependencies made up of all the build tools that compiled the code and so on. You shouldn't modify anything in the node_modules folder.
The public folder:

An interesting one, it's the root folder that gets dealt by the web server in the end. In this folder we have one significant file which is the index.html file. This file has a normal html page and it is the single html page in our project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

So this is the single page, where in the end our script files will get instilled by that build workflow. We can modify this file but we won't add any HTML code here.
I want to highlight this div here with the ID root:
<div id="root"></div>
It important because here where we will place our React application later.
In the HTML file you can import libraries such as CSS libraries and add meta tags.
Getting to manifest.json file:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

This info gives information to the browser about your application. For example, this is required for mobile browsers so that you can add a shortcut to your web application.
Another interesting folder is the src folder:

It possesses the files that we are going to work in which is the actual react application.
It has the index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

This file access the root element in our DOM , the element with id root in our HTML file.

ReactDOM.render(<App />, document.getElementById('root'));
As you notice it renders our React application with the render method. Also there is a reference of App object that we imported from the App file.
import App from './App';
The extension .js (App.js) is omitted because it is automatically addressed by our build workflow.
Lets take a look at our App.js file:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Here we can see our first and only React component we have in the starting project.
Another file to mention is the App.css:

.App {
  text-align: center;
}
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
.App-link {
  color: #61dafb;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

This file determines some styling we use in the App.js. However, the CSS styling does not only relates to the App.js file, it is global styling.
We also have an index.css file:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

This file implements global styling and everything that should be used for some general set up as we can see here for the body of our application.
The registerServiceWorker.js file is essential to register a service worker. It pre-cash our script files and there is no obligation to configure anything there. You can also safely delete this file if you don't know or don't care about service workers.
Lastly the App.test.js file:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Essentially, it allows us to create unit tests for different components in our application.

To conclude, any programmer wants to code in an efficient way where he can avoid manual interference to create a convenient environment for coding. Having a build workflow is really important when it comes to building big React projects. Can you imagine having to learn every single one of these tools before being able to do anything in React?
Fortunately, the create react app tool made it more easier.

Did this article help you demystify the files and folders that come with create-react-app? Let me know in the comments section.

Happy React coding!