In frontend development, a developer has to build a user interface (UI) with user experience (UX) in mind. With Bootstrap tabs, React developers can do this by splitting content into different panes where each pane is viewable to a user one at a time. This approach can be useful when creating stepper-like components that need a user's approval before navigating to the next tab. It is also a UX technique that presents information in separate panes instead of one large body of text. This makes the website seem more organized.
Consider a scenario in which you, as a React developer, are designing your own portfolio website. You want to display your information in the most organized manner and you choose three tabs. The first displays work history (profile page), the second displays education and academic history (home page) and the third displays your contact information (contact page).
In this guide, you will learn how to customize tabs with React Bootstrap using React.js. The guide assumes that you have basic knowledge of React.js.
Open your terminal and run these commands to create a basic React app.
1npx create-react-app react-bootstrap-tabs
2
3cd react-bootstrap-tabs
4
5npm start
Include React Bootstrap in your basic React app.
1npm install react-bootstrap bootstrap
Delete the code in the newly created App.js
file and paste the sample code below.
1import React, {Component} from 'react';
2
3class App extends Component{
4 constructor(props) {
5 super(props);
6
7 }
8
9 render() {
10 return (
11 <div>
12
13 </div>
14 );
15 }
16
17}
18
19
20export default App;
In your app.js
file, include the stylesheet as well.
1import 'bootstrap/dist/css/bootstrap.min.css';
You can now import Bootstrap components, for example:
1import { Button } from 'react-bootstrap';
In the sample code below, you will create three separate tabs with different content in each pane.
Each pane will be a React component. You will then add the tabs
component
from React Bootstrap. Remember to import the components if you get errors in your code.
1 import React, {Component} from 'react';
2 import 'bootstrap/dist/css/bootstrap.min.css';
3 import {Tabs, Tab, Modal, Row, Button, Col, Form, Card, Container} from "react-bootstrap";
4
5 class App extends Component{
6 constructor(props) {
7 super(props);
8
9 }
10
11 render() {
12 return (
13 <Container>
14 <Row>
15 <Col>
16 <Tabs defaultActiveKey="Home"
17 id="controlled-tab-example">
18 <Tab eventKey="home" title="Home">
19 <Home />
20 </Tab>
21 <Tab eventKey="profile" title="Profile">
22 <Profile />
23 </Tab>
24 <Tab eventKey="contact" title="Contact" disabled>
25 <Contact />
26 </Tab>
27 </Tabs>
28 </Col>
29 </Row>
30 </Container>
31 );
32 }
33 }
34
35 export default App;
In the code above you have a tabs
component, which has a set defaultActiveKey
set to load your Home
component first when the page loads. Inside
the Tabs
component, there are tabs that load different panes. The eventkey
checks which tab to load.
Now create three separate React components that will be added into the main App.js
file.
Create three files in your root folder named Home.js
, Profile.js
, and Contact.js
.
Copy the sample code below.
1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Home extends Component{
7 constructor(props) {
8 super(props);
9
10 }
11
12 render() {
13 return (
14 <div>
15 This is my Home Page
16 </div>
17 );
18 }
19
20}
21export default Home;
Profile Component.
1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Profile extends Component{
7 constructor(props) {
8 super(props);
9
10 }
11
12 render() {
13 return (
14 <div>
15 This is my Profile Page
16 </div>
17 );
18 }
19
20}
21export default Profile;
Contact Component.
1import React, {Component} from "react";
2
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5
6class Contact extends Component{
7 constructor(props) {
8 super(props);
9
10 }
11
12 render() {
13 return (
14 <div>
15 This is my Contact Page
16 </div>
17 );
18 }
19
20}
21export default Contact;
You might experience errors in your App.js
file. Your components are initialized, but your App.js
file has no idea where your components are.
Add these lines to your App.js
to import your components.
1import Home from "./Home";
2import Profile from "./Profile";
3import Contact from "./Contact";
Now you have a fully functional React app with tabs. Each tab, when clicked, will present a different pane with different information.
In this guide, you have developed custom tabs using React.js and React Bootstrap. This knowledge is vital to developers in frontend and React developer positions. Using tabs in websites consolidates information, thus allowing for better UX.
To further build on this guide, learn more about React Bootstrap components from the official site.