آموزش React برای مبتدیان - از HTML، CSS و جاوا اسکریپت تا React.js - آخرین آپدیت

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

مقدمه Introduction

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

• React چیست و چرا باید آن را یاد بگیریم؟ What is React & why learn it ?

• نمایش React React DEMO

• قبل از React چه چیزهایی را باید بدانید What you need to know before React

• راه‌اندازی محیط برای React JS Environmental Setup for React JS

• لینک‌ها و منابع Links & Resources

مبانی React React Basics

• بررسی بخش Section overview

• وبسایت سنتی HTML CSS & JS Traditional HTML CSS & JS Website

• اضافه کردن React به وبسایت خود Adding React to your website

• رندر کردن یک کامپوننت React Render a react component

• JSX چیست What is JSX

• مقادیر و متغیرهای پویا در JSX JSX Dynamic Values and Variables

• توابع و رویدادها در JSX Functions and Events in JSX

• استفاده از تصاویر Using Images

Create React App Create React App

• بررسی بخش Section overview

• نحوه ایجاد یک برنامه React How to create a React Application

• توضیح ساختار React React Structure explained

• نحوه شروع، اجرا و توقف یک سرور توسعه React How to start run and stop a react development server

نحوه استفاده از استایل در React How to use Style in React

• بررسی بخش Section overview

• استفاده از ویژگی style در React Using the style attribute in React

• استفاده از CSS در React Using CSS in React

کامپوننت‌ها و Props در React React Components and Props

• بررسی بخش Section overview

• کامپوننت‌ها چه هستند و چگونه یک کامپوننت React ایجاد کنیم What are Components and how to create a react components

• Props چه هستند What are Props

• Children Prop Children Prop

• ایجاد یک کامپوننت Card قابل استفاده مجدد Create a reusable Card Component

• استفاده از آیکون‌ها در React Using Icons in React

• استفاده از Bootstrap در React Using Bootstrap in React

• ایجاد یک کامپوننت Button Create a Button Component

• ویژگی های تابع یا همان مدیریت‌کننده‌های رویداد Function props aka event handlers

• تمرین: جایگزینی بقیه کارت‌ها Assignment: Replace the rest of the cards

پروژه: پلتفرم آموزش الکترونیکی Project: E-Learning Platform

• بررسی بخش Section overview

• ایجاد برنامه Create the App

• ایجاد یک کامپوننت Title Create a Title Component

• کامپوننت Header با child props Header Component with child props

• کامپوننت Button با مدیریت‌کننده‌های رویداد کلیک Button component with click event handlers

State و useState Hook در React React State and useState Hook

• بررسی بخش Section overview

• State چیست و چگونه از useState در React استفاده کنیم What is State and how to useState in React

• مثال با useState Hook Example with useState Hook

• ایجاد یک کامپوننت Modal و اعمال useState Create a Modal Comp and apply useState

• گسترش کامپوننت‌ها و state Extend components and state

• استفاده از List در React Using List in React

• useState روی لیست‌ها useState on Lists

• اضافه کردن تمام پیشنهادات به لیست Add all offers to the list

کار با DATA و React useEffect Hook Working with DATA and the React useEffect Hook

• بررسی بخش Section overview

• ایجاد یک کامپوننت Testimonial Create a Testimonial component

• کار با داده‌های JSON Working with JSON data

• useEffect چیست و چگونه از آن استفاده کنیم What is useEffect and how to use it

• آرایه Dependency در useEffect Dependency Array of useEffect

• به روز رسانی testimonials با useEffect Update testimonials with useEffect

• اضافه کردن رتبه‌بندی ستاره با useState و map Add Star rating with useState and map

Element Reference با React useRef Hook Element Reference with React useRef Hook

• بررسی بخش Section overview

• useRef چیست و چگونه از آن استفاده کنیم What is useRef and how to use it

• پیمایش صفحه با useRef Page navigation with useRef

• دکمه اسکرول به بالای صفحه با useRef Scroll Back To Top Button with useRef

ارسال فرم‌ها در React Forms submissions in React

• بررسی بخش Section overview

• برچسب‌ها و ورودی‌های فرم Forms label and inputs

• کامپوننت گروه فرم Form group component

• مقادیر ورودی و تغییر مقادیر Input values and changing values

• ارجاع به ورودی‌ها با useRef Referencing inputs with useRef

• ارسال فرم و بازنشانی Form submission and reset

• اعتبارسنجی ساده ورود و فرم Simple Login and Form validation

• ایجاد یک کامپوننت فرم ثبت نام Create a Registration Form Component

• ثبت نام فرم ساده Simple Form registration

مدیریت خطا در React Error handling in React

• بررسی بخش Section overview

• پرتاب خطا با استفاده از try catch Throw error using try catch

• در انتظار پاسخ سرور Waiting for server response

• خطا از طریق واکشی داده Error by data fetching

• کامپوننت مرزهای خطای سفارشی Custom Error Boundaries Component

بازسازی برنامه React Refactoring React App

• بررسی بخش Section overview

• چرا باید کد خود را بازسازی کنید Why should you refactor your code

• بازسازی کامپوننت Header Refactoring the Header Component

• بازسازی بخش Categories Refactored the Categories Section

• بازسازی بخش Offers Refactored the Offers Section

پیمایش با React Router Navigating with React Router

• بررسی بخش Section overview

• React Router چیست What is React Router

• نحوه نصب و افزودن Router How to install and adding a Router

• ایجاد Root Route Create the Root Route

• مدیریت خطاهای Not Found Handling Not Found Errors

• ایجاد Routes Creating Routes

• Routes تو در تو، children و Outlet Nested Routes, children and Outlet

• مسیریابی سمت کلاینت Client side Routing

• استایل دهی لینک فعال Active Link Styling

• The index Route The index Route

• منابع Resources

• اضافه کردن Login به Navigation Add Login to the Navigation

به اشتراک گذاری داده برنامه با React useContext App Data Sharing with React useContext

• بررسی بخش Section overview

• مشکل Prop drilling The Problem with Prop drilling

• useContext چیست و چرا از آن استفاده کنیم What is useContext and why use it

• مثال React useContext Hook React useContext Hook example

• ایجاد یک تم Dark Create a Dark Theme

• تغییر تم Dark Toggle Dark Theme

• تغییر آیکون Arrow در تم Dark Change Arrow Icon on Dark Theme

• تغییر Categories در تم Dark Toggle Categories on Dark Theme

• تغییر Offers در تم Dark Toggle Offers on Dark Theme

کامپوننت‌های استایل‌بندی شده React React Styled Components

• بررسی بخش کامپوننت‌های استایل‌بندی شده React Section overview of React Styled Components

• درباره کامپوننت‌های استایل‌بندی شده React About React Styled Components

• مزایا و معایب کامپوننت‌های استایل‌بندی شده React Pros and cons of React Styled Components

• مثال کامپوننت‌های استایل‌بندی شده React React Styled Components example

• ایجاد یک کامپوننت ModalStyle Create a ModalStyle Component

پروژه - برنامه حقوق و دستمزد کارمندان Project - Employee Payroll App

• بررسی پروژه Project overview

• راه اندازی پروژه Project setup

• ایجاد اجزای پروژه Creating project components

• سیستم مسیریابی / مسیریابی برنامه App Routing / Navigation system

• صفحه Root ، Index و Error برنامه App Root, Index and Error page

• پیمایش برنامه با مسیرها App Navigation with routs

• کامپوننت استایل‌شده page wrapper Page wrapper styled component

• فرم تماس برنامه App Contact form

• اعتبارسنجی فرم تماس Contact form validation

• ارسال موفقیت آمیز فرم تماس Contact form Successful submission

• کامپوننت صفحه اصلی Home page component

• ایجاد یک کامپوننت فرم ورود Create a Login form component

• ورود با useContext Login with useContext

• نمایش اطلاعات شخصی و خروج از سیستم در تأیید اعتبار Display Personal and Logouton Authentication

• اعتبارسنجی ورود با کامپوننت و متن استایل‌شده Login validation with styled component and context

• ایجاد یک کامپوننت لیست شخصی Create a Personal List component

• داده های شخصی و ذخیره سازی Personal Data and Storage

• اضافه کردن قابلیت جستجو Add Search functionality

• نمایش جزئیات شخصی Display Personal Detail

• کد منبع Source Code

Tailwind CSS برای React Tailwind CSS for React

• Tailwind CSS چیست What is Tailwind CSS

• نحوه نصب و راه اندازی Tailwind CSS برای React How to install & setup Tailwind CSS for React

برنامه چک لیست پیچیده با استفاده از Tailwind CSS Complex Checklist App using Tailwind CSS

• بررسی پروژه Project overview

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

• کامپوننت عنوان و کانتینر عمومی برنامه Title component and general app container

• کامپوننت چک لیست Checklist component

• کامپوننت مورد چک لیست Checklist item component

• دریافت داده با استفاده از async و useEffect Get data using async and useEffect

• بارگیری و تولید ID منحصر به فرد Loading and Generate unique ID

• ایجاد کامپوننت Time Capsule برای ایجاد و تکمیل داده Create Time Capsule componente for create and completed data

• بررسی و برداشتن علامت هر مورد Check and uncheck each item

• بررسی و برداشتن علامت همه موارد Check and uncheck all items

• حذف مورد از لیست Delete item form list

• ویرایش متن مورد در لیست Edit item text in list

• ایجاد یک کامپوننت Alert برای اقدامات لیست Create a Alert component for list actions

• اضافه کردن مورد جدید به لیست Add new item to the list

• ذخیره چک لیست به داده ها در پایگاه داده Save checklist to data to database

• بارگیری داده های جدید از پایگاه داده Load new data form database

• تغییر حالت تیره Toggle Dark Mode

Vite React Vite React

• Vite چیست What is Vite

• نصب و راه اندازی Vite با قالب React JS Install and Setup Vite with React JS Template

• Tailwind CSS برای Vite React Tailwind CSS for Vite React

پروژه - برنامه لیست علاقه مندی های سهام Project - Stock Wishlist App

• بررسی پروژه Project overview

• ایجاد اجزای اصلی برنامه Create App Main Components

• ایجاد کامپوننت های Button و Input Create Button and Input components

• ایجاد کامپوننت تاریخ امروز Create Today's Date component

• کامپوننت اطلاعات سهام پیش فرض Default Stock info component

• کامپوننت نمودار سهام پیش فرض Default Stock Chart Component

• کامپوننت سربرگ لیست سهام Stock List Header Component

• کامپوننت سرصفحه جدول لیست سهام Stock List Table Head Component

• کامپوننت بدنه جدول لیست سهام Stock list Table Body component

• اضافه کردن سهام به لیست Add stock to list

• ویرایش سهام در لیست Edit Stock in list

• حذف سهام از لیست Remove Stock from list

• باز کردن جزئیات سهام انتخاب شده و ویجت نمودار Open selected stock details and chart widget

• بارگیری و ذخیره لیست سهام در حافظه محلی Load and Save Stocks list to local storage

• ذخیره و بارگیری از پایگاه داده محلی Save and Load from local Database

• مرتب سازی سهام بر اساس نام و بخش Sort stocks by name and Sector

• فیلتر کردن سهام بر اساس بخش Filter by stocks by sector

• جستجوی سهام بر اساس نماد یا نام Search Stocks by Symbol or Name