آموزش Bootcamp Modern React (Hoks، Context، NextJS، Router)

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

طعم واکنش A Taste of React

• به دوره خوش آمدید! Welcome to the Course!

• به انجمن بپیوندید! Join The Community!

• مقدمه ای برای React Intro to React

• آیا React یک چارچوب یا کتابخانه است؟ Is React a Framework or Library?

• معرفی کامپوننت ها Introducing Components!

• نگاه کردن به یک برنامه بزرگ Looking at a Large App

• راه اندازی سرور شما Setting Up Your Server

• نوشتن اولین جزء ما Writing Our First Component

• عملکرد در مقابل اجزای کلاس Function Vs. Class Components

• همه کدها، اسلایدها و جزوه ها را دانلود کنید Download All Code, Slides, & Handouts

معرفی JSX Introducing JSX

• قوانین اساسی JSX Basics Rules of JSX

• نحوه عملکرد JSX در پشت صحنه How JSX Works Behind the Scenes

• جاسازی جاوا اسکریپت در JSX Embedding JavaScript in JSX

• شرایط در JSX Conditionals in JSX

• طرح‌بندی استاندارد React App Standard React App Layout

لوازم جانبی و بیشتر Props and More

• معرفی React Props Intro to React Props

• لوازم جانبی غیر قابل تغییر هستند؟ Props are Immutable?

• انواع دیگر لوازم جانبی Other Types of Props

• نسخه نمایشی مؤلفه نمودار دایره با لوازم جانبی Pie Chart Component Demo w/ Props

• ورزش: ماشین اسلات EXERCISE: Slot Machine

• تمرین: راه حل ماشین اسلات EXERCISE: Slot Machine Solution

• حلقه زدن در JSX Looping in JSX

• افزودن لوازم پیش فرض Adding Default Props

• Styling React Styling React

معرفی Create React App Introducing Create React App

• مقدمه ای برای ایجاد برنامه React Intro to Create React App

• 2 راه نصب CRA 2 Ways of Installing CRA

• ایجاد یک برنامه جدید Creating a New App

• راه اندازی سرور Starting Up the Server

• ماژول ها: دوره سقوط واردات و صادرات Modules: Import & Export Crash Course

• تمرین: ماژول های میوه EXERICSE: Fruits Modules

• تمرین: راه حل ماژول های میوه ها EXERCISE: Fruits Modules Solution

• React App Conventions را ایجاد کنید Create React App Conventions

• CSS و Assets در Create React App CSS and Assets in Create React App

پروژه پوکدکس Pokedex Project

• مقدمه تمرین Pokedex Intro To Pokedex Exercise

• ایجاد کامپوننت Pokecard Creating Pokecard Component

• اضافه کردن کامپوننت Pokedex Adding Pokedex Component

• یک ظاهر طراحی PokeCard و Pokedex Styling PokeCard and Pokedex

• افزودن تصاویر جذاب تر Adding Fancier Images

• کامپوننت PokeGame The PokeGame Component

• سبک بازی Pokegame Styling Pokegame

معرفی ایالت Introducing State

• اهداف ایالتی State Goals

• انحراف سریع: React Dev Tools Quick Detour: React Dev Tools

• ایالت به طور کلی State in General

• حالت اولیه Initializing State

• مهم! نحو جایگزین IMPORTANT! ALTERNATE SYNTAX

• WTF در مقابل super() است. فوق العاده (لوازم جانبی) WTF is super() Vs. super(props)

• تنظیم وضعیت به درستی Setting State Correctly

• Crash Course: روی رویدادها در React کلیک کنید Crash Course: Click Events in React

• SYNTAX جایگزین PT 2 ALTERNATE SYNTAX PT 2

• تمرین: حالت کلیک EXERCISE: State Clicker

• تمرین: راه حل کلیک کننده را بیان کنید EXERCISE: State Clicker Solution

• الگوی طراحی "State As Props". The "State As Props" Design Pattern

تمرین تاس حالت واکنش React State Dice Exercise

• مقدمه ای بر تمرین تاس Introduction to Dice Exercise

• نوشتن جزء Die Writing the Die Component

• افزودن مولفه RollDice Adding the RollDice Component

• یک ظاهر طراحی RollDice Styling RollDice

• متحرک کردن تاس ها! Animating Dice Rolls!

React State Patterns React State Patterns

• به روز رسانی وضعیت موجود Updating Existing State

• حالت جهش یافته به روش ایمن Mutating State the Safe Way

• حالت طراحی: حالت به حداقل رساندن Designing State: Minimizing State

• حالت طراحی: جریان داده رو به پایین Designing State: Downward Data Flow

• طرح ایالتی مثال: قرعه کشی State Design Example: Lottery

• مثال طراحی حالت: جزء LottoBall State Design Example: LottoBall Component

• مثال طرح ایالتی: جزء قرعه کشی State Design Example: Lottery Component

تمرینات دولتی! State Exercises!

• تمرین حالت 1: سکه بادی State Exercise 1: Coin Flipper

• تمرین حالت 1: محلول بالکن سکه State Exercise 1: Coin Flipper Solution

• حالت تمرین 2: جعبه های رنگی State Exercise 2: Color Boxes

• حالت تمرین 2: راه حل جعبه های رنگی State Exercise 2: Color Boxes Solution

World of React Events The World of React Events

• رویدادهای React معمولاً مورد استفاده قرار می گیرند Commonly Used React Events

• لذت های روش اتصال :( The Joys of Method Binding :(

• اتصال جایگزین با ویژگی های کلاس Alternative Binding With Class Properties

• اتصال با استدلال Binding With Arguments

• انتقال روشها به اجزای کودک Passing Methods to Child Components

• نامگذاری روش والد-فرزند Parent-Child Method Naming

• انحراف سریع: کلیدهای واکنش Quick Detour: React Keys

ورزش جلاد Hangman Exercise

• معرفی تمرین جلاد Introducing The Hangman Exercise

• راهنمای کد شروع Starter Code Walkthrough

• افزودن کلیدها Adding Keys

• ردیابی حدس های نادرست Tracking Incorrect Guesses

• اضافه کردن بازی به پایان رسید Adding Game Over

• افزودن متن جایگزین Adding Alt Text

• تصادفی سازی کلمات Randomizing Words

• اضافه کردن دکمه تنظیم مجدد Adding a Reset Button

• برنده شدن بازی و سبک سازی Making the Game Winnable & Styling

بازی Lights Out Lights Out Game

• معرفی Lights Out Introducing Lights Out

• بررسی کد شروع Exploring the Starter Code

• نمایش صفحه بازی Displaying the Game Board

• سلول های چرخشی Flipping Cells

• برنده شدن در بازی Winning the Game

• سبک دادن به بازی Styling the Game

فرم ها در React Forms in React

• مقدمه ای برای React Forms Intro to React Forms

• فرم های نوشتن با ورودی های متعدد Writing Forms w/ Multiple Inputs

• htmlFor Attribute The htmlFor Attribute

• الگوی طراحی: انتقال داده به سمت بالا Design Pattern: Passing Data Upwards

• با استفاده از کتابخانه UUID Using the UUID Library

تمرین فرم ها Forms Exercise

• مقدمه ای بر تمرین جعبه ساز Introduction to Box Maker Exercise

• افزودن کامپوننت BoxList Adding the BoxList Component

• ایجاد کامپوننت BoxForm Creating the BoxForm Component

• حذف جعبه های رنگی Removing Color Boxes

پروژه فهرست کار Todo List Project

• بررسی اجمالی پروژه Project Overview

• اجزای TodoList و TodoItem TodoList and TodoItem Components

• اضافه کردن NewTodoForm Adding NewTodoForm

• حذف Todos Removing Todos

• ویرایش Todos Editing Todos

• تغییر وضعیت Todo Complete Toggling Todo Completion

• استایل دادن به برنامه Todo Styling the Todo App

ساختمان Yahtzee Building Yahtzee

• معرفی Yahtzee Introducing Yahtzee

• Yahtzee Starter Code Walkthrough Yahtzee Starter Code Walkthrough

• رفع اشکال قفل تاس Fixing the Dice Locking Bug

• خواندن کلاس های قوانین Reading the Rules Classes

• اضافه کردن قوانین جدید Adding In New Rules

• رفع اشکال Re-Rolling Fixing the Re-Rolling Bug

• جلوگیری از استفاده مجدد از امتیاز Preventing Score Reuse

• اضافه کردن توضیحات امتیاز Adding Score Descriptions

• جایگزین کردن متن با نمادهای تاس Replacing Text w/ Dice Icons

• انیمیشن پرتاب تاس Animating Dice Rolls

• لمس نهایی و رفع اشکال Final Touches and Bug Fixes

روش‌های چرخه حیات واکنش React Lifecycle Methods

• معرفی ComponentDidMount Introducing ComponentDidMount

• بارگیری داده ها از طریق AJAX Loading Data Via AJAX

• اضافه کردن لودرهای متحرک Adding Animated Loaders

• بارگیری داده ها با توابع Async Loading Data With Async Functions

• معرفی ComponentDidUpdate Introducing ComponentDidUpdate

• PrevProps و PrevState در ComponentDidUpdate PrevProps and PrevState in ComponentDidUpdate

• معرفی ComponentWillUnmount Introducing ComponentWillUnmount

روش‌های چرخه زندگی و تمرین API LifeCycle Methods & API Exercise

• معرفی پروژه Cards API Introducing the Cards API Project

• درخواست شناسه عرشه Requesting a Deck ID

• واکشی کارت های جدید با AJAX Fetching New Cards with AJAX

• افزودن مؤلفه کارت Adding the Card Component

• به طور تصادفی تبدیل کارت Randomly Transforming Cards

• کارت های یک ظاهر طراحی شده و عرشه Styling Cards and Deck

ساختن برنامه جوک پدر Building the Dad Jokes App

• معرفی پروژه جوک بابا Introducing the Dad Jokes Project

• واکشی جوک های جدید از API Fetching New Jokes From the API

• کامپوننت JokeList یک ظاهر طراحی شده Styling JokeList Component

• جوک های موافق و مخالف Upvoting and Downvoting Jokes

• سبک دادن به مؤلفه جوک Styling the Joke Component

• اضافه کردن رنگ های پویا و ایموجی ها Adding Dynamic Colors and Emojis

• همگام سازی با LocalStorage Syncing with LocalStorage

• رفع اشکال LocalStorage ما Fixing Our LocalStorage Bug

• اضافه کردن یک اسپینر بارگیری Adding a Loading Spinner

• جلوگیری از جوک های تکراری Preventing Duplicate Jokes

• مرتب سازی جوک ها Sorting Jokes

• حالت دادن به دکمه Fetch Styling The Fetch Button

• اضافه کردن انیمیشن ها Adding Animations

روتر واکنش: React Router:

• مقدمه ای برای مسیریابی سمت مشتری Intro to Client-Side Routing

• اضافه کردن اولین مسیر ما Adding Our First Route

• با استفاده از Switch و Exact Using Switch and Exact

• مقدمه ای بر مؤلفه پیوند Intro to the Link Component

• افزودن در NavLinks Adding in NavLinks

• Render prop در مقابل Component prop در Routes Render prop vs. Component prop in Routes

تمرین ماشین فروش Vending Machine Exercise

• مقدمه ای بر تمرین ماشین فروش Intro to Vending Machine Exercise

• اضافه کردن مسیرهای ماشین فروش Adding The Vending Machine Routes

• افزودن لینک ها Adding the Links

• ایجاد نوار ناوبری Creating the Navbar

• مفهوم جدید: Props.children NEW CONCEPT: Props.children

الگوهای روتر React React Router Patterns

• کار با پارامترهای URL Working with URL Params

• پارامترهای مسیر چندگانه Multiple Route Params

• افزودن مسیر 404 یافت نشد Adding a 404 Not Found Route

• نوشتن یک فرم جستجوی ساده Writing a Simple Search Form

• مولفه تغییر مسیر The Redirect Component

• فشار دادن به تاریخچه پایه Pushing onto the History Prop

• مقایسه تاریخچه و تغییر مسیر Comparing History and Redirect

• با مولفه مرتبه بالاتر روتر withRouter Higher Order Component

• پیاده سازی دکمه برگشت Implementing a Back Button

تمرینات روتر قسمت 2 Router Exercises Part 2

• مقدمه ورزش Exercise Introduction

• کار با بوت استرپ در React Working with Bootstrap in React

• نوشتن مؤلفه DogList Writing the DogList Component

• افزودن مؤلفه DogDetails Adding the DogDetails Component

• ایجاد مولفه Navbar ما Creating Our Navbar Component

• بازسازی و استخراج مسیرهای ما Refactoring & Extracting Our Routes

• چند ترفند کوچک A Couple Small Tweaks

• استایل دادن به برنامه Styling the App

The Massive Color Project Pt 1 The Massive Color Project Pt 1

• معرفی اپلیکیشن رنگ Introducing the Color App

• مطالب جدیدی که در این پروژه پوشش می دهیم The New Stuff We Cover in This Project

• پیدا کردن کد نهایی پروژه Finding the Final Project Code

• ایجاد مولفه پالت Creating the Palette Component

• اصول جعبه رنگ Color Box Basics

• جعبه رنگ یک ظاهر طراحی شده Styling Color Box

• در حال کپی کردن در کلیپ بورد Copying to Clipboard

• کپی انیمیشن روکش Copy Overlay Animation

• ایجاد سایه های رنگ Generating Shades of Colors

• اضافه کردن لغزنده رنگ Adding Color Slider

• حالت دادن به لغزنده رنگ Styling the Color Slider

• افزودن کامپوننت نوار ناوبری Adding Navbar Component

The Massive Color Project Pt 2 The Massive Color Project Pt 2

• مقدمه ای بر رابط کاربری مواد و افزودن انتخاب Intro to Material UI & Adding Select

• اضافه کردن اسنکبار Adding Snackbar

• اضافه کردن پاورقی پالت Add Palette Footer

• یکپارچه سازی روتر React Integrating React Router

• پیدا کردن پالت ها Finding Palettes

• PaletteList و پیوندها PaletteList and Links

JSS و withStyles (برنامه رنگی) JSS & withStyles (Color App)

• معرفی withStyles HOC Introducing withStyles HOC

• سبک مینی پالت با JSS Styling MiniPalette with JSS

• Styling PaletteList با JSS Styling PaletteList with JSS

• در حال تکمیل MiniPalette Finishing Up MiniPalette

The Massive Color Project Pt 3 The Massive Color Project Pt 3

• پیوند به پالت ها Linking To Palettes

• پالت تک رنگ طوفان فکری Brainstorming Single Color Palette

• افزودن لینک های بیشتر Adding More Links

• ایجاد پالت تک رنگ Creating Single Color Palette

• نمایش سایه ها در پالت تک رنگ Displaying Shades in Single Color Palette

• اضافه کردن نوار نوار و پاورقی Adding Navbar and Footer

• جعبه بازگشت را اضافه کنید Add Go Back Box

• رنگ متن پویا با درخشندگی Dynamic Text Color w/ Luminosity

• بازسازی سبک های بیشتر Refactoring More Styles

• Finish Refactoring Color Box Finish Refactoring Color Box

The Massive Color Project Pt 4 The Massive Color Project Pt 4

• سبک های پالت Refactor Refactor Palette Styles

• استایل ها را به پوشه جدید منتقل کنید Move Styles Into New Folder

• Refactor Navbar CSS Refactor Navbar CSS

• مروری بر PaletteForm Overview of PaletteForm

• اضافه کردن NewPaletteForm Adding NewPaletteForm

• افزودن کشو کشویی Adding Slide-Out Drawer

• افزودن مولفه انتخابگر رنگ Adding Color Picker Component

• اتصال انتخابگر رنگ به دکمه Connecting Color Picker to Button

• ایجاد جعبه رنگ قابل کشیدن Creating Draggable Color Box

• معرفی Form Validator Introducing Form Validator

The Massive Color Project Pt 5 The Massive Color Project Pt 5

• ذخیره پالت های جدید Saving New Palettes

• فرم نام پالت را اضافه کنید Add Palette Name Form

• جعبه رنگ قابل کشیدن یک ظاهر طراحی شده Styling Draggable Color Box

• اضافه کردن رنگ جعبه حذف Adding Color Box Delete

• زمان کشیدن و رها کردن است! It's Drag and Drop Time!

• پالت پاک کردن و دکمه های رنگی تصادفی Clear Palette and Random Color Buttons

• New Palette Nav را استخراج کنید Extract New Palette Nav

• استخراج مولفه انتخابگر رنگ Extract Color Picker Component

• نوار فرم پالت یک ظاهر طراحی شده Styling Palette Form Nav

• انتخابگر رنگ یک ظاهر طراحی شده Styling Color Picker

پروژه رنگ عظیم Pt 6 The Massive Color Project Pt 6

• اضافه کردن Modals/Dialogs Adding Modals/Dialogs

• گفتگوی سبک Styling Dialog

• بستن فرم و افزودن ایموجی Closing Form & Adding Emoji

• تکمیل فرم انتخاب کننده ایموجی Finish Emoji Picker Form

• انتقال سبک های JSS به خارج Moving JSS Styles Out

• بهینه سازی سبک های فرم Tweak Form Styles

• ذخیره در LocalStorage Saving to LocalStorage

• اضافه کردن دکمه حذف MiniPalette Adding MiniPalette Delete Button

• حذف MiniPalette را تمام کنید Finish MiniPalette Delete

• ایجاد کمک کننده اندازه های پاسخگو Create Responsive Sizes Helper

• جعبه رنگ را پاسخگو کنید Make Color Box Responsive

• Form & Navbar را پاسخگو کنید Make Form & Navbar Responsive

The Massive Color Project Pt 7 The Massive Color Project Pt 7

• لیست پالت را پاسخگو کنید Make Palette List Responsive

• اضافه کردن پس زمینه SVG Add SVG Background

• Fade Animations w/Transition Group Fade Animations w/ Transition Group

• دیالوگ تایید را حذف کنید Delete Confirmation Dialog

• رفع اشکال حذف/کشیدن Fix Delete/Drag Bug

• متحرک سازی انتقال مسیر Animating Route Transitions

• Refactoring انتقال مسیر Refactoring Route Transitions

• بهینه سازی با کامپوننت خالص Optimizing w/ PureComponent

• تمیز کردن چیزها Cleaning Things Up

• تمیز کردن بیشتر! More Cleaning Up!

• رفع مشکلات با فرم پالت جدید Fix Issues w/ New Palette Form

• جلوگیری از تکرار رنگ های تصادفی Prevent Duplicate Random Colors

معرفی React Hooks Introducing React Hooks

• معرفی Hooks & useState Intro to Hooks & useState

• ساختن یک هوک سفارشی: useToggleState Building a Custom Hook: useToggleState

• ساختن یک هوک سفارشی: useInputState Building a Custom Hook: useInputState

• قلاب useEffect The useEffect Hook

• واکشی داده ها با قلاب useEffect Fetching Data w/ the useEffect Hook

پروژه React Hooks React Hooks Project

• معرفی پروژه هوکس Intro to Hooks Project

• اضافه کردن فرم ما با قلاب Adding Our Form With Hooks

• افزودن مؤلفه مورد Todo Adding Todo Item Component

• جابجایی و حذف با قلاب Toggling and Deletion w/ Hooks

• ویرایش با قلاب Editing w/ Hooks

• ترفندهای سبک کوچک Small Style Tweaks

• LocalStorage با قلاب UseEffect LocalStorage w/ UseEffect Hook

• Refactoring به یک قلاب سفارشی Refactoring to a Custom Hook

• ایجاد قلاب UseLocaslStorateState ما Creating our UseLocaslStorateState Hook

معرفی Context API! Introducing The Context API!

• به کجا می رویم Where We Are Heading

• کد این بخش! THE CODE FOR THIS SECTION!

• حتی متن چیست؟ What Even is Context?

• افزودن یک نوار ناوبری پاسخگو به برنامه زمینه ما Adding a Responsive Navbar To Our Context App

• افزودن یک فرم پاسخگو به برنامه زمینه ما Adding a Responsive Form to our Context App

• مقدمه ای بر زمینه و ارائه دهندگان Intro to Context and Providers

• مصرف یک زمینه Consuming A Context

• به روز رسانی یک متن به صورت پویا Updating A Context Dynamically

• نوشتن متن زبان Writing the Language Context

• مصرف 2 زمینه: جزء مرتبه بالاتر را وارد کنید Consuming 2 Contexts: Enter the Higher Order Component

استفاده از Context با Hooks Using Context with Hooks

• کد این بخش THE CODE FOR THIS SECTION

• کد این بخش! THE CODE FOR THIS SECTION!

• معرفی useContext Hook Introducing the useContext Hook

• مصرف زمینه های متعدد با قلاب Consuming Multiple Contexts w/ Hooks

• بازنویسی یک ارائه دهنده زمینه با قلاب Rewriting a Context Provider w/ Hooks

• ارائه دهندگان زمینه با قلاب های سفارشی Context Providers w/ Custom Hooks

• "Hokify-ing" بقیه برنامه "Hookify-ing" the Rest of the App

مدیریت حالت با استفاده از کاهش دهنده و استفاده از متن State Management w/ useReducer & useContext

• مهم: کد را از اینجا دریافت کنید! IMPORTANT: GET THE CODE HERE!

• اضافه کردن در زمینه Todos Adding In Todos Context

• مصرف زمینه Todo Consuming the Todo Context

• مسائل با رویکرد فعلی ما The Issues w/ Our Current Approach

• WTF یک کاهش دهنده است WTF Is a Reducer

• اولین استفاده از Reducer مثال First useReducer Example

• تعریف Todo Reducer ما Defining our Todo Reducer

• تقسیم به 2 زمینه Splitting Into 2 Contexts

• بهینه سازی با یادداشت Optimizing w/ Memo

• هوک سفارشی: Reducer + LocalStorage Custom Hook: Reducer + LocalStorage

JS بعدی Next JS

• مقدمه برای بعدی Intro to Next

• رندر سمت سرور چیست؟ What is Server Side Rendering?

• شروع به کار با بعدی Getting Started w/ Next

• مسیریابی پایه در Next Basic Routing in Next

• مؤلفه پیوند بعدی Next's Link Component

• پیوندهای بدون تگ لنگر Links Without Anchor Tags

• کامپوننت ها در مقابل صفحات Components Vs. Pages

• لغو پیش فرض _app.js Overriding the Default _app.js

بعدی: Fetching & Server API Next: Fetching & Server API

• معرفی getInitialProps Introducing getInitialProps

• واکشی پست ها با getInitialProps Fetching Posts w/ getInitialProps

• رشته های پرس و جو در Next Query Strings in Next

• با مولفه مرتبه بالاتر روتر withRouter Higher Order Component

• واکشی نظرات Fetching Comments

• "به عنوان" Prop The "as" Prop

• سرور سفارشی بدون اکسپرس Custom Server Without Express

• مسیرهای سفارشی سمت سرور با اکسپرس Custom Server-Side Routes w/ Express

امتیاز: Webpack Mini Course - نسخه ساده خود برنامه Create React Bonus: Webpack Mini Course - Your Own Simple Version of Create React App

• وب پک چیست؟؟ What Is Webpack??

• نصب و اجرای Webpack Installing and Running Webpack

• واردات، صادرات، و بسته وب Imports, Exports, and Webpack

• پیکربندی بسته وب Configuring Webpack

• بارگذارهای بسته وب، CSS و SASS Webpack Loaders, CSS, & SASS

• Cache Busting و Plugins Cache Busting and Plugins

• تقسیم توسعه و تولید Splitting Dev & Production

• Html-loader، file-loader و Clean Webpack Plugin Html-loader, file-loader, and Clean Webpack Plugin

• چندین امتیاز ورودی Multiple Entry Points

• CSS را استخراج و کوچک کنید Extract and Minify CSS