آموزش Hands-On React. با متخصص React JS Frontend پیشرفته بسازید

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

مقدمه Introduction

• Minesweeper و Github repo Minesweeper and Github repo

• یک مخزن ایجاد کنید Create a repository

• پروژه init و npm Project init and npm

• Code-style و Eslint Code-style and Eslint

• زیباتر Prettier

• ESLint و Prettier را به پروژه خود اضافه کنید Add ESLint and Prettier into your project

• لینک های مفید Useful links

خلاصه تایپ اسکریپت Typescript recap

• تایپ اسکریپت پایه Typescript basic

• انواع پارامتری با ژنریک Parametric types with generics

• رابط ها، انواع و اتحادیه Interfaces, Types and Union

• ناشناس، هرگز و تاپل Unknown, never and Tuple

• Utility Types UtilityTypes

• چالش انواع ابزار Utility types challenge

• انواع اولیه مین روب Minesweeper basic types

• تست Test

معرفی واکنش React intro

• برنامه React JS را ایجاد کنید Create React JS App

• JSX در نگاه JSX at Glance

• کامپایل JSX JSX compilation

• Props و رندر شرطی Props and conditional rendering

• Props و رندر شرطی Props and conditional rendering

• Ecma TC39 و بابل Ecma TC39 and Babel

• معرفی پک وب Webpack intro

• سرور توسعه دهنده Webpack Webpack dev server

• برنامه React JS را با بسته وب و babel ایجاد کنید Create React JS application with webpack and babel

جست، TDD و منطق اصلی بازی Jest, TDD and basic game logic

• چارچوب تست جست (TDD در مقابل TLD) Jest testing framework (TDD vs TLD)

• مولد میدان قسمت 1 Field generator part1

• مولد میدان قسمت 2 Field generator part2

• مولد میدان قسمت 3 Field generator part3

• مولد میدان قسمت 4 Field generator part4

• پیکربندی اشکال زدایی VSCode VSCode debug configuration

• اشکال زدایی منطق اساسی بازی Debug basic game logic

• یک مولد میدان ایجاد کنید Create a field generator

کتاب داستان و کتابخانه اجزاء Storybook and Components Library

• احساس کتابخانه برای css-in-js Library Emotion for css-in-js

• Styled-Components API Styled-Components API

• معرفی کتاب داستان Storybook intro

• کتاب اسلینت و داستان Eslint and Storybook

• ایجاد کامپوننت های تایپ شده با کتاب داستان Create Styped-Components with Storybook

• ترکیب اجزا Components composition

• کروماتیک برای تست بصری Chromatic for visual testing

• فهرست و کلیدها List and Keys

• کتاب داستان و کروماتیک Storybook and Chromatic

معرفی React Hooks React Hooks intro

• React JS Hook useState React JS Hook useState

• اجزای پویا با useState React JS Hook Dynamic components with useState React JS Hook

• کتابخانه تست React برای اجزای React JS React Testing Library for React JS components

• قطعه Fragment

• جزء سلولی قسمت 1 Cell component part1

• جزء سلولی قسمت 2 Cell component part2

• جزء سلولی part3 Cell component part3

• مناسبت ها Events

• آزمایش اجزای سلولی Cell component tests

• قلاب های سفارشی React JS Custom React JS Hooks

• استفاده ازDebugValue useDebugValue

• جزء بازی (شبکه) Game Field (grid) component

• بررسی کتابخانه اجزای کتاب داستان Storybook components library review

کیفیت کد، استقرار برنامه و CI/CD Code quality, app deploy and CI/CD

• گزارش پوشش تست Test coverage report

• ابزار کیفیت تست Stryker-Mutator Test quality tool Stryker-Mutator

• تست عکس فوری Snapshot testing

• گیتوکس و هاسکی Githooks and Husky

• گسترش AWS Amplify AWS Amplify deploy

• CI/CD با Github Actions CI/CD with Github Actions

• گردش کار را به صورت دستی ارسال کنید Dispatch workflow manually

React hooks و react testing library React hooks and react testing library

• بازی استاتیک Static game

• منطق بازی Game logic

• React JS Hook useState و player field generator React JS Hook useState and player field generator

• رویداد کاربر کتابخانه تست React React Testing Library user-event

• تست مولد میدان بازیکن Test player field generator

• زمینه بازی و openCell handler را ایجاد کنید Generate game field and openCell handler

• جلسه اشکال زدایی و استفاده از Memo React Hook Debug session and useMemo React Hook

• روی موارد آزمایش سلولی کلیک کنید Click to the cell test cases

• بازنشانی بازی توسط TDD Reset game by TDD

قلاب بازی Game hook

• ایجاد بازی بیش از رفتار توسط TDD Create game over behavior by TDD

• بازی سفارشی React Hook Game custom React Hook

• آزمایش بازسازی Test refactoring

• تنظیم عملکرد پرچم Set flag action

• ردیاب پازل حل شد Solved puzzle detector

• کنترل کننده حالت بازی برنده ایجاد کنید Create win game state handler

• کیس آزمایشی را برای حالت برد اضافه کنید Add test case for win state

useEffect، useCallback، React.memo useEffect, useCallback, React.memo

• React JS Hook useEffect React JS Hook useEffect

• تایمر بازی و useEffect Game timer and useEffect

• رفع تایمر بازی Game timer fix

• شمارنده بمب Bombs counter

• گزارش های تست و جلسه بازسازی Test reports and refactoring session

• گزارشات تست و بازسازي جلسه 2 Test reports and refactoring session 2

• در حال تغییر استفاده از بازی Refactoring useGame

• استفاده مجدد از بازی 2 Refactoring useGame 2

• پروفایل RDT و React.memo + معرفی useCallback RDT profiler and React.memo + useCallback intro

• React.memo + useCallback بهینه سازی React.memo + useCallback optimization

• Stryker جهش یافته ها را غیرفعال می کند Stryker disable mutants