How to Create Tabs Component in React JS

Introduction

Tabs are a great way to organize content into different sections without overwhelming the user with too much information at once. In React JS, you can easily create a tabs component to allow users to navigate between different pieces of content. In this guide, we'll walk you through the process of creating a basic tabs component in React JS, perfect for beginners who are looking to understand component structure and React hooks.

Step-by-Step Guide to Create Tabs Component in React JS

Step 1: Setting up the React Environment

Before we start creating the tabs component, we need to make sure our development environment is ready. Here’s how you can set it up:

1. Install Node.js and npm:
   Download and install Node.js from https://nodejs.org. This will also install npm (Node Package Manager), which is essential for managing dependencies in React.
2. Create a new React project:
   Open your terminal (Command Prompt or any terminal) and run the following command to create a new React app:

   npx create-react-app tabs-component

3. Navigate to your project folder:
   After creating the app, move into the project directory:

   cd tabs-component

4. Start the development server:
   Launch the app to check if everything is working by running:

   npm start

   This command will open your project in a browser. You are now ready to build your tabs component!

Step 2: Create the Tabs Component Structure

1. Create a new component file:
   Inside the src folder, create a new file called Tabs.js. This file will contain the tabs component structure.
2. Define the basic structure:
   Add the following code to your Tabs.js file to define the tabs structure:

   import React, { useState, useEffect } from 'react';
   import './App.css'; 
   
   function Tabs() {
     const [activeTab, setActiveTab] = useState('tab1');
   
     const openTab = (tabId) => {
       setActiveTab(tabId);
     };
   
     useEffect(() => {
       openTab('tab1'); // Set default tab
     }, []);
   
     return (
       <div className="tabs-container">
         <div className="tabs">
           <div 
             className={`tab-header ${activeTab === 'tab1' ? 'active' : ''}`} 
             onClick={() => openTab('tab1')}
           >
             Tab 1
           </div>
           <div 
             className={`tab-header ${activeTab === 'tab2' ? 'active' : ''}`} 
             onClick={() => openTab('tab2')}
           >
             Tab 2
           </div>
           <div 
             className={`tab-header ${activeTab === 'tab3' ? 'active' : ''}`} 
             onClick={() => openTab('tab3')}
           >
             Tab 3
           </div>
         </div>
         <div className="tab-content">
           <div id="tab1" className={`tab-pane ${activeTab === 'tab1' ? 'active' : ''}`}>
             <h2>Overview</h2>
             <p>Welcome to our product page. Here you can find detailed information about our product, including its features, pricing, and more. Our product is designed to meet your needs with the highest quality and performance.</p>
             <img src="https://via.placeholder.com/800x400" alt="Product Overview" />
             <p>Our product has been developed with the latest technology to ensure reliability and efficiency. Explore the tabs to learn more about what makes our product stand out.</p>
           </div>
           <div id="tab2" className={`tab-pane ${activeTab === 'tab2' ? 'active' : ''}`}>
             <h2>Features</h2>
             <ul>
               <li>Feature 1: High performance and efficiency</li>
               <li>Feature 2: User-friendly interface</li>
               <li>Feature 3: Customizable options</li>
               <li>Feature 4: 24/7 customer support</li>
               <li>Feature 5: Regular updates and improvements</li>
             </ul>
             <img src="https://via.placeholder.com/800x400" alt="Product Features" />
             <p>Discover the wide range of features that our product offers. Each feature is designed to provide you with the best experience and value.</p>
           </div>
           <div id="tab3" className={`tab-pane ${activeTab === 'tab3' ? 'active' : ''}`}>
             <h2>Pricing</h2>
             <table>
               <thead>
                 <tr>
                   <th>Plan</th>
                   <th>Price</th>
                   <th>Features</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td>Basic</td>
                   <td>$19/month</td>
                   <td>Basic features, email support</td>
                 </tr>
                 <tr>
                   <td>Pro</td>
                   <td>$49/month</td>
                   <td>All features, priority support, advanced tools</td>
                 </tr>
                 <tr>
                   <td>Enterprise</td>
                   <td>$99/month</td>
                   <td>All features, dedicated account manager, 24/7 support</td>
                 </tr>
               </tbody>
             </table>
             <p>Choose the plan that best fits your needs. Each plan offers a range of features to suit different requirements and budgets.</p>
           </div>
         </div>
       </div>
     );
   }
   
   export default Tabs;

Step 3: Style the Tabs Component

To improve the appearance of your tabs, let's add some CSS styles. Open the src/App.css file and insert the following styles:

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #825CFF;
}

.tabs-container {
  max-width: 800px;
  margin: 50px auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
}

.tab-header {
  flex: 1;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
  font-weight: bold;
  position: relative;
}

.tab-header.active {
  color: #825CFF;
}

.tab-header::after {
  content: '';
  display: block;
  height: 3px;
  background-color: #825CFF;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}

.tab-header.active::after {
  transform: scaleX(1);
}

.tab-header:hover {
  background-color: #fff;
  color: #825CFF;
  transform: translateY(-2px);
}

.tab-content {
  padding: 20px;
  background-color: #fff;
}

.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tab-pane.active {
  display: block;
  opacity: 1;
}

.tab-content h2 {
  margin-top: 0;
  color: #825CFF;
}

.tab-content img {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0;
}

.tab-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.tab-content th, .tab-content td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.tab-content th {
  background-color: #825CFF;
  color: #fff;
}

Step 4: Use the Tabs Component in App.js

Open the src/App.js file and import your newly created Tabs component and App.css:

import React from 'react';
import Tabs from './Tabs';
import './App.css';

function App() {
  return (
    <div className="App">
      <Tabs />
    </div>
  );
}

export default App;

Conclusion

Creating a tabs component in React JS is a simple yet effective way to organize content. With React's component-based architecture and the use of hooks like useState, you can easily manage the tabs' state and display different content based on user interaction. This guide walked you through setting up the environment, building the tabs component, and styling it. With these steps, you now have a working tabs component that you can customize and use in your own projects.

Tabs Live Demo ⟶

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊