React tutorial

Branch

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Build and start app

Install the app's dependencies (in case you're starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

First row

In our first row we'll need a Breadcrumb component. First, let's import the components we need. Because we'll be importing several components for this page, we'll import them directly from the @carbon/react package instead of the direct path for each one.

We can now add our component to the first row, along with a header, like so:

You may notice that the styles look off. Don't worry, we'll fix these later.

Second row

In our second row we’ll need Tabs and Button components. We’ll update the @carbon/react import to:

Modify the second row to use the Tabs components.

The <TabList> is the tab navigation, and the <TabPanels> contains each tab content. You'll notice that within each <TabPanel>, we nested another <Grid> and . This is because the parent column is acting as a faux row, and each tab within that row contains the actual column content. When nesting columns, you must always wrap the nested group within another <Grid>.

Hold up! If you were to run the Equal Access Toolkit to check for accessibility violations, you'd see Multiple navigation landmarks must have unique labels specified with aria-label or aria-labelledby because both the Breadcrumb and Tabs components use <nav> elements. To fix, add aria-label to the Breadcrumb opening tag:

Same goes for the TabList opening tag:

Next, we'll need to add some styling overrides to move the tabs to the right on large viewports. Create a file _overrides.scss in src/app/home with this declaration block.

Then in _landing-page.scss add this import at the top of the file.

We can now add our images and text for each column in the first Tab in LandingPage.

Let’s import Image from Next.js by adding the following import under our Carbon React component imports.

Now let's set the image size in _landing-page.scss and also set the background color of our page:

Assuming that the second and third tab would have a similar design, we would set them up in the same way. However, since our design specs don’t show those tabs, we’ll leave the code as is.

Third row

The third row will be created in a later tutorial, so we'll just add the headers for now.

Banner

Back to _landing-page.scss, we need to add space above the breadcrumb and below the heading. For that, add:

Referencing the spacing token table, 16px can be set with the $spacing-05 token. The design calls for 128px of space below the heading and that's not in the spacing scale. We can achieve this in Sass by multiplying 32px ($spacing-07) by 4. We could use 128px or 8rem directly in our styling, but using our tokens preserves consistency should the token values get updated in the future.

Looking at the design, we need a wall-to-wall light gray background behind the banner and also behind the third row. This is a great opportunity to use a Sass mixin. We could put this at the top of _landing-page.scss, but it's best practice to place mixins in a dedicated file, so create a _mixins.scss file in src/app/home.

Add the following in _mixins.scss. Per the design we need to use Gray 10 for our banner background color, which can be set with the $layer-01 color token. Also, we want the background to extend into the grid's outermost gutters to go the full width of the viewport, so given the DOM structure, we can achieve that by setting the background in an absolutely positioned pseudo element.

After you have created _mixins.scss, import it at the top of _landing-page.scss. By now you should have six imports:

Now to use the new mixin, update the .landing-page__banner declaration block to:

Next, we can see that the h1 is using the heading-05 type token.

The Sketch symbol naming is consistent with the development Sass tokens to help translate design to development. So, looking up the type token, we know to use productive-heading-05:

Row two

For our second row, we need to fix the tabs vertical positioning to match the design. By inspecting the tabs component, you can see that the tab height computes to 40px. We can use that to create our negative top margin in rem units.

We also need to adjust our vertical spacing and type treatment. Like before, it's a matter of using spacing and type tokens like so:

Row three

Let's also add some styles for the last row, even though that will get used later in the tutorial. You'll notice that we get to re-use the landing-page-background mixin that we just created.

Lastly, we'll fix some grid alignment issues along with the image size for smaller screens and the HeaderGlobalAction component. We'll use one of our breakpoint mixins for the media queries, like so:

We are almost done with the landing page. You may notice a few styles are off. To fix this, we'll update some of the overriding styles in globals.scss. We already have some overriding styles for .cds--content. We need to add padding: 0; to this selector and add one more selector for the grid below that:

Since we are using our breakpoint mixin, we need to import the styles for that below our Carbon styles import:

Ta-da! You should see a finished landing page! Now we can move on to the repo page.

Build data table

First, we’ll add our data table by importing a few components in RepoTable.js:

Then, let's create the RepoTable component and export it at the very bottom of RepoTable.js.

This component uses two props, rows and headers, and returns a Carbon DataTable. As for where the various Table* components came from? The DataTable story in Storybook was used to put together the data table structure.

At this point, return to RepoPage because now we need to render a static RepoTable.

Render data table

Import RepoTable into RepoPage.

Then below the imports, include the following arrays to pass into the RepoTable component. We’ll be setting the rows array from an API in the next tutorial step, but for now, static example rows will suffice.

Lastly in RepoPage, we need to simply replace Data table will go here with:

Continuous integration (CI) check

Run the CI check to make sure we’re all set to submit a pull request.

Git commit and push

Before we can create a pull request, format your code, then stage and commit all of your changes:

Then, push to your repository:

Pull request (PR)

Finally, visit carbon-react-tutorial to “Compare & pull request”. In doing so, make sure that you are comparing to v11-next-step-2 into base: v11-next-step-2.