آموزش به مفاهیم اصلی React و Storybook مسلط شوید

سرفصل ها و درس ها

React Fundamentals React Fundamentals

• معرفی دوره Course Introduction

• React Introduction React Introduction

• در مرورگر واکنش نشان دهید React in the Browser

• JSX JSX

• امتیازات JSX JSX perks

• اجزای کلاسی Class based Components

• اجزای عملکردی Functional Components

• لوازم جانبی Props

• رسیدگی به رویدادها Handeling Events

• حالت State

• مسابقه برای حالت و لوازم Quiz for State & Props

• معرفی Node.js Introducing Node.js

• React برنامه با استفاده از Webpack React app using Webpack

• این بسته ها را نصب کنید Install these packages

با کتاب داستان واکنش نشان دهید React with Storybook

• توسعه مبتنی بر مولفه Component Driven Development

• طراحی اتمی Atomic Design

• درک خود را از طراحی اتمی آزمایش کنید Test your understanding of Atomic design

• از Creative-react-app CLI استفاده کنید Use create-react-app CLI

• افزودن استایل شیت ها Adding Stylesheets

• Storybook را نصب کنید Install Storybook

• معرفی کتاب داستان با جزء دکمه Storybook intro with Button component

• جزء شمارنده Counter component

• React State با useState React State with useState

• جزء رتبه بندی Rating component

• جزء آکاردئون Accordion Component

• useRef() با آکاردئون useRef() with Accordion

• تغییر عنوان کامپوننت ها Change Components Title

• جزء TextInput TextInput Component

• مؤلفه کنترل شده (TextInput) Controlled Component (TextInput)

• TailwindCSS را راه اندازی کنید Setup TailwindCSS

• Style TextInput Style TextInput

آزمایش کردن Testing

• کامپوننت دکمه تست واحد Unit test Button Component

• تست با کتاب داستان Testing with Storybook

• تست دسترسی (a11y) Testing Accessibility (a11y)

• راه اندازی تست رگرسیون بصری (VRT) Setup Visual Regression Test (VRT)

CI/CD CI/CD

• چه CI/CD؟ What CI/CD ?

• اقدامات Github Github Actions

• گردش کار CI را ایجاد کنید Create CI Workflow

• تست ناموفق در CI را برطرف کنید Fix Failed test on the CI

• Codecov را اضافه کنید Add Codecov

• اضافه کردن نشان وضعیت Add Status Badge

• کتاب داستان را با VRT منتشر کنید Publish Storybook with VRTs

• VRT را تعمیر کنید Fix VRT

React Tools & Recommendations React Tools & Recommendations

• بهترین Backend برای React- Part 1 Best Backend for React- Part 1

• بهترین Backend برای React - قسمت 2 Best Backend for React- Part 2

• از ChatGPT برای کدنویسی استفاده کنید [9 مثال] Use ChatGPT for coding [9 Examples]