{"componentChunkName":"component---src-pages-tutorial-react-step-2-mdx","path":"/tutorial/react/step-2/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"2. Building pages","description":"Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/tutorial/react/step-2.mdx","titleType":"prepend","MdxNode":{"id":"79a6f2d6-9c7c-57b6-9da9-af8cd7e68ff4","children":[],"parent":"344a38a2-a5fd-5e91-b56a-0193760f6be3","internal":{"content":"---\ntitle: 2. Building pages\ndescription: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.\ntabs:\n  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n### Now that we have a React app using the UI Shell, it's time to build a few static pages. In this step, we'll become comfortable with the Carbon grid and various Carbon components.\n\n<AnchorLinks>\n\n<AnchorLink>Fork, clone and branch</AnchorLink>\n<AnchorLink>Install grid</AnchorLink>\n<AnchorLink>Add landing page grid</AnchorLink>\n<AnchorLink>Build landing page</AnchorLink>\n<AnchorLink>Style landing page</AnchorLink>\n<AnchorLink>Add repo page grid</AnchorLink>\n<AnchorLink>Build repo page</AnchorLink>\n<AnchorLink>Style repo page</AnchorLink>\n<AnchorLink>Submit pull request</AnchorLink>\n\n</AnchorLinks>\n\n## Preview\n\nA [preview](https://react-step-3--carbon-tutorial.netlify.com) of what you'll build:\n\n<Preview\n  height=\"400\"\n  title=\"Carbon Tutorial Step 2\"\n  src=\"https://react-step-3--carbon-tutorial.netlify.com\"\n  frameborder=\"no\"\n  allowtransparency=\"true\"\n  allowfullscreen=\"true\"\n  class=\"bx--iframe bx--iframe--border\"\n/>\n\n## Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/react/step-1#fork-clone--branch).\n\n### Branch\n\nWith your repository all set up, let's check out the branch for this tutorial step's starting point.\n\n```bash\n$ git fetch upstream\n$ git checkout -b react-step-2 upstream/react-step-2\n```\n\n_Note: This builds on top of step 1, but be sure to check out the upstream step 2 branch because it includes the static assets required to get through this step._\n\n### Build and start app\n\nInstall the app's dependencies (in case you're starting fresh in your current directory and not continuing from the previous step):\n\n```bash\n$ yarn\n```\n\nThen, start the app:\n\n```bash\n$ yarn start\n```\n\nYou should see something similar to where the [previous step](/tutorial/react/step-1) left off.\n\n### IE11 polyfills\n\nBefore we get started with this step, we'll be adding some components that require IE11 polyfills. As shown in the [Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/polyfills.js), go ahead and add these imports to the top of the root `index.js`. They aren't all needed, but we'll add them all to play it safe for the duration of the tutorial.\n\n```javascript path=src/index.js\nimport 'core-js/modules/es7.array.includes';\nimport 'core-js/modules/es6.array.fill';\nimport 'core-js/modules/es6.string.includes';\nimport 'core-js/modules/es6.string.trim';\nimport 'core-js/modules/es7.object.values';\n```\n\n_Note: You may be wondering where_ `core-js`_came from because it's not a Carbon package and we haven't explicitly installed it. Run_ `yarn why core-js` _and you'll see there are a number of packages that have brought it in as a dependency._\n\n## Install grid\n\nIn our last step we added our styles, component and icon packages. Now that we're building the pages with grid, we need to install one more Carbon package. Stop your development environment (`CTRL-C`) and:\n\n```bash\n$ yarn add @carbon/grid\n```\n\nIn `index.scss`, we need to configure our grid to use 16 columns instead of the default 12 columns. We do this by adding `grid-columns-16: true` in our `$feature-flags`.\n\n```scss path=src/index.scss\n$feature-flags: (\n  ui-shell: true,\n  grid-columns-16: true,\n);\n```\n\n_Note: Like before, the feature flag still needs to come before the Carbon_ `styles.scss` _import._\n\nRun `yarn start` so we can begin building.\n\n## Add landing page grid\n\nLet's add our grid elements to `LandingPage.js`.\n\nIn order to use the grid, we need to wrap everything in a `<div className=\"bx--grid\">`. We can continue to make rows by adding a `<div className=\"bx--row\">` inside the grid, as well as make columns within those rows by adding `<div className=\"bx--col-[breakpoint]-[size]\">`.\n\nOur column sizes are specified by the number of columns they'll be spanning. If we use `bx--col-lg-4`, it means it'll span 4 of the 16 columns. If we use `bx--col-lg-8` it means it'll span 8 of the 16 columns, and so on.\n\nWe've included the designs for this tutorial app in the `design.sketch` file found as a top-level file in the `carbon-tutorial` repository. But, if you don't have Sketch installed and available to inspect the design, we'll provide screenshots.\n\n![Landing page grid](../shared/step-2/images/landing-layout.png)\n\n<Caption>Landing page grid</Caption>\n\n_Pro tip:_ `CTRL-L` _toggles the layout in Sketch._\n\nWe'll break this down into three rows. The first row with the gray background doesn't appear to need any columns. The second row with the white background looks like it has two columns of different widths. The third row with the gray background looks like it has four columns of equal width.\n\nWe'll make rows like so:\n\n```javascript path=src/content/LandingPage/LandingPage.js\nreturn (\n  <div className=\"bx--grid bx--grid--full-width landing-page\">\n    <div className=\"bx--row landing-page__banner\">\n      <div className=\"bx--col-lg-16\">1</div>\n    </div>\n    <div className=\"bx--row landing-page__r2\">\n      <div className=\"bx--col-md-4 bx--col-lg-7\">7/16</div>\n      <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">8/16</div>\n    </div>\n    <div className=\"bx--row landing-page__r3\">\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n    </div>\n  </div>\n);\n```\n\nWe added a class of `bx--grid--full-width` to the grid container since our rows need to expand the whole page without any margins. We also added some custom classes like `landing-page`, `landing-page__banner`, `landing-page__r2`, etc., which we will use later.\n\nAlso, take notice of the second row. The tab content only covers 7 columns at this large viewport to prevent overly-large line lengths, so we needed to add a 1 column offset `bx--offset-lg-1` to second column to fill the full 16 columns in the grid. Then, both of those columns have `bx--col-md-4` classes so they are of equal width at medium-sized viewports.\n\n## Build landing page\n\nWe'll start adding HTML elements and components by row.\n\n### First row\n\nIn 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-components-react` package instead of the direct path for each one.\n\n```javascript path=src/content/LandingPage/LandingPage.js\nimport { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';\n```\n\nWe can now add our component to the first row, along with a header, like so:\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__banner\">\n  <div className=\"bx--col-lg-16\">\n    <Breadcrumb noTrailingSlash>\n      <BreadcrumbItem>\n        <a href=\"/\">Getting started</a>\n      </BreadcrumbItem>\n    </Breadcrumb>\n    <h1 className=\"landing-page__heading\">\n      Design &amp; build with Carbon\n    </h1>\n  </div>\n</div>\n```\n\nYou may notice that the styles look off. Don't worry, we'll fix these later.\n\n### Second row\n\nIn our second row we'll need `Tabs` and `Button` components. We'll update the `carbon-components-react` import to:\n\n```javascript path=src/content/LandingPage/LandingPage.js\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Tabs,\n  Tab,\n} from 'carbon-components-react';\n```\n\nBefore we can render the tabs, we need to add some props for the component after the import. These example props came from the [React Tabs Story](http://react.carbondesignsystem.com/?selectedKind=Tabs) in Storybook.\n\n```javascript path=src/content/LandingPage/LandingPage.js\nconst props = {\n  tabs: {\n    selected: 0,\n    triggerHref: '#',\n    role: 'navigation',\n  },\n  tab: {\n    href: '#',\n    role: 'presentation',\n    tabIndex: 0,\n  },\n};\n```\n\nModify the second row to use the `Tab` component.\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__r2\">\n  <div className=\"bx--col bx--no-gutter\">\n    <Tabs {...props.tabs}>\n      <Tab {...props.tab} label=\"About\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-md-4 bx--col-lg-7\">7/16</div>\n            <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">\n              8/16\n            </div>\n          </div>\n        </div>\n      </Tab>\n      <Tab {...props.tab} label=\"Design\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-lg-16\">\n              Rapidly build beautiful and accessible experiences. The Carbon kit\n              contains all resources you need to get started.\n            </div>\n          </div>\n        </div>\n      </Tab>\n      <Tab {...props.tab} label=\"Develop\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-lg-16\">\n              Carbon provides styles and components in Vanilla, React, Angular,\n              and Vue for anyone building on the web.\n            </div>\n          </div>\n        </div>\n      </Tab>\n    </Tabs>\n  </div>\n</div>\n```\n\n_Note: We're using the grid for the page layout, but we also need to apply the grid within the tab content. When doing so, make sure the nested grid has the expected_ `grid` _>_ `row` _>_ `col` _DOM structure._\n\nHold up! If you were to run [DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) 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:\n\n<!-- prettier-ignore-start -->\n```html\n<Breadcrumb noTrailingSlash aria-label=\"Page navigation\">\n```\n<!-- prettier-ignore-end -->\n\nSame goes for the `Tabs` opening tag:\n\n<!-- prettier-ignore-start -->\n```html\n<Tabs {...props.tabs} aria-label=\"Tab navigation\">\n```\n<!-- prettier-ignore-end -->\n\nNext, we'll need to add a styling override to move the tabs to the right on large viewports. Create a file `_overrides.scss` in `src/content/LandingPage` with this declaration block.\n\n```scss path=src/content/LandingPage/_overrides.scss\n.landing-page__r2 .bx--tabs__nav {\n  right: 0;\n}\n```\n\nThen in `_landing-page.scss` add this import at the top of the file.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n@import './overrides.scss';\n```\n\n_Note: We don't have to include this in a separate file, but it's nice to keep overrides separate from your application's styling so when migrating to future Carbon versions and if there are breaking changes via different class names, you have a consolidated list of styling declaration blocks to review._\n\nWe can now add our images and text for each column in the first `Tab` in `LandingPage.js`.\n\n<!-- prettier-ignore-start -->\n```html path=src/content/LandingPage/LandingPage.js\n<Tab {...props.tab} label=\"About\">\n  <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n    <div className=\"bx--row landing-page__tab-content\">\n      <div className=\"bx--col-md-4 bx--col-lg-7\">\n        <h2 className=\"landing-page__subheading\">\n          What is Carbon?\n        </h2>\n        <p className=\"landing-page__p\">\n          Carbon is IBM’s open-source design system for digital\n          products and experiences. With the IBM Design Language\n          as its foundation, the system consists of working code,\n          design tools and resources, human interface guidelines,\n          and a vibrant community of contributors.\n        </p>\n        <Button>Learn more</Button>\n      </div>\n      <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">\n        <img\n          className=\"landing-page__illo\"\n          src={`${process.env.PUBLIC_URL}/tab-illo.png`}\n          alt=\"Carbon illustration\"\n        />\n      </div>\n    </div>\n  </div>\n</Tab>\n```\n<!-- prettier-ignore-end -->\n\nNow let's set the image size in `_landing-page.scss`:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__illo {\n  max-width: 100%;\n}\n```\n\nAssuming 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.\n\n### Third row\n\nThe third row will be created in a later tutorial, so we'll just add the headers for now.\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__r3\">\n  <div className=\"bx--col-md-4 bx--col-lg-4\">\n    <h3 className=\"landing-page__label\">The Principles</h3>\n  </div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Open</div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Modular</div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Consistent</div>\n</div>\n```\n\n## Style landing page\n\nWe've added basic layout styles in `_landing-page.scss`, so now let's add type, color and spacing styles to match the design. We'll be using our [spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing). In `app.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:\n\n```scss path=src/app.scss\n@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';\n@import 'carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss';\n@import 'carbon-components/scss/globals/scss/typography.scss';\n@import 'carbon-components/scss/globals/scss/vars.scss';\n```\n\n### Banner\n\n<Row>\n<Column colLg={8}>\n\n![Banner vertical spacing](../shared/step-2/images/landing-r1-spacing.png)\n\n<Caption>Banner vertical spacing</Caption>\n\n</Column>\n</Row>\n\n_Pro tip:_ `CTRL-G` _toggles the grid in Sketch._\n\nBack to `_landing-page.scss`, we need to add space above the breadcrumb and below the heading. For that, add:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__banner {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-07 * 4;\n}\n```\n\nReferencing the [spacing token table](https://www.carbondesignsystem.com/guidelines/spacing#spacing-scale), `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 that 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.\n\nLooking 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/content/LandingPage`.\n\nAdd 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 `$ui-01` [color token](https://www.carbondesignsystem.com/guidelines/color/usage). 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.\n\n```scss path=src/content/LandingPage/_mixins.scss\n@mixin landing-page-background() {\n  background-color: $ui-01;\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -$spacing-05;\n    top: 0;\n    right: -$spacing-05;\n    bottom: 0;\n    background: $ui-01;\n    z-index: -1;\n  }\n}\n```\n\nAfter you have created `_mixins.scss`, import it at the **top** of `_landing-page.scss`. By now you should have two imports:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n@import './mixins.scss';\n@import './overrides.scss';\n```\n\nNow to use the new mixin, update the `.landing-page__banner` declaration block to:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__banner {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-07 * 4;\n  @include landing-page-background;\n}\n```\n\nNext, we can see that the `h1` is using the `heading-05` type token.\n\n<Row>\n<Column colLg={8}>\n\n![Banner heading type](../shared/step-2/images/landing-r1-type.png)\n\n<Caption>Banner heading type</Caption>\n\n</Column>\n</Row>\n\nThe Sketch symbol naming is consistent with the development Sass tokens to help translate design to development. So, looking up the [type token](https://www.carbondesignsystem.com/guidelines/typography/productive), we know to use `productive-heading-05`:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__heading {\n  @include carbon--type-style('productive-heading-05');\n}\n```\n\n### Row two\n\nFor 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.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__r2 {\n  margin-top: rem(-40px);\n}\n```\n\nWe also need to adjust our vertical spacing and type treatment. Like before, it's a matter of using spacing and type tokens like so:\n\n<Row>\n<Column colLg={8}>\n\n![Row 2 vertical spacing](../shared/step-2/images/landing-r2-spacing.png)\n\n<Caption>Row 2 vertical spacing</Caption>\n\n</Column>\n</Row>\n\n_Note: You may be wondering why there are vertical gaps between the type and spacers. Each type token has a line height that's suited for its font size. The vertical spacers adjacently touch the line height boundaries and not the baseline, for consistency as well as development ease so_ `margins` _and_ `paddings` _don't need to offset line heights._\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__tab-content {\n  padding-top: $layout-05;\n  padding-bottom: $layout-05;\n}\n\n.landing-page__subheading {\n  @include carbon--type-style('productive-heading-03');\n  @include carbon--font-weight('semibold');\n}\n\n.landing-page__p {\n  @include carbon--type-style('productive-heading-03');\n  margin-top: $spacing-06;\n  margin-bottom: $spacing-08;\n\n  @include carbon--breakpoint-between((320px + 1), md) {\n    max-width: 75%;\n  }\n}\n```\n\n### Row three\n\n<Row>\n<Column colLg={8}>\n\n![Row 3 vertical spacing](../shared/step-2/images/landing-r3-spacing.png)\n\n<Caption>Row 3 vertical spacing</Caption>\n\n</Column>\n</Row>\n\nLet'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.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__r3 {\n  padding-top: $spacing-09;\n  padding-bottom: $spacing-09;\n  @include landing-page-background;\n}\n\n.landing-page__label {\n  @include carbon--type-style('heading-01');\n}\n```\n\nTa-da! You should see a finished landing page! Now we can move on to the repo page.\n\n## Add repo page grid\n\nNow in our `RepoPage.js` we'll add our grid containers in the `return` section.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nreturn (\n  <div className=\"bx--grid bx--grid--full-width bx--grid--no-gutter repo-page\">\n    <div className=\"bx--row repo-page__r1\">\n      <div className=\"bx--col-lg-16\">Data table will go here</div>\n    </div>\n  </div>\n);\n```\n\n## Build repo page\n\nWe currently have `RepoPage.js` that just contains a grid and placeholder content for the time being. In the next tutorial step we're going to be querying an API to populate the `DataTable` component in this page. As a best practice to separate data fetching from the presentation components, go ahead and create a `RepoTable.js` as a sibling to `RepoPage.js` in `src/content/RepoPage`.\n\n### Build data table\n\nFirst, we'll add our data table by importing a few components in `RepoTable.js`:\n\n```javascript path=src/content/RepoPage/RepoTable.js\nimport React from 'react';\nimport {\n  DataTable,\n  TableContainer,\n  Table,\n  TableHead,\n  TableRow,\n  TableExpandHeader,\n  TableHeader,\n  TableBody,\n  TableExpandRow,\n  TableCell,\n  TableExpandedRow,\n} from 'carbon-components-react';\n```\n\nThen, let's create the `RepoTable` component and export it at the very bottom of the page.\n\n<!-- prettier-ignore-start -->\n```javascript path=src/content/RepoPage/RepoTable.js\nconst RepoTable = ({ rows, headers }) => {\n  return (\n    <DataTable\n      rows={rows}\n      headers={headers}\n      render={({\n        rows,\n        headers,\n        getHeaderProps,\n        getRowProps,\n        getTableProps,\n      }) => (\n        <TableContainer\n          title=\"Carbon Repositories\"\n          description=\"A collection of public Carbon repositories.\">\n          <Table {...getTableProps()}>\n            <TableHead>\n              <TableRow>\n                <TableExpandHeader />\n                {headers.map(header => (\n                  <TableHeader {...getHeaderProps({ header })}>\n                    {header.header}\n                  </TableHeader>\n                ))}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {rows.map(row => (\n                <React.Fragment key={row.id}>\n                  <TableExpandRow {...getRowProps({ row })}>\n                    {row.cells.map(cell => (\n                      <TableCell key={cell.id}>{cell.value}</TableCell>\n                    ))}\n                  </TableExpandRow>\n                  <TableExpandedRow colSpan={headers.length + 1}>\n                    <p>Row description</p>\n                  </TableExpandedRow>\n                </React.Fragment>\n              ))}\n            </TableBody>\n          </Table>\n        </TableContainer>\n      )}\n    />\n  );\n};\n\nexport default RepoTable;\n```\n<!-- prettier-ignore-end -->\n\nThis component uses two props, `rows` and `headers`, and returns a Carbon `DataTable`. As for where the various `Table*` components came from? The [DataTable story](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20expansion) in Storybook was used to put together the data table structure.\n\n_Note: The_ `getTableProps`_,_ `getHeaderProps`_, and_ `getRowProps` _functions each tell the_ `DataTable` _component to process and return the necessary props that are needed by the_ `Table`_,_ `Header` _and_ `Row` _components respectively. We take the return of that function (an object containing the props) and [spread it out](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes) into the component._\n\nAt this point, return to `RepoPage.js` because now we need to render a static `RepoTable`.\n\n### Render data table\n\nImport `RepoTable` in `RepoPage.js`.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nimport RepoTable from './RepoTable';\n```\n\nThen 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.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nconst headers = [\n  {\n    key: 'name',\n    header: 'Name',\n  },\n  {\n    key: 'createdAt',\n    header: 'Created',\n  },\n  {\n    key: 'updatedAt',\n    header: 'Updated',\n  },\n  {\n    key: 'issueCount',\n    header: 'Open Issues',\n  },\n  {\n    key: 'stars',\n    header: 'Stars',\n  },\n  {\n    key: 'links',\n    header: 'Links',\n  },\n];\n\nconst rows = [\n  {\n    id: '1',\n    name: 'Repo 1',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n  {\n    id: '2',\n    name: 'Repo 2',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n  {\n    id: '3',\n    name: 'Repo 3',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n];\n```\n\nLastly in `RepoPage.js`, we need to simply replace `Data table will go here` with:\n\n<!-- prettier-ignore-start -->\n```html path=src/content/RepoPage/RepoPage.js\n<RepoTable headers={headers} rows={rows} />\n```\n<!-- prettier-ignore-end -->\n\n## Style repo page\n\nOur styles for the repo page are mostly fine. We just need to update a few vertical spacing issues.\n\nIn `_repo-page.scss`, add the following styles:\n\n```scss path=src/content/RepoPage/_repo-page.scss\n.repo-page .bx--row {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-05;\n}\n```\n\nCongratulations! We've now created our static repo page!\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step.\n\n### Continuous integration (CI) check\n\nRun the CI check to make sure we're all set to submit a pull request.\n\n```bash\n$ yarn ci-check\n```\n\n_Note: Having issues running the CI check? [Step 1](</tutorial/react/step-1#continuous-integration-(ci)-check>) has troubleshooting notes that may help._\n\n### Git commit and push\n\nBefore we can create a pull request, stage and commit all of your changes:\n\n```bash\n$ git add --all && git commit -m \"feat(tutorial): complete step 2\"\n```\n\nThen, push to your repository:\n\n```bash\n$ git push origin react-step-2\n```\n\n_Note: Having issues pushing your changes? [Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes that may help._\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to \"Compare & pull request\". In doing so, make sure that you are comparing to `react-step-2` into `base: react-step-2`.\n\n_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_\n","type":"Mdx","contentDigest":"b5d6efa0918226ef618d85fcd3935e22","counter":1481,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"2. Building pages","description":"Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: 2. Building pages\ndescription: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System.\ntabs:\n  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n### Now that we have a React app using the UI Shell, it's time to build a few static pages. In this step, we'll become comfortable with the Carbon grid and various Carbon components.\n\n<AnchorLinks>\n\n<AnchorLink>Fork, clone and branch</AnchorLink>\n<AnchorLink>Install grid</AnchorLink>\n<AnchorLink>Add landing page grid</AnchorLink>\n<AnchorLink>Build landing page</AnchorLink>\n<AnchorLink>Style landing page</AnchorLink>\n<AnchorLink>Add repo page grid</AnchorLink>\n<AnchorLink>Build repo page</AnchorLink>\n<AnchorLink>Style repo page</AnchorLink>\n<AnchorLink>Submit pull request</AnchorLink>\n\n</AnchorLinks>\n\n## Preview\n\nA [preview](https://react-step-3--carbon-tutorial.netlify.com) of what you'll build:\n\n<Preview\n  height=\"400\"\n  title=\"Carbon Tutorial Step 2\"\n  src=\"https://react-step-3--carbon-tutorial.netlify.com\"\n  frameborder=\"no\"\n  allowtransparency=\"true\"\n  allowfullscreen=\"true\"\n  class=\"bx--iframe bx--iframe--border\"\n/>\n\n## Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/react/step-1#fork-clone--branch).\n\n### Branch\n\nWith your repository all set up, let's check out the branch for this tutorial step's starting point.\n\n```bash\n$ git fetch upstream\n$ git checkout -b react-step-2 upstream/react-step-2\n```\n\n_Note: This builds on top of step 1, but be sure to check out the upstream step 2 branch because it includes the static assets required to get through this step._\n\n### Build and start app\n\nInstall the app's dependencies (in case you're starting fresh in your current directory and not continuing from the previous step):\n\n```bash\n$ yarn\n```\n\nThen, start the app:\n\n```bash\n$ yarn start\n```\n\nYou should see something similar to where the [previous step](/tutorial/react/step-1) left off.\n\n### IE11 polyfills\n\nBefore we get started with this step, we'll be adding some components that require IE11 polyfills. As shown in the [Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/polyfills.js), go ahead and add these imports to the top of the root `index.js`. They aren't all needed, but we'll add them all to play it safe for the duration of the tutorial.\n\n```javascript path=src/index.js\nimport 'core-js/modules/es7.array.includes';\nimport 'core-js/modules/es6.array.fill';\nimport 'core-js/modules/es6.string.includes';\nimport 'core-js/modules/es6.string.trim';\nimport 'core-js/modules/es7.object.values';\n```\n\n_Note: You may be wondering where_ `core-js`_came from because it's not a Carbon package and we haven't explicitly installed it. Run_ `yarn why core-js` _and you'll see there are a number of packages that have brought it in as a dependency._\n\n## Install grid\n\nIn our last step we added our styles, component and icon packages. Now that we're building the pages with grid, we need to install one more Carbon package. Stop your development environment (`CTRL-C`) and:\n\n```bash\n$ yarn add @carbon/grid\n```\n\nIn `index.scss`, we need to configure our grid to use 16 columns instead of the default 12 columns. We do this by adding `grid-columns-16: true` in our `$feature-flags`.\n\n```scss path=src/index.scss\n$feature-flags: (\n  ui-shell: true,\n  grid-columns-16: true,\n);\n```\n\n_Note: Like before, the feature flag still needs to come before the Carbon_ `styles.scss` _import._\n\nRun `yarn start` so we can begin building.\n\n## Add landing page grid\n\nLet's add our grid elements to `LandingPage.js`.\n\nIn order to use the grid, we need to wrap everything in a `<div className=\"bx--grid\">`. We can continue to make rows by adding a `<div className=\"bx--row\">` inside the grid, as well as make columns within those rows by adding `<div className=\"bx--col-[breakpoint]-[size]\">`.\n\nOur column sizes are specified by the number of columns they'll be spanning. If we use `bx--col-lg-4`, it means it'll span 4 of the 16 columns. If we use `bx--col-lg-8` it means it'll span 8 of the 16 columns, and so on.\n\nWe've included the designs for this tutorial app in the `design.sketch` file found as a top-level file in the `carbon-tutorial` repository. But, if you don't have Sketch installed and available to inspect the design, we'll provide screenshots.\n\n![Landing page grid](../shared/step-2/images/landing-layout.png)\n\n<Caption>Landing page grid</Caption>\n\n_Pro tip:_ `CTRL-L` _toggles the layout in Sketch._\n\nWe'll break this down into three rows. The first row with the gray background doesn't appear to need any columns. The second row with the white background looks like it has two columns of different widths. The third row with the gray background looks like it has four columns of equal width.\n\nWe'll make rows like so:\n\n```javascript path=src/content/LandingPage/LandingPage.js\nreturn (\n  <div className=\"bx--grid bx--grid--full-width landing-page\">\n    <div className=\"bx--row landing-page__banner\">\n      <div className=\"bx--col-lg-16\">1</div>\n    </div>\n    <div className=\"bx--row landing-page__r2\">\n      <div className=\"bx--col-md-4 bx--col-lg-7\">7/16</div>\n      <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">8/16</div>\n    </div>\n    <div className=\"bx--row landing-page__r3\">\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n      <div className=\"bx--col-md-4 bx--col-lg-4\">1/4</div>\n    </div>\n  </div>\n);\n```\n\nWe added a class of `bx--grid--full-width` to the grid container since our rows need to expand the whole page without any margins. We also added some custom classes like `landing-page`, `landing-page__banner`, `landing-page__r2`, etc., which we will use later.\n\nAlso, take notice of the second row. The tab content only covers 7 columns at this large viewport to prevent overly-large line lengths, so we needed to add a 1 column offset `bx--offset-lg-1` to second column to fill the full 16 columns in the grid. Then, both of those columns have `bx--col-md-4` classes so they are of equal width at medium-sized viewports.\n\n## Build landing page\n\nWe'll start adding HTML elements and components by row.\n\n### First row\n\nIn 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-components-react` package instead of the direct path for each one.\n\n```javascript path=src/content/LandingPage/LandingPage.js\nimport { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';\n```\n\nWe can now add our component to the first row, along with a header, like so:\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__banner\">\n  <div className=\"bx--col-lg-16\">\n    <Breadcrumb noTrailingSlash>\n      <BreadcrumbItem>\n        <a href=\"/\">Getting started</a>\n      </BreadcrumbItem>\n    </Breadcrumb>\n    <h1 className=\"landing-page__heading\">\n      Design &amp; build with Carbon\n    </h1>\n  </div>\n</div>\n```\n\nYou may notice that the styles look off. Don't worry, we'll fix these later.\n\n### Second row\n\nIn our second row we'll need `Tabs` and `Button` components. We'll update the `carbon-components-react` import to:\n\n```javascript path=src/content/LandingPage/LandingPage.js\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  Tabs,\n  Tab,\n} from 'carbon-components-react';\n```\n\nBefore we can render the tabs, we need to add some props for the component after the import. These example props came from the [React Tabs Story](http://react.carbondesignsystem.com/?selectedKind=Tabs) in Storybook.\n\n```javascript path=src/content/LandingPage/LandingPage.js\nconst props = {\n  tabs: {\n    selected: 0,\n    triggerHref: '#',\n    role: 'navigation',\n  },\n  tab: {\n    href: '#',\n    role: 'presentation',\n    tabIndex: 0,\n  },\n};\n```\n\nModify the second row to use the `Tab` component.\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__r2\">\n  <div className=\"bx--col bx--no-gutter\">\n    <Tabs {...props.tabs}>\n      <Tab {...props.tab} label=\"About\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-md-4 bx--col-lg-7\">7/16</div>\n            <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">\n              8/16\n            </div>\n          </div>\n        </div>\n      </Tab>\n      <Tab {...props.tab} label=\"Design\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-lg-16\">\n              Rapidly build beautiful and accessible experiences. The Carbon kit\n              contains all resources you need to get started.\n            </div>\n          </div>\n        </div>\n      </Tab>\n      <Tab {...props.tab} label=\"Develop\">\n        <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n          <div className=\"bx--row landing-page__tab-content\">\n            <div className=\"bx--col-lg-16\">\n              Carbon provides styles and components in Vanilla, React, Angular,\n              and Vue for anyone building on the web.\n            </div>\n          </div>\n        </div>\n      </Tab>\n    </Tabs>\n  </div>\n</div>\n```\n\n_Note: We're using the grid for the page layout, but we also need to apply the grid within the tab content. When doing so, make sure the nested grid has the expected_ `grid` _>_ `row` _>_ `col` _DOM structure._\n\nHold up! If you were to run [DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) 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:\n\n<!-- prettier-ignore-start -->\n```html\n<Breadcrumb noTrailingSlash aria-label=\"Page navigation\">\n```\n<!-- prettier-ignore-end -->\n\nSame goes for the `Tabs` opening tag:\n\n<!-- prettier-ignore-start -->\n```html\n<Tabs {...props.tabs} aria-label=\"Tab navigation\">\n```\n<!-- prettier-ignore-end -->\n\nNext, we'll need to add a styling override to move the tabs to the right on large viewports. Create a file `_overrides.scss` in `src/content/LandingPage` with this declaration block.\n\n```scss path=src/content/LandingPage/_overrides.scss\n.landing-page__r2 .bx--tabs__nav {\n  right: 0;\n}\n```\n\nThen in `_landing-page.scss` add this import at the top of the file.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n@import './overrides.scss';\n```\n\n_Note: We don't have to include this in a separate file, but it's nice to keep overrides separate from your application's styling so when migrating to future Carbon versions and if there are breaking changes via different class names, you have a consolidated list of styling declaration blocks to review._\n\nWe can now add our images and text for each column in the first `Tab` in `LandingPage.js`.\n\n<!-- prettier-ignore-start -->\n```html path=src/content/LandingPage/LandingPage.js\n<Tab {...props.tab} label=\"About\">\n  <div className=\"bx--grid bx--grid--no-gutter bx--grid--full-width\">\n    <div className=\"bx--row landing-page__tab-content\">\n      <div className=\"bx--col-md-4 bx--col-lg-7\">\n        <h2 className=\"landing-page__subheading\">\n          What is Carbon?\n        </h2>\n        <p className=\"landing-page__p\">\n          Carbon is IBM’s open-source design system for digital\n          products and experiences. With the IBM Design Language\n          as its foundation, the system consists of working code,\n          design tools and resources, human interface guidelines,\n          and a vibrant community of contributors.\n        </p>\n        <Button>Learn more</Button>\n      </div>\n      <div className=\"bx--col-md-4 bx--offset-lg-1 bx--col-lg-8\">\n        <img\n          className=\"landing-page__illo\"\n          src={`${process.env.PUBLIC_URL}/tab-illo.png`}\n          alt=\"Carbon illustration\"\n        />\n      </div>\n    </div>\n  </div>\n</Tab>\n```\n<!-- prettier-ignore-end -->\n\nNow let's set the image size in `_landing-page.scss`:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__illo {\n  max-width: 100%;\n}\n```\n\nAssuming 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.\n\n### Third row\n\nThe third row will be created in a later tutorial, so we'll just add the headers for now.\n\n```html path=src/content/LandingPage/LandingPage.js\n<div className=\"bx--row landing-page__r3\">\n  <div className=\"bx--col-md-4 bx--col-lg-4\">\n    <h3 className=\"landing-page__label\">The Principles</h3>\n  </div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Open</div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Modular</div>\n  <div className=\"bx--col-md-4 bx--col-lg-4\">Carbon is Consistent</div>\n</div>\n```\n\n## Style landing page\n\nWe've added basic layout styles in `_landing-page.scss`, so now let's add type, color and spacing styles to match the design. We'll be using our [spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing). In `app.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:\n\n```scss path=src/app.scss\n@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss';\n@import 'carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss';\n@import 'carbon-components/scss/globals/scss/typography.scss';\n@import 'carbon-components/scss/globals/scss/vars.scss';\n```\n\n### Banner\n\n<Row>\n<Column colLg={8}>\n\n![Banner vertical spacing](../shared/step-2/images/landing-r1-spacing.png)\n\n<Caption>Banner vertical spacing</Caption>\n\n</Column>\n</Row>\n\n_Pro tip:_ `CTRL-G` _toggles the grid in Sketch._\n\nBack to `_landing-page.scss`, we need to add space above the breadcrumb and below the heading. For that, add:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__banner {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-07 * 4;\n}\n```\n\nReferencing the [spacing token table](https://www.carbondesignsystem.com/guidelines/spacing#spacing-scale), `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 that 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.\n\nLooking 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/content/LandingPage`.\n\nAdd 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 `$ui-01` [color token](https://www.carbondesignsystem.com/guidelines/color/usage). 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.\n\n```scss path=src/content/LandingPage/_mixins.scss\n@mixin landing-page-background() {\n  background-color: $ui-01;\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -$spacing-05;\n    top: 0;\n    right: -$spacing-05;\n    bottom: 0;\n    background: $ui-01;\n    z-index: -1;\n  }\n}\n```\n\nAfter you have created `_mixins.scss`, import it at the **top** of `_landing-page.scss`. By now you should have two imports:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n@import './mixins.scss';\n@import './overrides.scss';\n```\n\nNow to use the new mixin, update the `.landing-page__banner` declaration block to:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__banner {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-07 * 4;\n  @include landing-page-background;\n}\n```\n\nNext, we can see that the `h1` is using the `heading-05` type token.\n\n<Row>\n<Column colLg={8}>\n\n![Banner heading type](../shared/step-2/images/landing-r1-type.png)\n\n<Caption>Banner heading type</Caption>\n\n</Column>\n</Row>\n\nThe Sketch symbol naming is consistent with the development Sass tokens to help translate design to development. So, looking up the [type token](https://www.carbondesignsystem.com/guidelines/typography/productive), we know to use `productive-heading-05`:\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__heading {\n  @include carbon--type-style('productive-heading-05');\n}\n```\n\n### Row two\n\nFor 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.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__r2 {\n  margin-top: rem(-40px);\n}\n```\n\nWe also need to adjust our vertical spacing and type treatment. Like before, it's a matter of using spacing and type tokens like so:\n\n<Row>\n<Column colLg={8}>\n\n![Row 2 vertical spacing](../shared/step-2/images/landing-r2-spacing.png)\n\n<Caption>Row 2 vertical spacing</Caption>\n\n</Column>\n</Row>\n\n_Note: You may be wondering why there are vertical gaps between the type and spacers. Each type token has a line height that's suited for its font size. The vertical spacers adjacently touch the line height boundaries and not the baseline, for consistency as well as development ease so_ `margins` _and_ `paddings` _don't need to offset line heights._\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__tab-content {\n  padding-top: $layout-05;\n  padding-bottom: $layout-05;\n}\n\n.landing-page__subheading {\n  @include carbon--type-style('productive-heading-03');\n  @include carbon--font-weight('semibold');\n}\n\n.landing-page__p {\n  @include carbon--type-style('productive-heading-03');\n  margin-top: $spacing-06;\n  margin-bottom: $spacing-08;\n\n  @include carbon--breakpoint-between((320px + 1), md) {\n    max-width: 75%;\n  }\n}\n```\n\n### Row three\n\n<Row>\n<Column colLg={8}>\n\n![Row 3 vertical spacing](../shared/step-2/images/landing-r3-spacing.png)\n\n<Caption>Row 3 vertical spacing</Caption>\n\n</Column>\n</Row>\n\nLet'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.\n\n```scss path=src/content/LandingPage/_landing-page.scss\n.landing-page__r3 {\n  padding-top: $spacing-09;\n  padding-bottom: $spacing-09;\n  @include landing-page-background;\n}\n\n.landing-page__label {\n  @include carbon--type-style('heading-01');\n}\n```\n\nTa-da! You should see a finished landing page! Now we can move on to the repo page.\n\n## Add repo page grid\n\nNow in our `RepoPage.js` we'll add our grid containers in the `return` section.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nreturn (\n  <div className=\"bx--grid bx--grid--full-width bx--grid--no-gutter repo-page\">\n    <div className=\"bx--row repo-page__r1\">\n      <div className=\"bx--col-lg-16\">Data table will go here</div>\n    </div>\n  </div>\n);\n```\n\n## Build repo page\n\nWe currently have `RepoPage.js` that just contains a grid and placeholder content for the time being. In the next tutorial step we're going to be querying an API to populate the `DataTable` component in this page. As a best practice to separate data fetching from the presentation components, go ahead and create a `RepoTable.js` as a sibling to `RepoPage.js` in `src/content/RepoPage`.\n\n### Build data table\n\nFirst, we'll add our data table by importing a few components in `RepoTable.js`:\n\n```javascript path=src/content/RepoPage/RepoTable.js\nimport React from 'react';\nimport {\n  DataTable,\n  TableContainer,\n  Table,\n  TableHead,\n  TableRow,\n  TableExpandHeader,\n  TableHeader,\n  TableBody,\n  TableExpandRow,\n  TableCell,\n  TableExpandedRow,\n} from 'carbon-components-react';\n```\n\nThen, let's create the `RepoTable` component and export it at the very bottom of the page.\n\n<!-- prettier-ignore-start -->\n```javascript path=src/content/RepoPage/RepoTable.js\nconst RepoTable = ({ rows, headers }) => {\n  return (\n    <DataTable\n      rows={rows}\n      headers={headers}\n      render={({\n        rows,\n        headers,\n        getHeaderProps,\n        getRowProps,\n        getTableProps,\n      }) => (\n        <TableContainer\n          title=\"Carbon Repositories\"\n          description=\"A collection of public Carbon repositories.\">\n          <Table {...getTableProps()}>\n            <TableHead>\n              <TableRow>\n                <TableExpandHeader />\n                {headers.map(header => (\n                  <TableHeader {...getHeaderProps({ header })}>\n                    {header.header}\n                  </TableHeader>\n                ))}\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {rows.map(row => (\n                <React.Fragment key={row.id}>\n                  <TableExpandRow {...getRowProps({ row })}>\n                    {row.cells.map(cell => (\n                      <TableCell key={cell.id}>{cell.value}</TableCell>\n                    ))}\n                  </TableExpandRow>\n                  <TableExpandedRow colSpan={headers.length + 1}>\n                    <p>Row description</p>\n                  </TableExpandedRow>\n                </React.Fragment>\n              ))}\n            </TableBody>\n          </Table>\n        </TableContainer>\n      )}\n    />\n  );\n};\n\nexport default RepoTable;\n```\n<!-- prettier-ignore-end -->\n\nThis component uses two props, `rows` and `headers`, and returns a Carbon `DataTable`. As for where the various `Table*` components came from? The [DataTable story](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20expansion) in Storybook was used to put together the data table structure.\n\n_Note: The_ `getTableProps`_,_ `getHeaderProps`_, and_ `getRowProps` _functions each tell the_ `DataTable` _component to process and return the necessary props that are needed by the_ `Table`_,_ `Header` _and_ `Row` _components respectively. We take the return of that function (an object containing the props) and [spread it out](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes) into the component._\n\nAt this point, return to `RepoPage.js` because now we need to render a static `RepoTable`.\n\n### Render data table\n\nImport `RepoTable` in `RepoPage.js`.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nimport RepoTable from './RepoTable';\n```\n\nThen 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.\n\n```javascript path=src/content/RepoPage/RepoPage.js\nconst headers = [\n  {\n    key: 'name',\n    header: 'Name',\n  },\n  {\n    key: 'createdAt',\n    header: 'Created',\n  },\n  {\n    key: 'updatedAt',\n    header: 'Updated',\n  },\n  {\n    key: 'issueCount',\n    header: 'Open Issues',\n  },\n  {\n    key: 'stars',\n    header: 'Stars',\n  },\n  {\n    key: 'links',\n    header: 'Links',\n  },\n];\n\nconst rows = [\n  {\n    id: '1',\n    name: 'Repo 1',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n  {\n    id: '2',\n    name: 'Repo 2',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n  {\n    id: '3',\n    name: 'Repo 3',\n    createdAt: 'Date',\n    updatedAt: 'Date',\n    issueCount: '123',\n    stars: '456',\n    links: 'Links',\n  },\n];\n```\n\nLastly in `RepoPage.js`, we need to simply replace `Data table will go here` with:\n\n<!-- prettier-ignore-start -->\n```html path=src/content/RepoPage/RepoPage.js\n<RepoTable headers={headers} rows={rows} />\n```\n<!-- prettier-ignore-end -->\n\n## Style repo page\n\nOur styles for the repo page are mostly fine. We just need to update a few vertical spacing issues.\n\nIn `_repo-page.scss`, add the following styles:\n\n```scss path=src/content/RepoPage/_repo-page.scss\n.repo-page .bx--row {\n  padding-top: $spacing-05;\n  padding-bottom: $spacing-05;\n}\n```\n\nCongratulations! We've now created our static repo page!\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step.\n\n### Continuous integration (CI) check\n\nRun the CI check to make sure we're all set to submit a pull request.\n\n```bash\n$ yarn ci-check\n```\n\n_Note: Having issues running the CI check? [Step 1](</tutorial/react/step-1#continuous-integration-(ci)-check>) has troubleshooting notes that may help._\n\n### Git commit and push\n\nBefore we can create a pull request, stage and commit all of your changes:\n\n```bash\n$ git add --all && git commit -m \"feat(tutorial): complete step 2\"\n```\n\nThen, push to your repository:\n\n```bash\n$ git push origin react-step-2\n```\n\n_Note: Having issues pushing your changes? [Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes that may help._\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to \"Compare & pull request\". In doing so, make sure that you are comparing to `react-step-2` into `base: react-step-2`.\n\n_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/tutorial/react/step-2.mdx"}}}}