Latest Update: 05 December 2020

Grid component with React + TypeScript

One of the best ways to learn React is by creating reusable components. In this tutorial, we are going to:

  • Set up create-react-app with typescript template
  • Create a simple Box component
  • Create a Reusable Grid Component using Flexbox
  • Create Grid Ruler using CSS Grid
  • Handle Responsiveness in Grid Layout
  • Add dynamic props JustifyContent and AlignItems
  • Set up storybook
  • Write Grid Document in Storybook
  • Deploy storybook with Netlify