Simple Multipage React Material UI Application

This article will describe how to get started creating a front end React Material web application from the start. It can be daunting to start something like this but the intent here is to walk you through how to do it. We will be using the components from Material-UI (https://mui.com/) which is a React implementation of the Material Design guidelines. React is the most popular Javascript framework and Material-UI is the most popular component library for React. These facts make a strong case for using these to build your next web application.

Last updated on March 15, 2022 to handle the changes introduced by Version 6 of React Router.

We will create a simple multi page web application with a basic menu to provide basic navigation. This is a great starting point for any React Material Web Application. The use of Material UI’s AppBar and ToolBar components are demonstrated in this application.

Simple Multipage React Material Application

Prerequisites

Please install NodeJS

Please install Visual Studio Code

Create your React Project

Launch Visual Studio Code

Open up a Terminal/“New Terminal” in Visual Studio Code and do the following:

mkdir c:\projects\
cd c:\projects\
npx create-react-app materialapp

It might take a few minutes to set up the project structure. Once complete you should be able to launch your newly create react project with the following command:

cd c:\projects\materialapp
npm start

Congratulations! You have created your first React Application! You should then see your react app running in your browser at http://localhost:3000/

http://localhost:3000/

In Visual Studio Code, File/Open Folder and select C:\projects\materialapp

The page above is defined in the /src/App.js file as you can see the corresponding html that is rendered on the screen. Changes can be made and you will see them in the browser.

Install the React Router Module

We are going to need the React Router Module to help us route to the different pages in our application. You can stop running the server by pressing CTRL-C and Terminate the batchjob that runs the server. You should be able to no install the React Router Module as follows:

npm install --save react-router-dom

When it has been installed you can confirm by looking in your package.json file and you will see that “react-router-dom” has been added to the dependencies section.

Install Material-UI

We then want to install the Material-UI dependencies to make sure that we have all of the required dependencies for our Material-UI components. Hopefully the commands below will cover all the dependencies required for the code. Otherwise a little internet search might be able to uncover any issues you have.

npm install @mui/material
npm install @emotion/react
npm install @emotion/styled 
npm install @mui/icons-material

Copy in the required source files

We are now going to update all of the required source files. You can find them at https://github.com/collin-smith/materialapp. All of the files are going to be under the /src folder.

/src/App.js (Include the Header and Routes for the application)

/components/Header.js (The code for the header, also enables the user to navigate to the different pages)

/pages/*.js (10 pages that provide somewhere to go based on the menu options selected

Once you have copied the files into your React project your file set up should look as follows:

Visual Studio Code

Start the application

You should be able to restart the application by issuing the following command in the terminal

cd c:\projects\materialapp
npm start

You should now see the following application rendered:

localhost:3000

You can easily see how the navigation works and each option renders a different page. This was the goal of this article and to get someone up and running quickly.

Walk through of what is happening

The /src/App.js file is the base of the React application and defines the allowable routes to each of the 10 possible pages which are located in the pages directory. Also, we can see that the Header component will be rendered by looking at the Header tag in App.js

The /components/Header.js file renders the Header details and the 10 possible links(or Routes) to each of the destination pages under the /pages/ folder. We are also using the AppBar and ToolBar material components which are very important in rendering navigation menus. For more information, please consult https://mui.com/components/app-bar/.