Setting Up a React Application

We won’t cover authentication with GraphQL in this section. Instead, we’ll focus on implementing authentication in both the frontend and the backend.

Developing the layout

In this lesson, we’ll briefly go through how to set up a template React project with all the dependencies that we’ll use in this course. We’ll only cover the necessary parts of the frontend that we’ll be working on, but it’s important to get a sense of how the entire project is structured. The complete frontend source code is available in the GitHub repository for this course.

We don’t need to be React experts to go through this section, but knowing the basics of React, such as components and properties, is helpful. Later in the course, we’ll briefly review more advanced React topics, such as React hooks.

The libraries we’ll use

In this course, we’ll build a single-page application (SPA) that will interact with the API we’ve already developed. This means that all UI changes, such as going from one page to the other, will be implemented on the client-side. The server will only respond to queries and perform mutations.

To make the implementation of this application more straightforward, we’ll use a few additional libraries. They don’t have any relationship to GraphQL or Apollo, so picking them is a matter of personal preference.

• Material UI: A rich UI library of React components that supports building an application faster.
• React Router: A client-side router that can render different components depending on the current URL’s path.
• Formik: This is one of the most popular libraries to implement forms in React because it’s easy to integrate with Material UI. We’ll use it to implement a login and a form to create a new product later on.

Init command

The first thing we need to do is to create a React project. Instead of creating it manually, we can use the init react-app command, which will generate a boilerplate project.

npm init react-app client

The client argument is the name of the folder where the command should create a template project.

To make the boilerplate start, we also need to install the web-vitals dependency that the React template uses.

npm install web-vitals

Now, our project contains the client and server folders. In this lesson, we’ll make most of our changes in the client folder.