How to get started creating a Frontend React-App

1. Create a folder that you want your project to be in.

2. cd into that folder and create a new React Project and make sure to give the project a name.

In this example i'll use "sampleapp" as the name of the new project.

npx create-react-app@latest sampleapp 

** Once the app is done installing make sure to cd into the folder that was just created.**

Install your support libraries and styles library for some page styling so the app doesn't look plain.

npm i react-router-dom bootstrap 

When installing Bootstrap make sure to also add the css and bundle to the index.html file.

Getting Started with Bootstrap

Test the server to ensure it is working

run npm start then go to localhost:3000

Once you see this, your app has been successfully installed and is ready to be edited.

Now it's time to set up the React Router.
Inside of index.js

add the following:
import {BrowserRouter as Router} from 'react-router-dom

Then you want to wrap the App component inside Router in order for the App and children will be able to use the Router.

Finally you pass the app component inside of Router so that it can have access to all the router props.

like this:

ReactDOM.render(
  <Router>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Router>,
  document.getElementById('root')
);

Now we're ready to start customizing the application!!

in the App.js file delete everything inside the

so that you are left with a blank canvas.

Here we will be adding all of the routes to the different pages of the application.

In the src Folder create a new folder called "components" and a folder called "pages"

In the Components folder you can add small pieces of code that are related to the User Interface. For example I added a navbar.js and a footer.js file to my components folder.

In the Pages folder you can have the different pages that act as routes for the app.

For example the Home Page and About Page.

For this example I will not be styling the navigation or footer. I will simply style the components and pages so that you can get a picture of how to set up the application.

In every page and component you will set up the basic skeleton of the page.

it will look as follows:

import React from "react";

const About = (props) => {
 return(
    <h1> this is the about page </h1>
)
}

export default About 

Once you have created the skeleton for each page, it's time to import the components, and also the components from React Router into the app.js file.

Now it's time to add the Routes and the Route paths.

Inside of the returned JSX of the app.js file add the following and adjust it according to the app you want to make.

In the top url search bar it look like this, when wanting to see the home page:

http://localhost:3000/

This is the Home page that you have created

---

Since I want the Navbar and Footer to show on each page of the app, I will add it to the index.js file.

To add the Navbar and Footer to the index.js file you first import the components

Then you add the the Navbar and Footer to be rendered inside the Router.

You want to make sure you add this in the order you want it to be displayed.

Once you style your pages and components you should have a full functioning app!

Again this is a basic setup on how to get started creating a react app.

Have fun coding and make it a great day! :)