2
Building apps with Bootstrap helps you iterate quickly when building components and the user interface design of your app. This prevents you from reinventing the wheel every time you start a new project. All you need to do is customize the base components available to make them suit the needs of the app. This guide will demonstrate how to customize react-bootstrap components to suit your need.
To get started, run the following command in your terminal to set up your React project.
1 2 3 4 5
1. npx create-react-app <YOUR_APP_NAME> 2. cd <YOUR_APP_NAME> 3. yarn start or npm start
<YOUR_APP_NAME>
refers the name you'd like to give to your React project.
If you really want to get started quickly without the pain of setting up a create-react-app project then open up your browser and visit https://react.new to get a fully configured React development environment via https://codesandbox.io.
Bootstrap can be used in a few different ways:
In this guide you'll install Bootstrap with a package manager and install the React Bootstrap library, which comes with React components that you can use easily.
Run the following command to install react-bootstrap.
1 2 3 4 5
npm install react-bootstrap bootstrap OR yarn add react-bootstrap bootstrap
React Bootstrap doesn't use a precise version of Bootstrap, but you'll need to add some default styling to use the components. Add the following line of code to your src/index.js
or src/App.js
file.
1
import 'bootstrap/dist/css/bootstrap.min.css'
Assuming you're building an e-commerce app, displaying a list of products would require a card component that contains details of the product. Luckily there's a card component that can be built upon to provide this functionality quickly.
First create the product card component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
import React from 'react'; import Card from 'react-bootstrap/Card'; import Button from 'react-bootstrap/Button'; function ProductCard({name, imgSrc, price,currency, ...props}){ return( <Card style={{ width: '18rem' }}> <Card.Img variant="top" src={imgSrc} /> <Card.Body> <Card.Title>{name}</Card.Title> <Card.Text> {currency} {price} </Card.Text> <Button variant="success">Add to Cart</Button> </Card.Body> </Card> ) } export default ProductCard;
In the <ProductCard/>
component above, you built upon the default card component in react-bootstrap and created a custom component.
Assuming you created the component in the components/ProductCard.js
directory, you can use your custom component as shown below.
1 2 3 4 5 6 7 8 9
import React from 'react'; import ProductCard from './components/ProductCard'; function App(){ return( <ProductCard name="Red Hoodie" price="90.00" currency="$" imgSrc="https://img.foo.com/logo.png"/> ) } export default App;
And voila! In this guide, you created a custom button and card component to help you build out your app faster. If you want to read more on react-bootstrap, visit the official documentation to learn more. Try as much as possible to try your hands on more examples to get a solid understanding. If you have any questions, feel free to ping me on Twitter @DesmondNyamador
2