React Router set-up, and 404 page

When informed to work on a project, the first thing to understand is what the project is about and which software or aid you need. That was the first thing I asked myself when I was about to work on this project. Let's analyze and list the important things to do before getting started.

1. Have a functioning laptop and a good data connection.

2. Knowledge about React

3. Node.js installed

I'll like to emphasize a good data connection because your React app will not install with a poor connection.

Getting started…

Create React App

This might sound complicated but it's just a line of code. I will like to answer a question that got me worried when I started learning React, every project needs a new react app. That means, whenever you want to start a new project, you need to create react app on your PC by typing the command below in your terminal (e.g git bash)

npx create-react-app project-1

Then wait for a few minutes to install and open it in your code editor (e.g vscode)

Note: "project-1" is the name of the folder that will house your project. It can be named as you desire but must include a hyphen "-" if it's more than a word.

React Router Set-up

First, install a react router in the terminal of your project. i.e open the created react app folder in your desired code editor and open the terminal in it. Then run the command below.

npm install react-router-dom@6

Then set the router up

Installation is done and we need to set it up by adding it to the index.js file in the src folder. To do this, follow the steps below.

1. Import BrowserRouter from react-router-dom.

2. Wrap the root component (<App />) with the BrowserRouter.

Now, the router can be used throughout your project.

Creating a 404 page

A 404 page is what you see when you type a URL that does not exist on a website.

First, create a file and give it any name with an extension of ".js" e.g ErrorApp.js

Then type the follow code

You can add more details.

Lastly, is routing the 404 page

Import the file you created into your root file (App.js) by using the command below.

import ErrorApp from "./ErrorApp";

Instead of specifying the path, use an asterisk "*". It means the 404 page will render for all URLs not available on the website.

Note: all files you are creating in React must start with caps lock. I.e the first letter of the name of the file must be a capital letter.

Conclusion

Now you have learned how to set up a react router and create a 404 page. I attached a link below of the project I worked on and implemented the steps above. The project is not fully functional because it involves other aspect I'm yet to write about but you can check it out. The link is attached below.

GitHub link: https://github.com/Bebek-hub/altschool-exam-2

Hosted site link: https://altschool-exam2.netlify.app/

Watch out for more detailed articles on various front-end topics and if there is something you would like me to write about, kindly reach out to me or write in the comment section.