1. Installing Carbon
Starting with Create React App, let’s install Carbon and begin using Carbon components. By the end you will have a React app that uses the UI Shell to navigate between pages.
- Fork, clone and branch
- Build and start
- Install Carbon
- Install and build Sass
- Add UI Shell
- Create pages
- Add routing
- Submit pull request
A preview of what you will build:
Fork, clone and branch
This tutorial has an accompanying GitHub repository called carbon-tutorial that we’ll use as a starting point for each step.
To begin, fork carbon-tutorial using your GitHub account.
Go to your forked repository, copy the SSH or HTTPS URL and in your terminal run the two commands to get the repository in your local file system and enter that directory.
git clone [your fork SSH/HTTPS]cd carbon-tutorial
Add upstream remote
Add a remote called
upstream so we can eventually submit a pull request once
you have completed this tutorial step. There are two choices: SSH or HTTPS
git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git
Verify that your forked repository remotes are correct:
git remote -v
Your terminal should output something like this:
origin [your forked repo] (fetch)origin [your forked repo] (push)upstream [email protected]:carbon-design-system/carbon-tutorial.git (fetch)upstream [email protected]:carbon-design-system/carbon-tutorial.git (push)
Now that we have our repository set up, let’s check out the branch for this tutorial step’s starting point. Run the two commands:
git fetch upstreamgit checkout -b v11-react-step-1 upstream/v11-react-step-1
Build and start
We have the repository forked to your GitHub account, cloned down to your machine, and the starting branch checked out. Next, install the React app’s dependencies with:
After the dependencies are installed, you can start the app with:
Your default browser should open up with an empty page that says:
Hello Carbon! Well, not quite yet. This is the starting point for the Carbon tutorial.
Even though we installed existing dependencies, we’ve yet to install our v11
@carbon/react, which contains everything you need to build
Stop your development server with
CTRL-C and install Carbon dependencies with:
Install and build Sass
We need to run a Sass build as the Carbon styles are authored in Sass, so run
the following command to install
sass as a dependency.
Then, start the app again. If your app’s currently running, you’ll need to restart it for the new environment variable to be used.
The app looks as it did before. Next, let’s prepare our app for a Sass build.
src directory, rename
index.scss. Then in
index.css import to
Import carbon-component styles
index.scss, import the Carbon styles by adding the following at the top of
Making this change to
index.scss will cause all of the Carbon Sass to
re-compile. Once finished re-compiling the Carbon base styling is applied (IBM
Plex Sans font family, font size, weight, colors, etc.)