آموزش ساخت پروژه های مدرن با React

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

مقدمه Introduction

• آنچه شما باید بدانید What you should know

• بیایید با React پروژه های مدرن بسازیم Let's build modern projects with React

1. راه اندازی پروژه 1. Project Setup

• فایل های راه اندازی و تمرین اولیه Basic setup and exercise files

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

• چرا از اکوسیستم React استفاده کنیم؟ Why use the React ecosystem?

• با ابزارهای اکوسیستم React آشنا شوید Meet the React ecosystem tools

3. ایجاد پروژه های React از ابتدا 3. Creating React Projects from Scratch

• نقطه ورود React The React entry point

• افزودن اجزای بیشتر Adding more components

• ساخت یک پروژه React از ابتدا Building a React project from scratch

• استفاده از بسته وب برای ساخت برنامه React Using webpack to build a React app

• ایجاد یک اسکریپت React Creating a React script

4. ایجاد پروژه با Vite، Next.js، Remix و موارد دیگر 4. Creating Projects with Vite, Next.js, Remix, and More

• با Create React App یک پروژه ایجاد کنید Create a project with Create React App

• یک پروژه با Next.js ایجاد کنید Create a project with Next.js

• با Vite یک پروژه ایجاد کنید Create a project with Vite

• با ریمیکس پروژه بسازید Create a project with Remix

5. ایجاد یک پروژه پایه 5. Creating a Basic Project

• با برنامه نمونه آشنا شوید Meet the sample app

• ایجاد کامپوننت NewTodoForm Creating the NewTodoForm component

• قرار دادن برنامه در کنار هم Putting the app together

• ایجاد مؤلفه TodoListItem Creating the TodoListItem component

• ایجاد کامپوننت TodoList Creating the TodoList component

6. اضافه کردن Redux 6. Adding Redux

• ایجاد کاهنده ها Creating reducers

• Redux DevTools Redux DevTools

• Redux چگونه کار می کند؟ How does Redux work?

• چرا به Redux نیاز داریم؟ Why do we need Redux?

• بارگیری داده ها از فروشگاه Loading data from the store

• ایجاد اکشن های Redux Creating Redux actions

• ارسال اقدامات Redux Dispatching Redux actions

• افزودن Redux به برنامه React Adding Redux to a React app

• چالش: اضافه کردن یک جریان Redux Challenge: Adding a Redux flow

• افزودن محموله های اکشن Adding action payloads

• راه حل: اضافه کردن یک جریان Redux Solution: Adding a Redux flow

7. جایگزین های Redux 7. Alternatives to Redux

• مدیریت دولتی با پس زدن State management with Recoil

• مدیریت دولتی با MobX State management with MobX

8. مقابله با عوارض جانبی 8. Dealing with Side Effects

• چالش: استفاده از Thunks برای به روز رسانی منابع سرور Challenge: Using Thunks to update server resources

• بارگیری داده ها با Thunks Loading data with Thunks

• راه حل: استفاده از Thunks برای به روز رسانی منابع سرور Solution: Using Thunks to update server resources

• Refactoring کاهش دهنده کارها Refactoring the to-dos reducer

• استفاده از Thunks برای ایجاد منابع سرور Using Thunks to create server resources

• Redux-Thunk چگونه کار می کند؟ How does Redux-Thunk work?

• پیگیری وضعیت بارگیری Keeping track of the loading state

• چرا به Redux-Thunk نیاز داریم؟ Why do we need Redux-Thunk?

• استفاده از Thunks برای حذف منابع سرور Using Thunks to delete server resources

• Todos API The Todos API

9. انتخابگرها 9. Selectors

• با استفاده از تابع createSelector Using the createSelector function

• ترکیب انتخابگرها Combining selectors

• ایجاد انتخابگرها Creating selectors

• چرا به انتخابگرها نیاز داریم؟ Why do we need selectors?

10. Styled-Components 10. Styled-Components

• چرا به کامپوننت های استایلد نیاز داریم؟ Why do we need styled-components?

• ایجاد یک کامپوننت استایل دار Creating a styled-component

• انتقال لوازم به اجزای مدل‌دهی شده Passing props to styled-components

11. آزمایش 11. Testing

• تست انتخابگرها Testing selectors

• تست مولفه های سبک Testing styled-components

• تست کاهنده ها Testing reducers

• آزمایش اکوسیستم های React Testing React ecosystems

نتیجه گیری Conclusion

• مراحل بعدی ساخت با React Next steps for building with React