DEV Community

Cover image for Complete tutorial - Grid component with React + Typescript + Storybook + SCSS
Thu Nghiem
Thu Nghiem

Posted on

Complete tutorial - Grid component with React + Typescript + Storybook + SCSS

One of the best ways to learn React is by creating reusable components. Instead of using bootstrap or other frameworks when working with Grid layout, why don't make it yourself?

Alt Text

In this tutorial, I am going to show you:

  • 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

What you will learn in this tutorial:

React

React is a popular Front-end framework and one reason for that is the ability to create Reusable component, so why not start learning by creating those amazing components?

Typescript

I am not going to go into details about Typescript in this video but you will have an idea of how React and Typescript working together

Flexbox and CSS Grid

By working with the basic concept, we will use and master the basics of Flexbox and CSS Grid

SCSS + CSS modules

We are going to work with some of the most common features in SCSS like:

  • Variables
  • List
  • Map
  • Mixins,...

Storybook

One of my first tasks, when I started my job, was maintaining the storybook for our design system.

Storybook is a great tool to document Reusable components or even multiple flows in UI.

Netlify

We are going to use Netlify to deploy and host our storybook
Demo

🏝 Source code: Grid React Component

📝 Text Editor: https://code.visualstudio.com/
Plugin:

  • Prettier
  • ESLint
  • Auto Import

Video:

For other resources, check out:
👉 https://devchallenges.io/

Follow me:
🐦 Twitter

Top comments (2)

Collapse
 
zhabinsky profile image
Vlad Zhabinsky

This tutorial helped me grow my skill by 3.7kg
Thank you !

Collapse
 
oscarcornejo profile image
Oscar Cornejo Aguila

What a great post! Any update to this article with styled-components?
Greetings!