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

Опубликовано: 04 Октябрь 2024
на канале: Thu Nghiem

23,130

450

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?

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 - https://reactjs.org/
Typescript https://www.typescriptlang.org/docs/
Flexbox and CSS Grid
SCSS https://sass-lang.com/documentation + CSS modules
Storybook https://storybook.js.org/
Netlify https://www.netlify.com/

We are going to use Netlify to deploy and host our storybook
[Demo](https://tender-ride-20dfc0.netlify.app/)

🏝 Source code: [Grid React Component](https://github.com/nghiemthu/grid-rea...)

📝 Text Editor: https://code.visualstudio.com/
Plugin:
Prettier
ESLint
Auto Import

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

Follow me:
🐦 / thunghiemdinh