Get started with React, TypeScript, and Carbon 11

A popular frontend library in today’s frontend world, React was initially open-sourced by Facebook in 2013. With libraries such as Redux, React can be extended to include routing and state management patterns. Microsoft developed and maintains the TypeScript programming language, which is a free, open-source language. The language adds optional static typing and class-based, object-oriented programming to JavaScript. Using React, you can build user interfaces for front-end JavaScript applications and adding TypeScript codebase for React projects can help make your project more robust and less prone to errors.
IBM’s Carbon is an open-source design system for digital experiences and products.
Today we’ll learn about getting started with react + typescript with carbon 11.

Create the App with TypeScript

First, lets create react app withcreate-react-app and typescript:

npx create-react-app my-app — template typescript

This will create my-app project with a few files generated by the script to get started:

|- my-app
| |- node_modules 
| |- public 
| | |- favicon.ico               # <- app icon
| | |- index.html                # <- root app page where the compiled JavaScript   and css are injected to run the app 
| | |- manifest.json             # <- used for PWA
| | |- robots.txt                # <- text file created by the designer to prevent the search engines and bots to crawl up their sites
| |- src                         # <- app code root directory 
| | |- App.tsx                   # <- Describes Application JSX. 
| | |- App.css                   # <- App component styles source 
| | |- App.test.tsx              # <- App.tsx unit test file 
| | |- index.tsx                 # <- application root file where the App is registered with the ReactDOM into the root element in the index.html 
| | |- index.css                 # <- root app level styles 
| | |- react-app-env.d.ts        # <- references TypeScript types declarations
| | |- reportWebVitals.ts        # <- useful to measure and analyze the performance of application
| | |- setupTests.ts             # <- setting up test
| |- .gitignore                  # <- setting up git ignore 
| |- package.json                # <- used packages
| |- package-lock.json           # <- packages logs
| |- tsconfig.json               # <- TypeScript configuration file. Specifies the root files and compiler options

For this tutorial we’ll ignore

| | |- react-app-env.d.ts        # <- references TypeScript types declarations
| | |- reportWebVitals.ts        # <- useful to measure and analyze the performance of application

will include

| | |- untyped.d.ts (within src/)
add the following lines in untyped.d.ts file 
declare module '*.scss'
declare module '@carbon/react*'

In Carbon v11, React components for Carbon are now housed in the @carbon/react package. As an alternative, you can use carbon-components, which re-exports components from @carbon/react.

Install @carbon/react

To get started, uninstall the following packages if they exist in your project:

• carbon-components
• carbon-components-react
• carbon-icons
• @carbon/icons-react

npm uninstall carbon-components carbon-components-react carbon-icons @carbon/icons-react

Then, install the @carbon/react package:

npm install @carbon/react

If you don’t have scss dependency already in your project, please install it using:

npm install sass

Set up your project

After node-sass has been installed, we can begin rendering a Carbon component. Renaming index.css to index.scss will ensure our components render correctly.

The styles from carbon-components will need to be imported into index.scss. The import statement should appear at the top of index.scss, as follows:

@use '@carbon/react';
@use '@carbon/styles';                  # <- for styles 
@use '@carbon/layout';                  # <- for layouts
@use '@carbon/themes';                  # <- for themes
:root {
@include styles.theme(styles.$g100);
}

@include styles.theme(styles.$g100); is used for adding carbon dark theme.

Don’t forget to rename import ‘./index.css’; to import ‘./index.scss’; in index.tsx
If you want to know about migrating to Carbon11 from Carbon10. Migration Guide will help to learn more about new release and get started migrating to v11.

Using a Carbon component

Now that we’ve updated index.js ,index.scssanduntyped.d.ts our project should be including the styles from carbon-components.

First clear your App.tsx to remove auto included contents and get started with a new div.

Let’s bring in a Button component and add it to App.js. We’ll start off by importing our Button component by doing:

import { Button } from '@carbon/react';

We can then use our Button component inside of the render method of App by placing the following JSX Element in our markup:

<Button>Hello You!</Button>

We add a new App.module.scss file for adding styles to this App. And import is to App.tsx with import styles from "./App.module.scss";

Taa-daaa!! Now run your app to play with it.

As this tutorial is about getting started with react-typescript application with carbon 11, I am not discussing any basic react-typescript features. Please take a loot at the GitHub code of this app for better understanding.

GitHub link for the getting started project:
https://github.com/Rafflesia130233/Carbon-React-Typescript.git

Useful Links (will help you with more details about today’s discussed topic)

1. https://create-react-app.dev/
2. https://www.npmjs.com/package/@carbon/react
3. https://blog.logrocket.com/using-typescript-with-react-tutorial-examples/
4. https://www.newline.co/books/fullstack-react-with-typescript/your-first-react-and-typescript-application-building-trello-with-drag-and-drop
5. https://medium.com/@dandobusiness/adding-sass-scss-to-your-react-typescript-project-162de415b19a