React & Bootstrap Starter Template
My Open Source React & Bootstrap Starter Templates
I love using Bootstrap because it saves time when trying to make a site responsive. After learning to use react, I started working on using bootstrap with react. It was tough at first, and after I got a hang of it, I quickly made a template that I'd reuse every time I want to use react and bootstrap altogether.
Here is brief documentation and description of the template:
Usage:
Start using the template in these few simple steps:
go to the repository
Go to github.com/ChrisAchinga/react-bootstrap-sta.., and click the use template
button on the right side, or use this Link
The repo will be recreated on your account.
Clone the repo on your local environment.
Install the dependencies:
npm install
Start the development server
npm start
Descrtiption: Language & Frameworks
create-react-app
I created the app using create-react-app tool, which generates starter code-files for React without you worrying about the development environment.
To start using it, simply run the command:
npx create-react-app [project-name]
It will take a couple of minutes to get install everything.
The project structure will be as shown below:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
Read more about getting started with create-react-app here
react-bootstrap
React-bootstrap is a front-end framework that rebuilds bootstrap to make it compatible with React.
To start using it in your project, you install it using:
npm install react-bootstrap bootstrap
which installs both react-bootstrap and bootstrap.
You have to import bootstrap CSS as a module in your index.js file:
import 'bootstrap/dist/css/bootstrap.css'
Here is a practical example of using react-bootstrap:
import { Container } from 'react-bootstrap'
const Header = (props) => {
return (
<Container>
<div className='starter-template text-center mt-5'>
<h1>{props.pageTitle} Page</h1>
<p className='lead'>{props.pageDescription}</p>
</div>
</Container>
)
}
export default Header
You first import the bootstrap component, in this case, the Container, then use it as a JSX element to wrap the contents.
Read more on using react-bootstrap here.
react-router-dom
I used react-router-dom to create navigations and pagination of the app.
It makes it easier to create multiple pages within the react app.
To use it, simply install using:
npm i react-router-dom
This is how I used it in App.js file
Imported it:
import { BrowserRouter as Router, Route } from 'react-router-dom'
Using it:
const App = () => {
return (
<Router>
<Menu />
<main>
<Container>
<Route path='/react-bootstrap-starter' component={HomePage} exact />
<Route path='/react-bootstrap-starter/about' component={AboutPage} />
</Container>
</main>
</Router>
)
}
I wrapped everything in the BrowserRouter component and specified what components to display based on the current route.
react-helmet
It enables you to create different meta and title stages on different pages on your react application.
To install, simply run:
npm install --save react-helmet
Here's how I used it:
Home Page:
src/pages/HomePage.js
import { Helmet } from 'react-helmet'
import Header from '../components/Header'
const HomePage = () => {
return (
<div>
<Helmet>
<title>Home Page</title>
<meta name='description' content='Helmet application' />
</Helmet>
<Header pageTitle='Landing' pageDescription='This is the Landing Page' />
</div>
)
}
export default HomePage
About Page:
src/pages/AboutPage.js
import { Helmet } from 'react-helmet'
import Header from '../components/Header'
const AboutPage = () => {
return (
<>
<Helmet>
<title>About Page</title>
<meta name='description' content='Helmet application' />
</Helmet>
<Header pageTitle='About' pageDescription='About Page' />
</>
)
}
export default AboutPage
The End!
The repo is open to suggestions and free to use: GitHub
Written with ❤️ by Chris achinga