Install React-Router-Dom
So we are building a React app with multiple routes and it requires a package react-router-dom. Install it with NPM.
Note:- In the previous step, we have started the app in a terminal tab. So, open another terminal tab/window to run the below command.
npm i react-router-dom
Now we can use our favorite code editor to edit our project. I personally recommend Visual Studio Code.
Add Bootstrap CDN
Or add package
npm i bootstrap
We are using a bootstrap template to set up our view and it requires a Bootstrap CSS file. We can add bootstrap in our react application multiple ways and here I am using the Bootstrap CDN.
So, open index.html file in public directory and add the bootstrap CDN inside <head></head> section.
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”/>
So that the complete index.html file looks like the below.
|
<!DOCTYPE html> |
|
|
<html lang=”en”> |
|
|
<head> |
|
|
<meta charset=”utf-8″ /> |
|
|
<link rel=”icon” href=”%PUBLIC_URL%/favicon.ico” /> |
|
|
<meta name=”viewport” content=”width=device-width, initial-scale=1″ /> |
|
|
<meta name=”theme-color” content=”#000000″ /> |
|
|
<meta |
|
|
name=”description” |
|
|
content=”Web site created using create-react-app” |
|
|
/> |
|
|
<link |
|
|
rel=”stylesheet” |
|
|
href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” |
|
|
/> |
|
|
<title>React App</title> |
|
|
</head> |
|
|
<body> |
|
|
<noscript>You need to enable JavaScript to run this app.</noscript> |
|
|
<div id=”root”></div> |
|
|
</body> |
|
|
</html> |
view rawindex.html hosted with by GitHub