Adding a React Frontend to Complete MERN

A web application is incomplete without a frontend. It is the part that users interact with and it is crucial to any web experience. In this chapter, we will use React to add an interactive user interface to the basic user and auth features that have been implemented for the backend of the MERN skeleton application, which we started building in the previous chapter. This functional frontend will add React components that connect to the backend API and allow users to navigate seamlessly within the application based on authorization. By the end of this chapter, you will have learned how to easily integrate a React client-side with a Node-Express-MongoDB server-side to make a full-stack web application.

In this chapter, we will cover the following topics:

• Frontend features of the skeleton
• Setting up development with React, React Router, and...

Defining the skeleton application frontend

In order to fully implement the skeleton application features we discussed in the Feature breakdown section of Chapter 3, Building a Backend with MongoDB, Express, and Node, we will add the following user interface components to our base application:

• Home page: A view that renders at the root URL to welcome users to the web application.
• Sign-up page: A view with a form for user sign-up, allowing new users to create a user account and redirecting them to a sign-in page when successfully created.
• Sign-in page: A view with a sign-in form that allows existing users to sign in so they have access to protected views and actions.
• User list page: A view that fetches and shows a list of all the users in the database, and also links to individual user profiles.
• Profile page: A component that fetches and displays an individual user's information...

Setting up for React development

Before we can start developing with React in our existing skeleton codebase, we need to add configuration to compile and bundle the frontend code, add the React-related dependencies that are necessary to build the interactive interface, and tie this all together in the MERN development flow.

To achieve this, we will add frontend configuration for Babel, Webpack, and React Hot Loader to compile, bundle, and hot reload the code. Next, we will modify the server code to initiate code bundling for both the frontend and backend in one command to make the development flow simple. Then, we will update the code further so that it serves the bundled code from the server when the application runs in the browser. Finally, we will finish setting up by installing the React dependencies that are necessary to start implementing the frontend.

...

Rendering a home page view

To demonstrate how to implement a functional frontend for this MERN skeleton, we will start by detailing how to render a simple home page at the root route of the application, before covering backend API integration, user auth integration, and implementing the other view components in the rest of this chapter.

The process of implementing and rendering a working Home component at the root route will also expose the basic structure of the frontend code in the skeleton. We will start with the top-level entry component that houses the whole React app and renders the main router component, which links all the React components in the application.

In the following sections, we will begin implementing the React frontend. First, we will add the root React component, which is integrated with React Router and Material-UI and configured for hot reloading. We will...

Integrating backend APIs

Users should be able to use the frontend views to fetch and modify user data in the database based on authentication and authorization. To implement these functionalities, the React components will access the API endpoints that are exposed by the backend using the Fetch API.

The Fetch API is a newer standard that makes network requests similar to XMLHttpRequest (XHR) but using promises instead, enabling a simpler and cleaner API. To learn more about the Fetch API, visit https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

Fetch for user CRUD

In the client/user/api-user.js file, we will add methods for accessing each of the user CRUD API endpoints, which the React components can use to exchange...

Adding auth in the frontend

As we discussed in the previous chapter, implementing authentication with JWT relinquishes responsibility to the client-side to manage and store user auth state. To this end, we need to write code that will allow the client-side to store the JWT that's received from the server on successful sign-in, make it available when accessing protected routes, delete or invalidate the token when the user signs out, and also restrict access to views and components on the frontend based on the user auth state.

Using examples of the auth workflow from the React Router documentation, in the following sections, we will write helper methods to manage the auth state across the components, and also use a custom PrivateRoute component to add protected routes to the frontend of the MERN skeleton application.

...

Completing the User frontend

The React components that will be described in this section complete the interactive features we defined for the skeleton by allowing users to view, create, and modify user data stored in the database with respect to auth restrictions. The components we will implement are as follows:

• Users: To fetch and list all users from the database to the view
• Signup: To display a form that allows new users to sign up
• Signin: To display a form that allows existing users to sign in
• Profile: To display details for a specific user after retrieving from the database
• EditProfile: To display details for a specific user and allow authorized user to update these details

• DeleteUser: To allow an authorized user to delete their account from the application
• Menu: To add a common navigation bar to each view in the application

For each of these components, we will go...

Implementing basic server-side rendering

Currently, when the React Router routes or pathnames are directly entered in the browser address bar or when a view that is not at the root path is refreshed, the URL does not work. This happens because the server does not recognize the React Router routes we defined in the frontend. We have to implement basic server-side rendering on the backend so that the server is able to respond when it receives a request to a frontend route.

To render the relevant React components properly when the server receives requests to the frontend routes, we need to initially generate the React components on the server-side with regard to the React Router and Material-UI components, before the client-side JS is ready to take over the rendering.

The basic idea behind server-side rendering React apps is to use the renderToString method from react-dom to convert...

Summary

In this chapter, we completed the MERN skeleton application by adding a working React frontend, including frontend routing and basic server-side rendering of the React views.

We started off by updating the development flow so that it included client-side code bundling for the React views. We updated the configuration for Webpack and Babel to compile the React code and discussed how to load the configured Webpack middleware from the Express app to initiate server-side and client-side code compilation from one place during development.

With the development flow updated, and before building out the frontend, we added the relevant React dependencies, along with React Router for frontend routing and Material-UI, to use their existing components in the skeleton app's user interface.

Then, we implemented the top-level root React components and integrated React Router, which...