React Front To Back React Front To Back React فرانت تو بک React آموزش فرانت اند React توسعه وب React پروژه های عملی React کتابخانه جاوا اسکریپت React Front-end آموزش React یادگیری React React فارسی - آخرین آپدیت

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

معرفی دوره Course Introduction

• به دوره خوش آمدید Welcome To The Course

• React چیست؟ What Is React?

• تنظیم محیط کار Setting Up Our Environment

شروع پروژه 1 [Github Finder] و راه اندازی React Project 1 Start [Github Finder] & React Setup

• معرفی پروژه Project Introduction

• کد و منابع Code & Resources

• ایجاد React App و ساختار فایل Create React App & File Structure

• پاکسازی و آماده سازی CRA CRA Cleanup & Prepare

• مقدمه ای بر JSX و Fragments Intro To JSX & Fragments

• عبارات و شرط ها در JSX Expressions & Conditionals In JSX

کامپوننت ها، State و Props Components, State & Props

• کامپوننت ها، Props و PropTypes Components, Props & PropTypes

• شروع کار با State کامپوننت Getting Started With Component State

• لیست ها و انتقال State با Props Lists & Passing State With Props

• کامپوننت های تابعی Stateless Stateless Functional Components

• درخواست های HTTP و به روز رسانی State HTTP Requests & Updating State

• کامپوننت Spinner و Refactoring Spinner Component & Refactoring

• متغیرهای محیطی Environment Variables

رویدادها، انتقال Props، React Router و موارد دیگر Events, Passing Props, React Router & More

• رویدادها و کامپوننت Search Events & Search Component

• انتقال Props و جستجو Passing Props Up & Search

• پاک کردن کاربران از State Clear Users From State

• Alert State و کامپوننت Alert State & Component

• تنظیم React Router React Router Setup

• کامپوننت Single User و داده ها Single User Component & Data

• UI و چیدمان کامپوننت User User Component UI & Layout

• Repos و کامپوننت RepoItem و داده ها Repos & RepoItem Component & Data

Refactoring به Hooks و Context Refactoring To Hooks & Context

• مروری بر Hooks و Context Overview of Hooks & Context

• تبدیل کلاس Search به تابع با Hook useState Search Class to Function With useState Hook

• تبدیل کلاس User به تابع با Hook useEffect User Class to Function With useEffect Hook

• کامپوننت App Class به تابع App Class to Function Component

• پیاده سازی Context Implementing Context

• ایجاد Reducer و Actions Create Reducer & Actions

• انتقال User State به Context Moving User State To Context

• انتقال Repos State به Context Moving Repos State To Context

• فرآیند Alert Context Alert Context Workflow

• کامپوننت های Home و NotFound Home & NotFound Components

• آماده سازی و استقرار در Netlify Prepare & Deploy To Netlify

شروع پروژه 2 [Contact Keeper - MERN] و راه اندازی سرور Express Project 2 Start [Contact Keeper - MERN] & Express Server Setup

• معرفی پروژه Project Introduction

• کد و منابع Code & Resources

• تنظیم MongoDB Atlas MongoDB Atlas Setup

• وابستگی ها و سرور Express Basic Dependencies & Basic Express Server

• Routes Backend Backend Routes

• اتصال MongoDB به برنامه ما Connect MongoDB To Our App

کاربران Backend، مخاطبین و احراز هویت JWT Backend Users, Contacts & JWT Authentication

• User Model و اعتبار سنجی User Model & Validation

• رمزنگاری رمزهای عبور و مسیر ثبت نام Hash Passwords & Register Route

• ایجاد و پاسخ با JSON Web Token Create & Respond With JSON Web Token

• مسیر احراز هویت Authenticate Route

• Auth Middleware و محافظت از مسیرها Auth Middleware & Protecting Routes

• Contact Model و دریافت مسیر مخاطبین Contact Model & Get Contacts Route

• مسیر افزودن مخاطب Add Contact Route

• مسیرهای بروزرسانی و حذف مخاطبین Contact Update & Delete Routes

تنظیمات سمت کلاینت و UI مخاطبین Client Side Setup & Contacts UI

• راه اندازی React و Concurrently Setup React & Concurrently

• پاکسازی، Navbar و تنظیم Router Cleanup, Navbar & Router Setup

• Contacts Context و State سراسری Contacts Context & Global State

• Contacts و کامپوننت ContactItem Contacts & ContactItem Components

• کامپوننت ContactForm ContactForm Component

• حذف مخاطب از UI Delete Contact From UI

• تنظیم و پاک کردن مخاطب فعلی Set & Clear Current Contact

• ویرایش و بروزرسانی Action مخاطبین Edit & Update Contact Action

• فرم فیلتر مخاطبین و State Contact Filter Form & State

• انیمیشن افزودن و حذف پایه Basic Add & Delete Animation

احراز هویت React/Express React/Express Authentication

• Auth Context و Initial State Auth Context & Initial State

• فرم های ثبت نام و ورود به سیستم Register & Login Forms

• Alert Context، State و کامپوننت Alert Context, State & Component

• ثبت نام کاربر User Registration

• بارگذاری کاربر و تنظیم توکن Load User & Set Token

• ورود کاربر به سیستم User Login

• خروج از سیستم و Navbar Logout & Navbar

• کامپوننت PrivateRoute PrivateRoute Component

ادغام API مخاطبین و استقرار Contacts API Integration & Deploy

• افزودن مخاطب Add Contact

• دریافت و پاک کردن مخاطبین Get & Clear Contacts

• حذف مخاطبین Delete Contacts

• بروزرسانی مخاطبین Update Contacts

• آماده سازی و استقرار در Heroku Prepare & Deploy To Heroku

شروع پروژه 3 [ITLogger - Redux] - کامپوننت ها و UI Project 3 Start [ITLogger - Redux] - Components & UI

• معرفی پروژه Project Introduction

• کد و منابع Code & Resources

• تنظیم React و JSON-Server React & JSON-Server Setup

• تنظیم Materialize Materialize Setup

• کامپوننت SearchBar و Logs SearchBar & Logs Component

• کامپوننت های LogItem و Preloader LogItem & Preloader Components

• کامپوننت های AddBtn و AddLogModal AddBtn & AddLogModal Components

• کامپوننت های Edit و Tech Modal Edit & Tech Modal Components

Redux برای مدیریت State Redux For State Management

• تنظیم Redux Store و Provider Redux Store & Provider Setup

• Logs Reducer، Actions و Types Logs Reducer, Actions & Types

• اتصال Redux به یک کامپوننت Connecting Redux To a Component

• افزودن Logs Add Logs

• حذف Logs Delete Logs

• بروزرسانی Logs Update Logs

• جستجوی Logs Search Logs

Technicians State و کامپوننت ها Technicians State & Components

• Techs Reducer، Action و کامپوننت Techs Reducer, Action & Component

• کامپوننت Tech Options Select Tech Options Select Component

• افزودن Technicians Add Technicians

• حذف Technicians Delete Technicians