Integrating Carbon Design System with React JS: A Comprehensive Tutorial

Welcome, developers! In this tutorial, we'll explore how to integrate the Carbon Design System with a React JS application, creating visually appealing and consistent user interfaces. Follow the step-by-step guide below to seamlessly incorporate Carbon Design System into your React project.

Step 1: Set Up Your React App

Begin by creating a new React app using Create React App. Open your terminal and run the following command:

npx create-react-app carbon-tutorial-react-js

Navigate into your project directory:

cd carbon-tutorial-react-js

Step 2: Clear the Default React Starter Code

In your src/App.js file, remove the default React starter code. We'll start with a clean slate.

Step 3: Install @carbon/react Library

Install the @carbon/react library, which contains the Carbon Design System components for React:

npm install @carbon/react

Step 4: Import Carbon Component in App.js

Now, let's import a Carbon Design System component into your App.js. For example, replace the content of App.js with the following code snippet:

import React from 'react';
import { Button } from '@carbon/react';
import { Link } from 'react-router-dom'; // If you have React Router

import './custom.scss';

function App() {
  return (
    <div>
      <h2>Hi There, Welcome to the Test Page</h2>
      <Link to="/data-table">
        <Button>View Table Demo</Button>
      </Link>
    </div>
  );
}

Step 5: Addressing Styling Issues

By this point, you may notice that while the button appears, the Carbon styling does not. This is where Carbon Design System differs. We need to take an additional step to import the Carbon styling.

Step 6: Create custom.scss

Create a new file called custom.scss in the src folder.

Step 7: Add Carbon Styling in custom.scss

In custom.scss, include the following line to import Carbon Design System styling:

@use '@carbon/react';

Step 8: Import custom.scss in App.js

Finally, import the custom.scss file in your App.js to apply the Carbon styling to all components:

import './custom.scss';

That's it! Save your files and reload your React app. You'll now experience the elegance of Carbon Design System applied to your components. Feel free to explore more components and styles offered by Carbon to enhance your application's UI.

Happy coding! 🚀

Explore the Carbon Tutorial React Demo repository by jazzgrewal for more information, code snippets, and a live demo. Feel free to clone the repository, play around with the code, and dive deeper into the integration details. If you have any questions or want to contribute, the repository is a valuable resource for expanding your understanding of Carbon Design System with React.