MIND EXPANDERS

Project 1: Setup + Adding Bootstrap to React
MindCraft Frontend Web Dev - Master React JS Lecture 5
Course by: MindCraft

Before creating our project, let’s learn how a basic website works.

Multi-Page Application:

In a multi-page application (MPA), a request is sent by the client to the server. In response, the server renders the HTML, CSS, and JavaScript of that specific page on the client’s device. For each page request, the server sends the corresponding HTML, CSS, and JavaScript.

For example:

Visiting codewithharry.com/contact will serve its HTML, CSS, and JS.
Moving to codewithharry.com/about will again serve its HTML, CSS, and JS.

Figure 1.1: Multi-Page Application Working

Single Page Application:

In a single-page application (SPA), the client sends a request to the server once, and all the HTML, CSS, and JS are rendered with the first request. After that, JavaScript takes control of the entire application, using APIs to populate the same page without reloading.

Figure 1.2: Single Page Application Working

Advantages of Single-Page Applications:

SPAs save bandwidth, especially for applications with high traffic.
They provide an improved user experience and quicker loading times.

Node Modules:

Node modules contain all the packages needed to develop a React application.

Tip: When sharing your application, ensure you don’t share the node_modules folder. This folder can easily be recreated with package.json and package-lock.json by using the npm install command. To avoid accidentally sharing it, put your node_modules folder in .gitignore.

Project 1: Creating a TextUtils App:

Description of our app: It is a text document editor with features such as:

Word counting
Removing extra spaces
Capitalizing text
Converting text to lowercase and uppercase

Adding Bootstrap to Our React App (TextUtils):

Bootstrap is a CSS framework that allows easy addition of UI components to your application. To access Bootstrap, click here.

In the Bootstrap documentation, you will find the starter template which has two main parts for adding Bootstrap to your application.

Bootstrap Bundle with Popper: This contains jQuery, Bootstrap.js, and Popper.js files. Copy the code and paste it inside the <body> tag of index.html of your React application.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Bootstrap CSS: This contains the CSS files to enhance your application. Copy the Bootstrap CSS code and add it inside the <head> tag of index.html (in the public folder) of your application.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Now, we can use Bootstrap components in our application. Open App.js and remove the previous content from return().

function App() {

return (

);

}

Adding a Navbar:

Get the Navbar component from the Bootstrap Component section and paste it inside the return(). Make sure of the following things while doing so:

Close tags that don’t have a closing tag.
Replace the class keyword with className.
Replace href="#" with href="/".
Ensure the code is within one tag or use a JSX fragment.

Example:

function App() {

return (

<>

<a className="navbar-brand" href="/">Navbar</a>

</button>

<a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>

</li>

<a className="nav-link" href="/about">About</a>

</li>

<a className="nav-link" href="/contact">Contact us</a>

</li>

</ul>

</div>

</nav>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</p>

</div>

</>

);

}

Editing Bootstrap Components:

You can override Bootstrap CSS and replace it with your desired styles. You can also delete components that aren’t required.

Point to Remember: When building the app for production, use the npm run build command instead of npm start to host your application.

Summary:

In this tutorial, we set up a new React project, added Bootstrap for styling, and started building our TextUtils app with a Navbar.

In the upcoming tutorials, we will cover more React concepts, complete this project, and create new ones to help you understand React thoroughly.

Check out our GitHub to access the source code at this point in the course by clicking here.

Thank you for being with me throughout the tutorial. In the next tutorial, we will understand Props and PropTypes. Till then, keep learning and keep coding!

Next Lecture