We are going to go through the steps of creating a React.js application using a styling framework such as Bootstrap and incorporating aspects such as routing let's start the adventure together

Step 1: Set Up (Environment)

The first thing is to make sure that you have Node.js and npm installed if not swim over to the node.js

Create a new react application

npx create-react-app my-app
cd my-app

Now you have a shiny new React app!

Step 2:Install Bootstrap and React Router

Get ready as we start to install some serious tools

Install bootstrap

npm install bootstrap

Install React Router

npm install react-router-dom

You have now equipped your application with the required tools for either styling or the use of routes in your application.

Step 3 Set up Bootstrap

It's time to put your styling framework to work. Open ‘src/index.js’ and add this line at the top to import Bootstrap CSS

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

Step 4: Create Basic Components and Routes

Set up React Router

Open ‘src/index.js’ and wrap your <app/> component with ‘BrowserRouter’

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

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

Now let's create some quick components!

Create Home, About, and Contact components in ‘src/components’

‘src/compoments/Home.jsx’

import React from 'react';

const Home = () => (
<div className="container">
<h1>Home</h1>
<p>Welcome to the home page!</p>
</div>
);

export default Home;

‘src/components/About.jsx’

import React from 'react';

const About = () => (
<div className="container">
<h1>About</h1>
<p>This is the about page.</p>
</div>
);

export default About;

‘src/components/contact.jsx’

import React from 'react';

const Contact = () => (
<div className="container">
<h1>Contact</h1>
<p>Get in touch with us!</p>
</div>
);

export default Contact;

Now let's set up those routes

Modify;src/App.js’ to include ‘Routes’ and ‘Switch’ from ‘react-router-dom’

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
return (
<div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);
}

export default App;

Create ‘src/components/Navbar.jsx’

import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';

const NavigationBar = () => (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand as={Link} to="/">MyApp</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/">Home</Nav.Link>
<Nav.Link as={Link} to="/about">About</Nav.Link>
<Nav.Link as={Link} to="/contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);

export default NavigationBar;

Include the Navbar in the ‘app’

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NavigationBar from './components/Navbar';

function App() {
return (
<div>
<NavigationBar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);
}

export default App;

Step 6: Enhance with Additional Features

Add additional Bootstrap features

Example

import React from 'react';
import { Card } from 'react-bootstrap';

const Home = () => (
<div className="container">
<h1>Home</h1>
<Card>
<Card.Body>Welcome to the home page!</Card.Body>
</Card>
</div>
);

export default Home;

Step 7: Deploy your application

Build the application

npm run build

And there you have it your React application was created, developed, and deployed in seven easy steps

How to Create a React Application: A Step-by-Step Guide

Detailed Guide to Creating a React Application

Table of contents