آموزش Hands-On React Bootcamp: ساخت 30 پروژه دنیای واقعی

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

معرفی دوره Course Introduction

• معرفی دوره Course Introduction

• طرح کلی دوره Course Outline

Project-1: تجارت الکترونیک (Amazon Clone) - React، React-Context-Api، Firebase Project-1 : E-Commerce (Amazon Clone) - React, React-Context-Api, Firebase

• مقدمه ای بر پروژه Introduction To The Project

• شروع با React Getting Started With React

• سربرگ فروشگاه الکترونیکی eShop Header

• صفحه اصلی فروشگاه اینترنتی eShop Home Page

• React Props React Props

• React Routing React Routing

• صفحه پرداخت الکترونیکی فروشگاه eShop Checkout Page

• React Context AP React Context AP

• به سبد اضافه کن Add To Basket

• حذف از سبد Remove From Basket

• احراز هویت با استفاده از Firebase Authentication Using Firebase

• استقرار برنامه Deploying The App

• دانلود فایل های پروژه Download The Project Files

Project-2: برنامه چت - React، React Chatengine، Socket، Rest Apis Project-2 : Chat Application - React, React Chatengine, Socket, Rest Apis

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• React Chat Engine React Chat Engine

• اجزاء Components

• فید چت Chat Feed

• مؤلفه پیام من My Message Component

• جزء پیام آنها Their Message Component

• رسیدهای خواندن را رندر کنید Render Read Receipts

• فرم پیام Message Form

• فرم ورود Login Form

• اتمام پروژه Finishing Up The Project

• دانلود فایل های پروژه Download The Project Files

Project-3 : Movies Application (Ott) - React، Omdb Api، React Hooks، Bootstrap Project-3 : Movies Application (Ott) - React, Omdb Api, React Hooks, Bootstrap

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• OMDb API OMDb API

• لیست فیلم Movie List

• MovieListHeading و Searchbox MovieListHeading and Searchbox

• پیاده سازی ویژگی جستجو Implementing Search Feature

• به موارد دلخواه اضافه کنید Add To Favourite

• حذف از موارد دلخواه Remove From Favourites

• محل ذخیره سازی Local Storage

• اتمام پروژه Finishing Up The Project

• دانلود فایل های پروژه Download The Project Files

Project-4: وب سایت اشتراک گذاری ویدیو - React، Youtube Api، Material-Ui، Axios Project-4 : Video Sharing Website - React, Youtube Api, Material-Ui, Axios

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• React Material-UI React Material-UI

• Youtube API Youtube API

• کامپوننت نوار جستجو SearchBar Component

• React State Hooks React State Hooks

• جزء VideoDetail VideoDetail Component

• مؤلفه فهرست ویدیویی VideoList Component

• جزء VideoItem VideoItem Component

• در حال اتمام Finishing Up

• دانلود فایل های پروژه Download The Project Files

Project-5: وب سایت Todolist - React، Material-Ui، React Hooks، State Manageme Project-5 : Todolist Website - React, Material-Ui, React Hooks, State Manageme

• مقدمه ای بر پروژه Introduction To The Project

• شروع با React Getting Started With React

• کامپوننت هدر Header Component

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

• یادداشت را اضافه کنید Add Note

• اضافه کردن یادداشت ادامه Add Note Continuation

• CreateArea CSS. CreateArea CSS.

• کامپوننت یادداشت Note Component

• در حال حذف یادداشت Deleting Note

• کامپوننت پاورقی Footer Component

• در حال تکمیل CSS Completing CSS

• در حال اتمام Finishing Up

• دانلود فایل های پروژه Download The Project Files

پروژه-6: وب سایت وبلاگ - React، Material-Ui، React Hooks، State Management، Project-6 : Blog Website - React, Material-Ui, React Hooks, State Management,

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• userSlice.js userSlice.js

• store.js _ index.js store.js _ index.js

• کامپوننت صفحه اصلی Homepage Component

• کامپوننت نوار ناوبری Navbar Component

• پایان ناوبر Finishing Navbar

• Gnews API Gnews API

• جزء وبلاگ ها Blogs Component

• اتمام پروژه Finishing Up The Project

• دانلود فایل های پروژه Download The Project Files

پروژه-7: وب سایت شبکه های اجتماعی - Material-Ui، React Hooks، State Manage Project-7 : Social Networking Website - Material-Ui, React Hooks, State Manage

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• احراز هویت و امنیت Authentication and Security

• رمزگذاری پایگاه داده Database Encryption

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

• هش کردن Hashing

• نمک زدن و هش کردن Salting and Hashing

• جلسات Sessions

• جلسات Sessions

• Google OAuth Google OAuth

• دانلود فایل های پروژه Download The Project Files

Project-8 : وب سایت رزومه (پورتفولیو) - React، Material-Ui، React Hooks، آمار Project-8 : Resume Website (Portfolio) - React, Material-Ui, React Hooks, Stat

• مقدمه ای بر پروژه Introduction To The Project

• شروع شدن Getting Started

• وابستگی ها و مولفه ها Dependencies and Components

• React-Router-DOM React-Router-DOM

• لوازم و مولفه خانه Props and Home Component

• کامپوننت نوار ناوبری Navbar Component

• درباره کامپوننت About Component

• واگذاری ساختارشکن Destructuring Assignment

• کامپوننت نهایی Finishing Component

• اتمام پروژه Finishing Up The Project

• دانلود فایل های پروژه Download The Project Files

Project-9: یک برنامه آزمایشی روتر React ساخته شده با ReactJs -React Js، NPM Project-9 : A React Router Demo Application made with ReactJs -React Js , NPM

• معرفی اپلیکیشن App Introduction

• ایجاد React App Creating React App

• خانه داری House Keeping

• سلام دنیا Hello World

• قسمت زمینه 1 Context part1

• قسمت 2 زمینه Context Part2

• صفحه نخست Homepage

• درباره صفحه About Page

• اعتبار سنجی فرم Validation of Form

• فرم تماس با بخش 1 Contact Form Part 1

• فرم تماس قسمت 2 Contact Form Part 2

• فرم تماس با بخش 3 Contact Form Part 3

• جزء کاربر قسمت 1 User Component Part 1

• کامپوننت کاربر قسمت 2 User Component Part 2

• ایجاد کامپوننت کاربر قسمت 1 Creating User Component Part 1

• کامپوننت کاربر قسمت 2 User Component Part 2

• صفحه خطا Error Page

• واردات ضروری Necessary Imports

• نوابر Navabar

• رفع نهایی Final Fix

• دانلود فایل های پروژه Download The Project Files

Project-10: یک برنامه قفسه کتاب ساخته شده با React-React Js، NPM، CSS، Project-10 : A Book Shelf Application made with React- React Js , NPM , CSS ,

• معرفی اپلیکیشن App Introduction

• CRA CRA

• اولین اجرا First Run

• خانه داری House Keeping

• فونت ها Fonts

• ایجاد زمینه Creating Context

• نحوه استفاده از Create Context How to use Create Context

• ایجاد زمینه تم Creating Theme Context

• زمینه محتوا Content Context

• ایجاد کامپوننت ها Creating Components

• قسمت بعدی Next Part

• ایجاد فهرست کتاب Creacting BookList

• ایجاد کتاب Creating Book

• رفع نهایی Final Fix

• گسترش Deployment

• دانلود فایل های پروژه Download The Project Files

Project-11: یک برنامه یادداشت برداری ساخته شده با React و Redux-React Js، NP Project-11 : A Note Taking Application Made with React and Redux-React Js , NP

• معرفی اپلیکیشن App Introduction

• CRA CRA

• اولین اجرا First Run

• برنامه های افزودنی برای React Extensions For React

• ایجاد کامپوننت ها Creating Components

• اجزای بخش 2 Components Part 2

• افزودن کامپوننت ها قسمت 3 Adding Components Part 3

• افزودن Redux Adding Redux

• ایجاد فروشگاه Creating Store

• در دسترس قرار دادن فروشگاه Making Store Available

• افزودن قسمت 2 فروشگاه Adding Store Part 2

• برقراری ارتباط Connecting

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

• ایجاد NoteItem Creating NoteItem

• تکمیل برنامه App Completion

• دانلود فایل های پروژه Download The Project Files

Project-12: React Contact Register Application-React Js, NPM, CSS, State Project-12 : A React Contact Register Application-React Js , NPM , CSS , State

• معرفی اپلیکیشن App Introduction

• CRA CRA

• ساختار پوشه Folder Structure

• برنامه های افزودنی Extensions

• ایجاد کامپوننت ها Creating Components

• ایجاد لیست تماس Creating ContactList

• ایجاد فرم تماس Creating Contact Form

• سبک ها Styles

• سبک 2 Styles 2

• دانلود فایل های پروژه Download The Project Files

Project-13: یک برنامه Spend Money ساخته شده با React-React Js، NPM، CSS، State Ma Project-13 : A Spend Money App made with React-React Js , NPM , CSS , State Ma

• معرفی اپلیکیشن App Introduction

• ساخت React Application Creating React Application

• اولین اجرا First Run

• برنامه های افزودنی برای React Extensions For React

• ایجاد کامپوننت ها Creating Components

• ساخت اجزای مورد نیاز Making Required Components

• ایجاد App.jsx Creating App.jsx

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

• CardItem CardItem

• سبد اضافه کنید Add Basket

• حذف آیتم Remove Item

• لمس نهایی Final Touch

• دانلود فایل های پروژه Download The Project Files

Project-14: یک برنامه رزرو اقامتگاه ساخته شده با React-React Js، NPM، CSS Project-14 : A Resort Booking Application made with React-React Js , NPM , CSS

• معرفی اپلیکیشن App Introduction

• CRA CRA

• اولین اجرا First Run

• برنامه های افزودنی Extensions

• ایجاد دولت Creating State

• ایجاد حالت 2 Creating State 2

• روش های اضافه کردن Adding Methods

• تعریف روشها Defining Methods

• تکمیل Booking.js Completing Booking.js

• ایجاد Billing.js Creating Billing.js

• ایجاد روش ها در صورتحساب Creating Methods in Billing

• Billing.js قسمت 1 Billing.js Part 1

• Billing.jsx قسمت 2 Billing.jsx Part 2

• DateSelector.js DateSelector.js

• RoomDetails.js RoomDetails.js

• افزودن Dynamics به RoomDetails.js Adding Dynamics to RoomDetails.js

• دانلود فایل های پروژه Download The Project Files

Project-15: یک ماشین حساب شاخص توده بدن ساخته شده با React-React Js، NPM، CSS Project-15 : A Body Mass Index Calculator made with React-React Js , NPM , CSS

• معرفی اپلیکیشن App Introduction

• ایجاد React Application Create React Application

• اولین اجرا First Run

• برنامه های افزودنی Extensions

• با استفاده از useState Using useState

• ایجاد ساختار Creating Structure

• ایجاد ساختار قسمت 2 Creating Structure Part 2

• ایجاد ثابت ها Creating Constants

• روش های ایجاد Creating Methods

• روش ها قسمت 2 Methods Part 2

• بخش پایانی روش های ایجاد Creating Methods Final Part

• رفع نهایی Final Fix

• دانلود فایل های پروژه Download The Project Files

Project-16: یک فروشگاه مبلمان ساخته شده با React و Redux-React Js، NPM، CSS Project-16 : A Furniture Store made with React and Redux-React Js , NPM , CSS

• معرفی اپلیکیشن App Introduction

• CRA CRA

• پیکربندی برنامه Configuring Application

• Index.js Index.js

• ایجاد App.js Creating App.js

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

• Actions Creators Actions Creators

• با استفاده از اتصال Using connect

• MapStatetoProps MapStatetoProps

• ایجاد کامپوننت ها قسمت 1 Creating Components Part 1

• ایجاد کامپوننت ها قسمت 2 Creating Components Part 2

• ایجاد کامپوننت قسمت 3 Creating Component Part 3

• اتصال قطعات Connecting Components

• دانلود فایل های پروژه Download The Project Files

Project-17: یک برنامه Scoreboard ساخته شده با ReactJS-React Js، NPM، CSS، Project-17 : A Scoreboard Application made with ReactJS-React Js , NPM , CSS ,

• معرفی برنامه App Intro

• CRA CRA

• برنامه های افزودنی Extensions

• ایجاد کامپوننت ها Creating Components

• روش های ایجاد Creating Methods

• روش های ایجاد قسمت 2 Creating Methods Part 2

• افزودن Player.js Adding Player.js

• ایجاد Counter.ks Creating Counter.ks

• ایجاد آمار Creating Stats

• ایجاد کرونومتر Creating StopWatch

• جزء نهایی Final Component

• دانلود فایل های پروژه Download The Project Files

Project-18: برنامه Meta Tag Generator ساخته شده با React-React Js، NPM، C Project-18 : Meta Tag Generator Application made with React-React Js , NPM , C

• معرفی اپلیکیشن App Introduction

• CRA CRA

• برنامه های افزودنی Extensions

• ایجاد کامپوننت ها Creating Components

• پیکربندی کامپوننت ها Configuring Components

• ایجاد ساختار Creating Structure

• ایجاد ساختار قسمت 2 Creating Structure Part 2

• ایجاد Generator.js Creating Generator.js

• اتمام MetaAtgs Finishing MetaAtgs

• رفع نهایی Final Fix

• دانلود فایل های پروژه Download The Project Files

Project-19: برنامه وب سفارش غذا - React.Js، Material-Ui، React Rout Project-19 : Food Ordering Web Application - React.Js, Material-Ui, React Rout

• مقدمه ای بر پروژه Introduction To The Project

• نصب و راه اندازی پروژه Project Installation And Setup

• استفاده از React Router Trim Applying React Router Trim

• ایجاد و یک ظاهر طراحی برش نوار Nav Creating & Styling The Nav Bar Trim

• پایان دادن به برش نوار Nav Finishing Up The Nav bar Trim

• ایجاد صفحه اصلی و برش پاورقی Creating the Homepage and Footer Trim

• صفحه منو و نقشه برداری از داده ها Menu Page And Mapping The Data

• درباره _ صفحه تماس About _ Contact Page

• دانلود فایل های پروژه Download The Project Files

Project-20: برنامه وب هواشناسی با استفاده از Api - React.Js، Open Weather Api، C Project-20 : Weather Web Application Using Api - React.Js, Open Weather Api, C

• ایجاد کلید API Generating the API Key

• مقدمه ای بر پروژه Introduction To The Project

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

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

• ایجاد کارت هواشناسی Creating Weather Card

• یک ظاهر طراحی شده کارت آب و هوا Styling The Weather Card

• قلاب useEffect The useEffect Hook

• Promises، Async، Await Try و Catch Promises, Async, Await Try and Catch

• پیکربندی نقطه پایانی API Configuring the API Endpoint

• گرفتن داده ها از API Grabbing The Data From API

• واکشی داده ها در رابط کاربری Fetching Data To The UI

• پویا کردن نمادها و تکمیل پروژه. Making The Icons Dynamic And Finishing Up The Project.

• دانلود فایل های پروژه Download The Project Files

Project-21: برنامه دستور غذا - React.Js، Edamam Api، Firebase For Host Project-21 : Food Recipe Application - React.Js, Edamam Api, Firebase For Host

• مقدمه ای بر پروژه Introduction To The Project

• در حال تولید شناسه API Generating API ID

• نصب پروژه React React Project Installation

• ایجاد ساختار پایه Creating the Basic Structure

• شکل دادن به فیلد ورودی و جستجو Styling The Input And Search Field

• فراخوانی API از طریق نقطه پایانی Calling the API Through Endpoint

• پیاده سازی جستجوی سفارشی Implementing Custom Search

• کشویی دسته The Category Dropdown

• نقشه برداری داده ها از API Mapping The Data From The API

• جزء RecipeTile The RecipeTile Component

• اضافه کردن RegEx به فیلتر کردن تصاویر Adding RegEx To Filter Images

• میزبانی وب سایت در Firebase Hosting The Website on Firebase

• دانلود فایل های پروژه Download The Project Files

Project-22: برنامه My Cart - React.Js، React-Hoks، External Api، Css Project-22 : My Cart Application - React.Js, React-Hooks, External Api, Css

• مقدمه ای بر پروژه Introduction To The Poject

• راه اندازی و نصب پروژه Project Setup And Installation

• ایجاد نوار ناوبری 2 Creating The Navbar 2

• یک ظاهر طراحی شده نوار نوار Styling The Navbar

• ایجاد زمینه Creating The Context

• ایجاد CartContainer Creating CartContainer

• ایجاد مؤلفه CartItem Creating CartItem Component

• UseReducer Hook The useReducer Hook

• پیاده سازی useReducer Implementing The useReducer

• پاک کردن سبد خرید Clear Cart

• افزودن و حذف اقلام از سبد خرید Adding And Removing Items From Cart

• ایجاد اقدامات در Reducer Creating The Actions In Reducer

• ارسال و اقدامات نهایی Dispatch And Actions Final

• دانلود فایل های پروژه Download The Project Files

Project-23: برنامه منوی کافه - React.Js، React-Hoks، Firebase، Css Project-23 : Cafe Menu Application - React.Js, React-Hooks , Firebase, Css

• مقدمه ای بر پروژه Introduction To The Project

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

• سبک دادن به عنوان Styling The Title

• ایجاد مؤلفه دسته Creating The Category Component

• جزء منو The Menu Component

• حالت دادن به مؤلفه منو Styling The Menu Component

• کار بر روی مؤلفه دسته Working On The Category Component

• انتقال و نگاشت داده ها به مؤلفه منو Passing And Mapping Data To Menu Component

• بازخوانی داده ها در مؤلفه برنامه Redering The Data In The App Component

• برنامه میزبانی در Firebase Hosting Application On Firebase

• دانلود فایل های پروژه Download The Project Files

Project-24 : Cocktail Hub Web Application - React.Js، React-Hoks، External Ap Project-24 : Cocktail Hub Web Application - React.Js, React-Hooks, External Ap

• مقدمه ای بر پروژه Introduction To The Project

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

• پیوند دادن کامپوننت ها به نوار ناوبری Linking Components To Navbar

• ایجاد زمینه Creating The Context

• API که قرار است از آن استفاده کنیم The API We Are Going To Use

• تنظیم زمینه جهانی Setting Up Global Context

• واکشی داده ها از Try And Catch Fetching Data From Try And Catch

• ایجاد زمینه جهانی Creating Global Context

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

• لودر، کوکتل، اجزای لیست کوکتل Loader,Cocktails,CocktailList Components

• کامپوننت تک کوکتل SingleCocktail Component

• دانلود فایل های پروژه Download The Project Files

Project-25: بررسی برنامه ارسال پست - React.Js، Material-Ui، Css، Nanoid Project-25 : Review Posting Application - React.Js, Material-Ui, Css, Nanoid

• مقدمه ای بر پروژه Introduction To The Project

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

• با استفاده از Material-UI و Navbar Using Material-UI and Navbar

• ویژگی حالت تاریک Dark Mode Feature

• مؤلفه جستجو The Search Component.

• ارسال مولفه بررسی Posting The Review Component

• افزودن JS به AddNote Adding JS To The AddNote

• ایجاد فهرست بررسی (NoteList) Creating The Review List (NoteList)

• ایجاد مؤلفه بررسی (یادداشت). Creating The Review(Note) Component

• پیکربندی App-js Configuring The App-js

• اتمام پروژه Finishing Up The Project

• دانلود فایل های پروژه Download The Project Files

Project-26: برنامه Pomodoro - React.Js، React Countdown Timer Npm Packag Project-26 : Pomodoro Application - React.Js, React Countdown Timer Npm Packag

• مقدمه ای بر پروژه Introduction To The Project

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

• ایجاد کامپوننت دکمه Creating The Button Component.

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

• SetPomodoro Component SetPomodoro Component

• پیکربندی SetPomodoro Configuring The SetPomodoro

• مولفه انیمیشن شمارش معکوس CountDown Animation Component

• ایجاد GlobalContext Creating The GlobalContext

• پیکربندی زمینه جهانی Configuring The Global Context

• پیکربندی App-js Configuring The App-js

• اتمام پروژه با App-Js Finishing Up the Project with App-Js

• دانلود فایل های پروژه Download The Project Files

Project-27: برنامه جستجوی Google با استفاده از Api - React.Js، Tailwind Css، Goo Project-27 : Google Search Application Using Api - React.Js, Tailwind Css, Goo

• مقدمه ای بر پروژه Introduction To The Project

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

• نصب Tailwind And Craco Installing Tailwind And Craco

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

• ایجاد مؤلفه جستجو Creating The Search Component

• تکمیل جستجو و ایجاد لینک Completing The Search And Creating Links

• ایجاد کامپوننت بارگذاری و پاورقی Creating Loading And Footer Component

• ایجاد زمینه جهانی Creating The Global Context

• ایجاد ساختار اجزای نتایج Creating The Results Component Structure

• توزیع داده ها بر اساس فیلد جستجو Distributing Data According To Search Field

• راه اندازی مسیرها و App-Js Setting Up The Routes And App-Js

• دانلود فایل های پروژه Download The Project Files

Project-28: بازی Tic-Tac-Toe با React js Project-28 : Tic-Tac-Toe game with React js

• معرفی پروژه بازی Tic tac Toe Introduction to Tic tac Toe game Project

• تنظیم محیط برای پروژه Environment Setup for the project

• شروع کار با React Component و درک ساختار پوشه Getting started with React Component and Understanding Folder Structure

• مقدمه‌ای برای واکنش‌دهنده و انتقال تابع به کامپوننت‌ها Introduction to react props and passing function to componnennts

• پخش کننده ما با استفاده از UseState Hooks Rendering our player using useState Hooks

• با استفاده از قلاب های useEffect بین player_s X و O جابه جا شوید Toggle between player_s X and O using useEffect hooks

• دادن عمل به دکمه راه اندازی مجدد Giving action to the restart button

• ایجاد شرایط برای یک مسابقه مساوی Making condition for a tie match

• افزودن جلوه صوتی به پروژه ما Adding sound effect to our project

• دانلود فایل های پروژه Download The Project Files

Project-29: برنامه شمارنده کلمه و حروف با استفاده از react js، از جمله استفاده Project-29 : Word and letter counter apllication using react js, including use

• مقدمه ای بر Word Counter با استفاده از React js Introduction to Word Counter using React js

• چیزی که قرار است بسازیم What we are going to make

• شروع به کار با رابط کاربری ما برای کلمه شمار Getting started with our user Interface for word counter

• تکمیل حروف و کلمات پیشخوان ما Completing our counter letters and words

• با دکمه های ما تکمیل می شود Completing with our buttons

• دانلود فایل های پروژه Download The Project Files

Project-30: مبدل ارز با استفاده از React js Project-30 : Currency converter using React js

• آشنایی با مبدل ارز Introduction to currency converter

• چیزی که قرار است بسازیم What we are going to make

• با رابط کاربری پروژه ما شروع کنید Get started with our project user Interface

• نتیجه نهایی ما با تبدیل api Our final result with convert api

• دانلود فایل های پروژه Download The Project Files