React & Next.js: از مبتدی تا حرفه ای در زمان کوتاهی

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

مقدمه Introduction

• React چیست؟ What is React ?

• راه اندازی محیط Environment Setup

• مهم: مخزن کد منبع IMPORTANT: Source Code Repository

React Basics React Basics

• ایجاد پروژه React Creating React Project

• ایجاد اولین کامپوننت واکنش Creating Our First React Component

• اجزای تابع Function Components

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

• نمایش داده ها Displaying Data

• رندر مشروط Conditional Rendering

• مدیریت رویداد Event Handling

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

• پروژه 1 - کارت پروفایل Project 1 - Profile Card

• اعتبار سنجی لوازم Props Validation

• ایالت State

• ایالت کهنه Stale State

• React Basics Quiz React Basics Quiz

پروژه 2 - مدیر وظیفه Project 2 - Task Manager

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

• مؤلفه TaskList TaskList Component

• مؤلفه TaskInput TaskInput Component

• جزء برنامه App Component

• اضافه کردن رویداد Handling Adding Event Handling

• یک ظاهر طراحی شده Styling

React Hooks React Hooks

• مقدمه ای بر React Hooks Introduction to React Hooks

• هوک زمینه Context Hook

• قلاب کاهنده Reducer Hook

• پیگیری پروژه 2: استفاده از کاهش دهنده ها Project 2 Follow Up: Using Reducers

• useRef useRef

• useMemo useMemo

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

• React Hooks Quiz React Hooks Quiz

عوارض جانبی در React Side Effects in React

• مقدمه ای بر عوارض جانبی Introduction to Side Effects

• useEffect Hook useEffect Hook

• useEffect با Dependecies useEffect with Dependecies

• توابع پاکسازی Cleanup Functions

• آزمون عوارض جانبی Side Effects Quiz

پروژه 3 - SpaceX ردیاب را راه اندازی کرد Project 3 - SpaceX Launches Tracker

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

• اضافه کردن صفحه بندی Adding Pagination

• طراحی وب سایت Styling the Website

اشکال زدایی و استقرار برنامه های React Debugging and Deploying React Applications

• React Development Tools React Development Tools

• استقرار در صفحات Github Deploying to Github Pages

• استقرار با Vercel Deploying With Vercel

استفاده از Tailwind CSS با React Using Tailwind CSS with React

• Tailwind CSS چیست؟ What is Tailwind CSS ?

• حاشیه و بالشتک Margin and Padding

• رنگ ها در Tailwind Colors in Tailwind

• اندازه و رنگ فونت Font Size and Color

• رنگ پس زمینه Background Color

• سایه ها Shadows

• شبکه ها Grids

• رویداد شناور Hover Event

• راه اندازی Tailwind CSS با React Setting Up Tailwind CSS with React

• پروژه 4 - نمای کلی پروژه گالری کارت Project 4 - Card Gallery Project Overview

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

• ایجاد گالری کارت Creating the Cards Gallery

• لمس نهایی Final Touches

• مسابقه باد دم Tailwind Quiz

GraphQL با React GraphQL with React

• مقدمه ای بر GraphQL Introduction to GraphQL

• GitHub GraphQL API GitHub GraphQL API

• ایجاد یک توکن شخصی Github Creating a Github Personal Token

• راه اندازی آپولو کلاینت Setting Up Apollo Client

• بازیابی مخازن کاربر Github از طریق GraphQL Retrieving Github User Repositories via GraphQL

React The Legacy Way: Class Components React The Legacy Way: Class Components

• مقدمه ای بر اجزای کلاس Introduction to Class Components

• مدیریت وضعیت در اجزای کلاس Managing State in Class Components

• مولفه های کلاس روش های چرخه زندگی Class Components Life-Cycle Methods

• آزمون اجزای کلاس React React Class Components Quiz

پروژه 5 - داشبورد آب و هوا با استفاده از اجزای کلاس Project 5 - Weather Dashboard Using Class Components

• واکشی داده های آب و هوا از طریق OpenWeather API Fetching the Weather Data via OpenWeather API

• نوشتن کد JSX Writing the JSX code

• پیاده سازی رویداد Handlers Implementing the Event Handlers

روتر واکنش React Router

• مقدمه ای بر React Router Introduction to React Router

• ناوبری با NavLink Navigation with NavLink

• مسیریابی تودرتو Nested Routing

• پیمایش به صورت برنامه ای Navigating Programmatically

• پارامترهای URL URL Parameters

• آزمون روتر React React Router Quiz

پروژه 6 - وب سایت خرید آنلاین Project 6 - Online Shopping Website

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

• راه اندازی پروژه Setting Up the Project

• داده های JSON را ایجاد کنید Create the JSON Data

• راه اندازی React Router Setting Up React Router

• ایجاد صفحه اصلی Creating the Home Page

• ایجاد صفحه جزئیات محصول Creating the Product Detail Page

• ایجاد صفحه پروفایل Creating the Profile Page

با استفاده از Next.js Using Next.js

• معرفی Next.js Introduction to Next.js

• مهم: کد منبع پروژه Next.js IMPORTANT: Next.js Project Source Code

• ایجاد پروژه با Next.js Creating a Project with Next.js

• یک ظاهر طراحی شده Styling

• بهینه سازی فونت ها Fonts Optimization

• بهینه سازی تصاویر Optimizing Images

• طرح بندی ها و صفحات Layouts and Pages

• ناوبری با پیوندها Navigation with Links

• ایجاد پایگاه داده و استقرار Creating a Database and Deploying

• واکشی داده ها از پایگاه داده Fetching Data from the Database

پروژه 7 - ساخت وب سایت وبلاگ با Next.js Project 7 - Building a Blog Website with Next.js

• مهم: کد منبع پروژه IMPORTANT: Project's Source Code

• پایگاه داده PostgreSQL را در Supabase راه اندازی کنید Set Up PostgreSQL Database on Supabase

• اتصال به پایگاه داده با Prisma Connecting to the Database with Prisma

• ایجاد API Posts Creating the Posts API

• ایجاد صفحه پست ها Creating the Posts Page

• استایل دادن به برنامه با Tailwind CSS Styling the Application with Tailwind CSS

• استقرار برنامه در Vercel Deploying the Application to Vercel

• یک API برای افزودن پست ایجاد کنید Create an API for Adding Posts

• صفحه "افزودن پست" را ایجاد کنید Create the "Add Post" Page

• یک استقرار جدید در Vercel ایجاد کنید Create a New Deployment on Vercel

• برای بهبود کد، Layout را اضافه کنید Add Layout to Improve the Code