The Boostrap Reaction

In this article, I want to explain step-by-step how to incorporate Bootstrap into your React projects.

First, we create a new React project by running the command:

npx create-react-app the_boostrap_reaction

In whichever directory you want the project folder to be in.

For you, this could be something like ‘cd ~/Documents/projects/’, run that line, ‘cd bootstrap_reaction’.

Once you’ve created your React project the simplest way to open it in your code editor is to find it in your finder or explorer then drag the project folder into your code editor. I will be using VS Code for this article.

Drag and drop the file into your code editor.

To check to see that React installed properly, at the project’s root directory, we can start the React app by using the command:

npm start

After you have a project folder everything else can be done within VSCode.

I find the easiest way to get there in VS Code is to do the following:

1. Right-click on the VS Code explorer where your project appeared after you drag-and-dropped it.
2. Click ‘Open in Integrated Terminal’.
3. Then you should see that you are in the top-most directory of our project. That is, you aren’t inside of any of the directories in our project yet.

The bloat is real.

Now that we see our React app is working and we are in the project’s root directory we can now add React-Boostrap to our project. Note: starting the server for our app may currently occupy the terminal you opened. You can repeat the steps above to open an additional terminal.

To install React-Bootstrap we will end the command:

npm install react-bootstrap bootstrap

After installing React-Bootstrap we will then need to add it to our project. We want to be able to access the Bootstrap components anywhere in our React app. The easiest way to enable this is to just import it into our project’s default index.js file above any other CSS files already being imported. The simplest way to navigate to the React app index.js file is to open the explorer in VS Code, click on the ‘src’ folder, then click on ‘index.js’.

index.js is the root component.

1. Click to open explorer.
2. Click to open index.js.
3. Where we are going to add Bootstrap momentarily.

Now let’s import Boostrap into our project. To do that we will add the following line above all other CSS files in our index.js file:

import 'bootstrap/dist/css/bootstrap.css';

Import Boostrap first because they said so. But seriously, we’ll want React and Boostrap to play nice.

After we do this, if you still have the app running in the browser from when we checked to see if our React App installed properly, you’ll notice that it now shows an error. Something like “Failed to compile”.

Hot reloading works from App.js down. index.js is above App.js so no hot reloading there. Server needs restart.

Don’t panic. Whenever we make a change to our apps index.js file, we need to restart the server which reloads the app from its root component (index.js). To do this we’ll switch over to the terminal running our server. That’s where we entered the npm start command. Here we will hit the keyboard shortcut ‘Ctrl + c’. Then we retype ‘npm start’ and that will effectively restart our app. If you didn’t leave it open from before then your already halfway there, you just need to start the server up to see our React app working.

^ = ctrl

If everything is working properly and Boostrap was properly added to our React app then you’ll notice the same spinning atom pic we had before when we initially tested our React app but with one slight difference. Notice “src/App.js” is now in red. This means Bootstrap was added properly to our React project and will now be available to our React app components.

I call that red.

Now let’s add a React-Bootstrap component to our React app. The simplest way to do this would be to add the component to a file called ‘App.js’. So we’ll switch over to that file and then pick out something we want to add to our app from the React-Bootstrap site.

Calling my shots with 3 & 4

1. Click here to open the VS Code explorer
2. Click here to open App.js
3. This will be where we import the pieces of Bootstrap we need for the component we choose.
4. This will be where we add our first React-Boostrap component.

Now let’s go to the React-Boostrap site and find a component to add to our app. When I get to the site I’m going to click on “Components”.

Click Components then you’ll be brought to a page with all the component categories linked on the left.

On the left of the component’s page will be listed all the categories of components contained in React-Boostrap. From here let’s start by adding a Navbar and we can navigate to the Navbar section of the React-Boostrap site by simply clicking ‘Navbar’ from that list on the left.

A page demonstrating the features of React Bootstrap Navbars

I’m going to scroll down until I see a navbar I like. You can pick any you like but I think the blue one would be cool.

I drew that with my mouse and I almost made it around without touching any of the text!

1. That’s the navbar I want.
2. The picture is actually be rendered by the code below so you can change it there, see the changes in realtime on their site, and copy it once it’s to your liking. Personally, I just copy it all and make the changes in my editor. This arrow is pointing to the space between the navbars displayed meaning the code for the navbars is separated by a line break (<br>). So I just need to look for that element to see where the code for my desired navbar begins and ends.
3. There’s the <br> I was looking for.
4. This is the code I need to copy and paste into my App.js. Note: step 4 above indicates where I will copy this code to.

It lists all the pieces of react-bootstrap you need to import into your component.

You’ll notice that after we copy the code into our App.js our app is now giving us the ‘Failed to compile’ error message again. This is because we haven’t imported the pieces of Boostrap we need into our App.js yet. Remember, we installed Boostrap, we imported it into our index.js to make it available to our entire app, now we need to tell it which pieces we need.

Well, which pieces do we need? Here’s a hint, they are all listed for us in our error message. ‘Navbar’, ‘Nav’, ‘Form’, ‘FormControl’, ‘Button’. Let’s import them now up top.

Line 2. Don’t forget to refresh your browser. Sometimes with a lot of changes, the hot reloading misses one.

Looks like it’s working (I had to refresh my browser for the changes to fully take effect). I don’t really need everything they have on this navbar for this app so I’m going to make some changes, be right back.

And you aren’t limited to just removing pieces. You can add other parts of react-bootstrap navbars here also.

1. Here I remove the search input, button, and some of the links in the navbar.
2. I changed this link to say ‘Form’ and linked it to the forms section of the React-Bootstrap site. I think I want to add a form next so I can use this link to get there.
3. I changed this link to say ‘Navbar’ and linked it to the navbar section of the React-Bootstrap site.
4. I removed the imports that our navbar no longer needs.
5. I changed the Brand to say ‘React-Bootstrap’ and linked it to the React-Bootstrap website.

It’s not much but now we can call the navbar our own. Let’s try adding one more thing before I leave you to start fiddling with all this cool stuff. I want to add a form. Going to the React-Boostrap site and navigating to that sidebar as we did before with the navbar we will click on ‘Forms’ to view the variations of forms React-Boostrap has to offer. Here I’m going to scroll down until I find a form I like.

I picked the sample pack.

I like that form so I’m going to remove everything between the
‘<div className=”App”></div>’ except our navbar code then paste the form code I just copied from the React-Bootstrap site between those divs and below our navbar.

It’s really just 3 imports but a lot of the components repeat so it seems like a lot.

Notice that once we paste the code into our App.js we get the same “Failed to compile” error message we got after we pasted in the code for our navbar. This error will be fixed in the same way. I’m going to take note of the missing imports from the error message and add them to our Bootstrap import at the top of our App.js file.

You can make that form look better by wrapping it in a <Container></Container>. Add to bootstrap imports

After we add ‘Form’, ‘Col’, ‘Button’ to our Bootstrap components and refresh our browser we see that our app is now error-free again and our form is now fully functional.
I’m going to leave this tutorial off here but I recommend you try editing the form on your own. Try removing pieces of the form that you don’t want and take pieces from other forms on the React Boostrap site to add to this form. The last thing I would challenge you to do is put both the form and the navbar in their own files and then add the navbar and form to your App.js as components.
Breaking your components out into their own files and importing those files will make all your files more modular and organized.
That does it for me, thanks for sticking around and I hoped this helps.