آموزش React Mega Course: ساخت 50 پروژه دنیای واقعی در 50 روز

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

معرفی دوره Course Introduction

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

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

معرفی دوره 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

• مقدمه ای بر پروژه Intro 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 API React Context API

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

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

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

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

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

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

• مقدمه ای بر پروژه Intro 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 API React Context API

• به سبد اضافه کن 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

• مقدمه ای بر پروژه Intro 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-2: برنامه چت - React، React Chatengine، Socket، Rest Apis Project-2 : Chat Application - React, React Chatengine, Socket, Rest Apis

• مقدمه ای بر پروژه Intro 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

• مقدمه ای بر پروژه Intro 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-3 : Movies Application (Ott) - React، Omdb Api، React Hooks، Bootstrap Project-3 : Movies Application (Ott) - React, Omdb Api, React Hooks, Bootstrap

• مقدمه ای بر پروژه Intro 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

• به پروژه Into 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-4: وب سایت اشتراک گذاری ویدیو - React، Youtube Api، Material-Ui، Axios Project-4 : Video Sharing Website - React, Youtube Api, Material-Ui, Axios

• به پروژه Into 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 Management Project-5 : Todolist Website - React, Material-Ui, React Hooks, State Management

• مقدمه ای بر پروژه Intro 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

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

• مقدمه ای بر پروژه Intro 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

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

• مقدمه ای بر پروژه Intro 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

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

• مقدمه ای بر پروژه Intro 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

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

• مقدمه ای بر پروژه Intro To The Projec

• شروع شدن. Getting Started.

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

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

• متغیر محیطی Environment Variable

• هش کردن Hashing

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

• بیسکویت ها Cookies

• جلسات Sessions

• Google OAuth Google OAuth

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

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

• مقدمه ای بر پروژه Intro To The Projec

• شروع شدن. Getting Started.

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

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

• متغیر محیطی Environment Variable

• هش کردن Hashing

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

• بیسکویت ها Cookies

• جلسات Sessions

• Google OAuth Google OAuth

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

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

• مقدمه ای بر پروژه Intro 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

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

• مقدمه ای بر پروژه Intro 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 - React، Reactdom، Html5 Project-9 : An Emoji Search Application Made With React - React, Reactdom, Html5

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

• ایجاد برنامه React ما Creating Our React App

• اضافه کردن ساختار پوشه Adding Folder Structure

• پر کردن App.jsx Populating App.jsx

• ایجاد سربرگ Creating Header

• افزودن CSS به هدر Adding CSS to Header

• افزودن نوار جستجو Adding Search Bar

• افزودن ایالت Adding State

• Results.jsx Results.jsx

• Emoji Results EmojiResults

• خطا Error

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

• افزودن توابع Adding Functions

• اصلاح Filter.js Modifying Filter.js

• فاینال فاکتور Final Refactor

• گسترش Deployment

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

Project-9: یک برنامه جستجوی ایموجی ساخته شده با React - React، Reactdom، Html5 Project-9 : An Emoji Search Application Made With React - React, Reactdom, Html5

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

• ایجاد برنامه React ما Creating Our React App

• اضافه کردن ساختار پوشه Adding Folder Structure

• پر کردن App.jsx Populating App.jsx

• ایجاد سربرگ Creating Header

• افزودن CSS به هدر Adding CSS to Header

• افزودن نوار جستجو Adding Search Bar

• افزودن ایالت Adding State

• Results.jsx Results.jsx

• Emoji Results EmojiResults

• خطا Error

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

• افزودن توابع Adding Functions

• اصلاح Filter.js Modifying Filter.js

• فاینال فاکتور Final Refactor

• گسترش Deployment

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

Project-10: یک برنامه کاراکتر بد که با React ساخته شده است - React, React Project-10 : A Breaking Bad Character Application Made With React - React, React

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

• ساخت React Application Creating React Application

• خانه داری House Keeing

• Refactoring کد در برنامه ما Refactoring The Code in Our App

• افزودن ایالت Adding State

• ایجاد نوار جستجو Creating SearchBar

• واکشی داده ها از API. Fetching Data from API.

• اضافه کردن کد به CharacterList Adding Code to CharacterList.

• رندر CharcterListItem Rendering CharcterListItem

• رسیدگی به خطا Error Handling

• پیکربندی صفحه بارگیری Configuring Loading Screen

• افزودن سبک ها قسمت 1 Adding Styles Part 1

• اضافه کردن سبک ها قسمت 2. Adding Styles part-2.

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

Project-10: یک برنامه کاراکتر بد که با React ساخته شده است - React, React Project-10 : A Breaking Bad Character Application Made With React - React, React

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

• ساخت React Application Creating React Application

• خانه داری House Keeing

• Refactoring کد در برنامه ما Refactoring The Code in Our App

• افزودن ایالت Adding State

• ایجاد نوار جستجو Creating SearchBar

• واکشی داده ها از API. Fetching Data from API.

• اضافه کردن کد به CharacterList Adding Code to CharacterList.

• رندر CharcterListItem Rendering CharcterListItem

• رسیدگی به خطا Error Handling

• پیکربندی صفحه بارگیری Configuring Loading Screen

• افزودن سبک ها قسمت 1 Adding Styles Part 1

• اضافه کردن سبک ها قسمت 2. Adding Styles part-2.

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

Project-11: یک برنامه تولید کننده نقل قول تصادفی ساخته شده با React و Deployed O Project-11 : A Random Quote Generator Application Made With React And Deployed O

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

• ساخت React Application Creating React Application

• کامپوننت Hello World Hello World Component

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

• پیکربندی Quotes.jsx Configuring Quotes.jsx

• تخریب ساختار داده ها Destructuring Data

• افزودن سبک ها قسمت 1 Adding Styles Part 1

• اضافه کردن دکمه. Adding Button.

• افزودن سبک ها قسمت 2 Adding Styles Part 2

• افزودن API Adding API

• اضافه کردن کنترل کننده کلیک Adding Click Handler

• رسیدگی به خطا Error Handling

• اضافه کردن پاورقی Adding Footer

• افزودن خانواده فونت Adding Font Family.

• ارسال کد به Github Pushing Code to Github

• استقرار در هروکو Deployment on Heroku

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

Project-11: یک برنامه تولید کننده نقل قول تصادفی ساخته شده با React و Deployed O Project-11 : A Random Quote Generator Application Made With React And Deployed O

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

• ساخت React Application Creating React Application

• کامپوننت Hello World Hello World Component

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

• پیکربندی Quotes.jsx Configuring Quotes.jsx

• تخریب ساختار داده ها Destructuring Data

• افزودن سبک ها قسمت 1 Adding Styles Part 1

• اضافه کردن دکمه. Adding Button.

• افزودن سبک ها قسمت 2 Adding Styles Part 2

• افزودن API Adding API

• اضافه کردن کنترل کننده کلیک Adding Click Handler

• رسیدگی به خطا Error Handling

• اضافه کردن پاورقی Adding Footer

• افزودن خانواده فونت Adding Font Family.

• ارسال کد به Github Pushing Code to Github

• استقرار در هروکو Deployment on Heroku

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

Project-12: یک برنامه تولید کننده رمز عبور ساخته شده با React - React، Reactdom، Project-12 : A Password Generator Application Made With React - React, Reactdom,

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

• ساخت React Application Creating React Application

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

• نصب Dependencies Installing Dependencies

• ایجاد HTML Creating HTML

• افزودن Sass -1. Adding Sass -1.

• افزودن Sass-2 Adding Sass-2

• افزودن Sass-3 Adding Sass-3

• افزودن Sass-3 Adding Sass-3

• ساختار روشها Structure of Methods

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

• توضیح Explanation

• مقداردهی اولیه خواص Initializing Properties

• ایجاد روش های کپی Creating Copy Methods.

• اضافه کردن نان تست Adding Toast

• فاینال فاکتور Final Refactor.

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

Project-12: یک برنامه تولید کننده رمز عبور ساخته شده با React - React، Reactdom، Project-12 : A Password Generator Application Made With React - React, Reactdom,

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

• ساخت React Application Creating React Application

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

• نصب Dependencies Installing Dependencies

• ایجاد HTML Creating HTML

• افزودن Sass -1. Adding Sass -1.

• افزودن Sass-2 Adding Sass-2

• افزودن Sass-3 Adding Sass-3

• افزودن Sass-3 Adding Sass-3

• ساختار روشها Structure of Methods

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

• توضیح Explanation

• مقداردهی اولیه خواص Initializing Properties

• ایجاد روش های کپی Creating Copy Methods.

• اضافه کردن نان تست Adding Toast

• فاینال فاکتور Final Refactor.

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

Project-13: برنامه امتحانی ساخته شده با React - React، Reactdom، Html5، Scss Project-13 : A Quiz App Made With React - React, Reactdom, Html5, Scss

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

• ایجاد React App Creating React App

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

• راه اندازی Form.jsx Setting up Form.jsx

• افزودن کد به اجزای دیگر Adding Code to Other Components

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

• افزودن ایالت Adding State

• پیکربندی Context.jsx Configuring Context.jsx

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

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

• مدیریت DataFlow Managing DataFlow

• بازسازی داده ها Refactoring Data

• داده های تنظیمات در برنامه ما Settings Data in Our App

• Restructuring Modal Restructuring Modal

• تغییر ساختار SetupForm Restructuring SetupForm

• تنظیمات نهایی Final Adjustements

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

Project-13: برنامه امتحانی ساخته شده با React - React، Reactdom، Html5، Scss Project-13 : A Quiz App Made With React - React, Reactdom, Html5, Scss

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

• ایجاد React App Creating React App

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

• راه اندازی Form.jsx Setting up Form.jsx

• افزودن کد به اجزای دیگر Adding Code to Other Components

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

• افزودن ایالت Adding State

• پیکربندی Context.jsx Configuring Context.jsx

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

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

• مدیریت DataFlow Managing DataFlow

• بازسازی داده ها Refactoring Data

• داده های تنظیمات در برنامه ما Settings Data in Our App

• Restructuring Modal Restructuring Modal

• تغییر ساختار SetupForm Restructuring SetupForm

• تنظیمات نهایی Final Adjustements

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

Project-14: برنامه UnSplash Image Gallery ساخته شده با React -ReactDOM, React Project-14 : UnSplash Image Gallery Application made with React -ReactDOM, React

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

• ایجاد React App Creating React App

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

• ایجاد ایالات Creating States

• گشت و گذار در API. Tour of API.

• واکشی داده ها در اپلیکیشن Fetching Data into Applicaton

• ریختن داده ها در برنامه Pouring Data Into Application

• اسکرول بی نهایت Infinite Scroll

• پر کردن Photo.jsx Populating Photo.jsx

• اضافه کردن دسته ارسال Adding Handle Submit

• رسیدگی به خطا Error Handling

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

• اضافه کردن سبک ها قسمت 2 Adding styles part 2

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

• رفع اشتباهات تایپی Fixing Typos

• تمرینات سالم Healthy Practices

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

Project-14: برنامه UnSplash Image Gallery ساخته شده با React -ReactDOM, React Project-14 : UnSplash Image Gallery Application made with React -ReactDOM, React

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

• ایجاد React App Creating React App

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

• ایجاد ایالات Creating States

• گشت و گذار در API. Tour of API.

• واکشی داده ها در اپلیکیشن Fetching Data into Applicaton

• ریختن داده ها در برنامه Pouring Data Into Application

• اسکرول بی نهایت Infinite Scroll

• پر کردن Photo.jsx Populating Photo.jsx

• اضافه کردن دسته ارسال Adding Handle Submit

• رسیدگی به خطا Error Handling

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

• اضافه کردن سبک ها قسمت 2 Adding styles part 2

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

• رفع اشتباهات تایپی Fixing Typos

• تمرینات سالم Healthy Practices

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

Project-15: یک برنامه آزمایشی روتر React ساخته شده با ReactJs -React Js، NPM، Project-15 : 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-15: یک برنامه آزمایشی روتر React ساخته شده با ReactJs -React Js، NPM، Project-15 : 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-16: یک برنامه قفسه کتاب ساخته شده با React-React Js، NPM، CSS، St. Project-16 : A Book Shelf Application made with React- React Js , NPM , CSS , St

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

• 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-16: یک برنامه قفسه کتاب ساخته شده با React-React Js، NPM، CSS، St. Project-16 : A Book Shelf Application made with React- React Js , NPM , CSS , St

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

• 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-17: یک برنامه یادداشت برداری ساخته شده با React و Redux-React Js، NPM Project-17 : A Note Taking Application Made with React and Redux-React Js , NPM

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

• 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-17: یک برنامه یادداشت برداری ساخته شده با React و Redux-React Js، NPM Project-17 : A Note Taking Application Made with React and Redux-React Js , NPM

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

• 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-18 : React Contact Register Application-React Js , NPM , CSS , State M Project-18 : A React Contact Register Application-React Js , NPM , CSS , State M

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

• CRA CRA

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

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

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

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

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

• سبک ها Styles

• سبک 2 Styles 2

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

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

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

• CRA CRA

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

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

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

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

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

• سبک ها Styles

• سبک 2 Styles 2

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

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

• معرفی اپلیکیشن 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-19: یک برنامه Spend Money ساخته شده با React-React Js، NPM، CSS، State Mana Project-19 : A Spend Money App made with React-React Js , NPM , CSS , State Mana

• معرفی اپلیکیشن 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-20: یک برنامه رزرو اقامتگاه ساخته شده با React-React Js، NPM، CSS، Project-20 : A Resort Booking Application made with React-React Js , NPM , CSS ,

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

• 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-20: یک برنامه رزرو اقامتگاه ساخته شده با React-React Js، NPM، CSS، Project-20 : A Resort Booking Application made with React-React Js , NPM , CSS ,

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

• 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-21: یک ماشین حساب شاخص توده بدن ساخته شده با React-React Js، NPM، CSS، Project-21 : A Body Mass Index Calculator made with React-React Js , NPM , CSS ,

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

• ایجاد 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-21: یک ماشین حساب شاخص توده بدن ساخته شده با React-React Js، NPM، CSS، Project-21 : A Body Mass Index Calculator made with React-React Js , NPM , CSS ,

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

• ایجاد 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-22: یک فروشگاه مبلمان ساخته شده با React و Redux-React Js، NPM، CSS، Project-22 : A Furniture Store made with React and Redux-React Js , NPM , CSS ,

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

• 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-22: یک فروشگاه مبلمان ساخته شده با React و Redux-React Js، NPM، CSS، Project-22 : A Furniture Store made with React and Redux-React Js , NPM , CSS ,

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

• 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-23: یک برنامه Scoreboard ساخته شده با ReactJS-React Js، NPM، CSS، S Project-23 : A Scoreboard Application made with ReactJS-React Js , NPM , CSS , S

• معرفی برنامه 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-23: یک برنامه Scoreboard ساخته شده با ReactJS-React Js، NPM، CSS، S Project-23 : A Scoreboard Application made with ReactJS-React Js , NPM , CSS , S

• معرفی برنامه 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-24: برنامه تولید کننده متا تگ ساخته شده با React-React Js، NPM، CSS Project-24 : Meta Tag Generator Application made with React-React Js , NPM , CSS

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

• 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-24: برنامه تولید کننده متا تگ ساخته شده با React-React Js، NPM، CSS Project-24 : Meta Tag Generator Application made with React-React Js , NPM , CSS

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

• 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-25: برنامه وب سفارش غذا - React.Js، Material-Ui، React Router Project-25 : Food Ordering Web Application - React.Js, Material-Ui, React Router

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

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

• استفاده از 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-25: برنامه وب سفارش غذا - React.Js، Material-Ui، React Router Project-25 : Food Ordering Web Application - React.Js, Material-Ui, React Router

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

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

• استفاده از 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-26: برنامه وب هواشناسی با استفاده از Api - React.Js، Open Weather Api، Css Project-26 : Weather Web Application Using Api - React.Js, Open Weather Api, Css

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

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

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

• ادامه کامپوننت جستجو Search Component Continuation

• ایجاد کارت هواشناسی 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-26: برنامه وب هواشناسی با استفاده از Api - React.Js، Open Weather Api، Css Project-26 : Weather Web Application Using Api - React.Js, Open Weather Api, Css

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

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

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

• ادامه کامپوننت جستجو Search Component Continuation

• ایجاد کارت هواشناسی 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-27: برنامه دستور غذا - React.Js، Edamam Api، Firebase For Hostin Project-27 : Food Recipe Application - React.Js, Edamam Api, Firebase For Hostin

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

• Generationg API ID _ Key Generationg API ID _ Key

• نصب پروژه 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-27: برنامه دستور غذا - React.Js، Edamam Api، Firebase For Hostin Project-27 : Food Recipe Application - React.Js, Edamam Api, Firebase For Hostin

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

• Generationg API ID _ Key Generationg API ID _ Key

• نصب پروژه 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-28: برنامه My Cart - React.Js، React-Hoks، External Api، Css Project-28 : My Cart Application - React.Js, React-Hooks, External Api, Css

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

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

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

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

• ایجاد زمینه 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-28: برنامه My Cart - React.Js، React-Hoks، External Api، Css Project-28 : My Cart Application - React.Js, React-Hooks, External Api, Css

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

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

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

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

• ایجاد زمینه 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-29: برنامه منوی کافه - React.Js، React-Hoks، Firebase، Css Project-29 : 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-29: برنامه منوی کافه - React.Js، React-Hoks، Firebase، Css Project-29 : 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-30: Cocktail Hub Web Application - React.Js، React-Hoks، External Api، Project-30 : Cocktail Hub Web Application - React.Js, React-Hooks, External Api,

• مقدمه ای بر پروژه 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-30: Cocktail Hub Web Application - React.Js، React-Hoks، External Api، Project-30 : Cocktail Hub Web Application - React.Js, React-Hooks, External Api,

• مقدمه ای بر پروژه 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-31: بررسی برنامه ارسال پست - React.Js، Material-Ui، Css، Nanoid Project-31 : 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

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

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

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

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

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

Project-31: بررسی برنامه ارسال پست - React.Js، Material-Ui، Css، Nanoid Project-31 : 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

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

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

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

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

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

Project-32: برنامه Pomodoro - React.Js، پکیج React Countdown Timer Npm, Project-32 : Pomodoro Application - React.Js, React Countdown Timer Npm Package,

• مقدمه ای بر پروژه 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-32: برنامه Pomodoro - React.Js، پکیج React Countdown Timer Npm, Project-32 : Pomodoro Application - React.Js, React Countdown Timer Npm Package,

• مقدمه ای بر پروژه 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-33: برنامه جستجوی Google با استفاده از Api - React.Js، Tailwind Css، Googl Project-33 : Google Search Application Using Api - React.Js, Tailwind Css, Googl

• مقدمه ای بر پروژه 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-33: برنامه جستجوی Google با استفاده از Api - React.Js، Tailwind Css، Googl Project-33 : Google Search Application Using Api - React.Js, Tailwind Css, Googl

• مقدمه ای بر پروژه 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-34: بازی Tic-Tac-Toe با React js Project-34 : 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-34: بازی Tic-Tac-Toe با React js Project-34 : 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-35: برنامه شمارنده کلمه و حروف با استفاده از react js، از جمله useSt Project-35 : Word and letter counter apllication using react js, including useSt

• مقدمه ای بر 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-35: برنامه شمارنده کلمه و حروف با استفاده از react js، از جمله useSt Project-35 : Word and letter counter apllication using react js, including useSt

• مقدمه ای بر 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-36: مبدل ارز با استفاده از React js Project-36 : 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

Project-36: مبدل ارز با استفاده از React js Project-36 : 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

Project-37: Speech Recogitio، برنامه دستیار صوتی با استفاده از react js Project-37 : Speech Recogitio, Voice assistant app using react js

• معرفی پروژه Introduction to the project

• بیایید ببینیم قرار است چه چیزی بسازیم و چگونه کار می کند Let_s see what we are going to make and how it work

• درک منطق تشخیص گفتار و صدور دستورات Understanding the speech recognition logic and passing commands

• رندر کردن عناصر HTML در مرورگر و اعمال CSS Rendering HTML elements inside browser and applying CSS

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

Project-37: Speech Recogitio، برنامه دستیار صوتی با استفاده از react js Project-37 : Speech Recogitio, Voice assistant app using react js

• معرفی پروژه Introduction to the project

• بیایید ببینیم قرار است چه چیزی بسازیم و چگونه کار می کند Let_s see what we are going to make and how it work

• درک منطق تشخیص گفتار و صدور دستورات Understanding the speech recognition logic and passing commands

• رندر کردن عناصر HTML در مرورگر و اعمال CSS Rendering HTML elements inside browser and applying CSS

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

Project-38: نحوه ساخت ماشین حساب با استفاده از react js، با هوک Project-38 : How to build a Calculator using react js, with hooks

• مقدمه ای بر ارائه ماشین حساب Introduction to calculator presentation

• شروع کار با html Getting started with the html

• دست زدن به دکمه ها با کلیک Handling the buttons with click

• فعال کردن دکمه حذف ما. Making our delete button functional.

• Error Handling و دکمه Equal Error Handling and the Equal button

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

Project-38: نحوه ساخت ماشین حساب با استفاده از react js، با هوک Project-38 : How to build a Calculator using react js, with hooks

• مقدمه ای بر ارائه ماشین حساب Introduction to calculator presentation

• شروع کار با html Getting started with the html

• دست زدن به دکمه ها با کلیک Handling the buttons with click

• فعال کردن دکمه حذف ما. Making our delete button functional.

• Error Handling و دکمه Equal Error Handling and the Equal button

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

Project-39: با استفاده از react js، hooks، custom hook، react-conte یک برنامه بودجه بسازید. Project-39 : Build a budget app using react js, hooks, custom hooks, react-conte

• مقدمه ای بر برنامه بودجه با استفاده از react js با ارائه Introduction to the Budget App using react js with presentation

• شروع با مقداردهی اولیه برنامه react ما Getting started with initialization of our react application

• در حال ارائه هدر ما برای برنامه بودجه Rendering our header for budget app

• ساخت جزء کارت بودجه Making Budget Card component

• تکمیل سربرگ کارت بودجه Completing Budget Card Header

• تکمیل جزء کارت بودجه Completing Budget Card component

• تکمیل جزء کارت بودجه. Completing Budget Card component.

• فراخوانی توابع برای عملکرد کارت بودجه Calling the functions for budget card funtionality

• تکمیل عملکرد افزودن بودجه و افزودن هزینه ها. Completing add Budget and add Expenses function.

• نحوه استفاده از Local Storage را بیاموزید Learn how to use Local Storage

• مدال رسیدگی به بودجه Handling Budget Modal

• نقشه برداری از طریق بودجه Maping through budgets

• اضافه کردن هزینه های معین و دسته بندی نشده Add expenses modal and Uncategorized section

• تکمیل درخواست Completing the application

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

Project-39: با استفاده از react js، hooks، custom hook، react-conte یک برنامه بودجه بسازید. Project-39 : Build a budget app using react js, hooks, custom hooks, react-conte

• مقدمه ای بر برنامه بودجه با استفاده از react js با ارائه Introduction to the Budget App using react js with presentation

• شروع با مقداردهی اولیه برنامه react ما Getting started with initialization of our react application

• در حال ارائه هدر ما برای برنامه بودجه Rendering our header for budget app

• ساخت جزء کارت بودجه Making Budget Card component

• تکمیل سربرگ کارت بودجه Completing Budget Card Header

• تکمیل جزء کارت بودجه Completing Budget Card component

• تکمیل جزء کارت بودجه. Completing Budget Card component.

• فراخوانی توابع برای عملکرد کارت بودجه Calling the functions for budget card funtionality

• تکمیل عملکرد افزودن بودجه و افزودن هزینه ها. Completing add Budget and add Expenses function.

• نحوه استفاده از Local Storage را بیاموزید Learn how to use Local Storage

• مدال رسیدگی به بودجه Handling Budget Modal

• نقشه برداری از طریق بودجه Maping through budgets

• اضافه کردن هزینه های معین و دسته بندی نشده Add expenses modal and Uncategorized section

• تکمیل درخواست Completing the application

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

Project-40: پخش کننده موسیقی با استفاده از react js (Spotify clone) با استفاده از react js with pro Project-40 : Music Player using react js (Spotify clone) using react js with pro

• مقدمه ای بر برنامه زمانبندی با استفاده از react JS Introduction to Schedule Application using react JS

• شروع کار با پروژه شما Getting startded with ur project

• نصب بوت استرپ با استفاده از ترمینال Installing Bootstrap using terminal.

• تغییر مسیر به مجوز Redirectig to authorization

• ایجاد سرور برای برنامه ما Creating Server for our application

• در حال تغییر سرور Modifying the server

• مدیریت احراز هویت کاربر Managing the Authentication of user

• تکمیل مجوز Completing authorisation

• ساخت جزء آهنگ. Making the song component.

• انعقاد پروژه Concluding the project

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

Project-40: پخش کننده موسیقی با استفاده از react js (Spotify clone) با استفاده از react js with pro Project-40 : Music Player using react js (Spotify clone) using react js with pro

• مقدمه ای بر برنامه زمانبندی با استفاده از react JS Introduction to Schedule Application using react JS

• شروع کار با پروژه شما Getting startded with ur project

• نصب بوت استرپ با استفاده از ترمینال Installing Bootstrap using terminal.

• تغییر مسیر به مجوز Redirectig to authorization

• ایجاد سرور برای برنامه ما Creating Server for our application

• در حال تغییر سرور Modifying the server

• مدیریت احراز هویت کاربر Managing the Authentication of user

• تکمیل مجوز Completing authorisation

• ساخت جزء آهنگ. Making the song component.

• انعقاد پروژه Concluding the project

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

Project-41: برنامه تقویم با قابلیت برنامه ریزی رویدادها Project-41 : Calender Application with scheduling events functionality

• . معرفی پروژه Calnder App با استفاده از React Js . Introduction to our project Callender App using React Js

• شروع با راه اندازی پروژه Getting Started With Project Initialization.

• اجازه می دهد تا برنامه کاربردی تر. Lets Make the application more handy.

• اتصال فیلدهای اضافی بیشتر و محدود کردن کاربر. Binding more additional fields and restricting user.

• سفارشی کردن نماها Customizing Views

• حالا بیایید یک نمای css مناسب ایجاد کنیم Let_s make a proper css view now

• یادگیری در مورد برخی از اجزای جدید Learining about some new components

• راه اندازی ماژول های نیمه دوم Initializing second half modules.

• مدیریت رویداد برای تقویم Handling Event for the calender

• در حال پایان دادن به درخواست ما Concluding our application.

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

Project-41: برنامه تقویم با قابلیت برنامه ریزی رویدادها Project-41 : Calender Application with scheduling events functionality

• . معرفی پروژه Calnder App با استفاده از React Js . Introduction to our project Callender App using React Js

• شروع با راه اندازی پروژه Getting Started With Project Initialization.

• اجازه می دهد تا برنامه کاربردی تر. Lets Make the application more handy.

• اتصال فیلدهای اضافی بیشتر و محدود کردن کاربر. Binding more additional fields and restricting user.

• سفارشی کردن نماها Customizing Views

• حالا بیایید یک نمای css مناسب ایجاد کنیم Let_s make a proper css view now

• یادگیری در مورد برخی از اجزای جدید Learining about some new components

• راه اندازی ماژول های نیمه دوم Initializing second half modules.

• مدیریت رویداد برای تقویم Handling Event for the calender

• در حال پایان دادن به درخواست ما Concluding our application.

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

Project-42: برنامه دیکشنری با استفاده از react js Project-42 : Dictionary App using react js

• مقدمه ای بر برنامه دیکشنری با استفاده از React Js. Introduction to Dictionary App Using React Js.

• شروع با راه‌اندازی پروژه ما Getting started with our project Initialization

• با هوک ها در react آشنا شوید Learn about hooks in react

• اتمام با css در کامپوننت. Finishing with css in component.

• کار با اجزای کاربردی و UI Working with functional components and UI

• مولفه تعریف رندر Rendering Definition component

• مولفه تعریف استایل Styling Definition Component

• تکمیل مولفه تعریف Completing Definition Component

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

Project-42: برنامه دیکشنری با استفاده از react js Project-42 : Dictionary App using react js

• مقدمه ای بر برنامه دیکشنری با استفاده از React Js. Introduction to Dictionary App Using React Js.

• شروع با راه‌اندازی پروژه ما Getting started with our project Initialization

• با هوک ها در react آشنا شوید Learn about hooks in react

• اتمام با css در کامپوننت. Finishing with css in component.

• کار با اجزای کاربردی و UI Working with functional components and UI

• مولفه تعریف رندر Rendering Definition component

• مولفه تعریف استایل Styling Definition Component

• تکمیل مولفه تعریف Completing Definition Component

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

Project-43: Youtube Clone با استفاده از react js Project-43 : Youtube Clone using react js

• مقدمه ای بر Youtube Clone Introduction to Youtube Clone

• شروع کار با پروژه ما Getting started with our project

• راه اندازی واکشی و یادگیری Api Initializing fetch and learning Api

• تنظیم sate برای استفاده از قلاب Setting sate for using hooks

• واکشی داده‌های api برای ورود به سیستم و ارائه Fetching api data to log and render

• تنظیم اجزای ویدیو. Arranging Video Components.

• نتیجه گیری با پروژه ما Concluding with our project.

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

Project-43: Youtube Clone با استفاده از react js Project-43 : Youtube Clone using react js

• مقدمه ای بر Youtube Clone Introduction to Youtube Clone

• شروع کار با پروژه ما Getting started with our project

• راه اندازی واکشی و یادگیری Api Initializing fetch and learning Api

• تنظیم sate برای استفاده از قلاب Setting sate for using hooks

• واکشی داده‌های api برای ورود به سیستم و ارائه Fetching api data to log and render

• تنظیم اجزای ویدیو. Arranging Video Components.

• نتیجه گیری با پروژه ما Concluding with our project.

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

Project-44: بازی Candy Crush با استفاده از react JS Project-44 : Candy Crush game using react JS

• معرفی برنامه Candy Crush با استفاده از react js Introduction to Candy Crush app using react js

• شروع کار با مقداردهی اولیه پروژه Getting started with our project initialization

• راه اندازی آرایه رنگ ها در پروژه ما. Initializing array of colors in our project.

• چیدمان آرایه با رنگ ها و تصاویر Arranging array with colors and images

• دریافت رویداد کشیدن و رها کردن. Getting the drag and drop event.

• قرار دادن تصاویر به جای رنگ Putting Images instead of colors

• نتیجه گیری با بازی Concluding with the game

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

Project-44: بازی Candy Crush با استفاده از react JS Project-44 : Candy Crush game using react JS

• معرفی برنامه Candy Crush با استفاده از react js Introduction to Candy Crush app using react js

• شروع کار با مقداردهی اولیه پروژه Getting started with our project initialization

• راه اندازی آرایه رنگ ها در پروژه ما. Initializing array of colors in our project.

• چیدمان آرایه با رنگ ها و تصاویر Arranging array with colors and images

• دریافت رویداد کشیدن و رها کردن. Getting the drag and drop event.

• قرار دادن تصاویر به جای رنگ Putting Images instead of colors

• نتیجه گیری با بازی Concluding with the game

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

Project-45: چیزهای روز نجوم با استفاده از React.Js CSS، React Hooks، APOD A Project-45 : Astronomy stuff of the day Using React.Js CSS , react hooks, APOD A

• مقدمه پروژه The introduction to the project

• راه اندازی پروژه و محیط react. Setting up the react project and environment.

• راه اندازی قطعات Setting up the components

• مقدمه ای بر Hooks و useState hook introduction to Hooks and useState hook

• شروع به کار با axios، جاواسکریپت ناهمزمان Getting started with the axios , asynchronous Javscript

• ادامه هید Continue

• طراحی کل برنامه قسمت 1. The designing of the whole application Part-1.

• طراحی کل برنامه قسمت 2 The designing of the whole application Part-2

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

Project-45: چیزهای روز نجوم با استفاده از React.Js CSS، React Hooks، APOD A Project-45 : Astronomy stuff of the day Using React.Js CSS , react hooks, APOD A

• مقدمه پروژه The introduction to the project

• راه اندازی پروژه و محیط react. Setting up the react project and environment.

• راه اندازی قطعات Setting up the components

• مقدمه ای بر Hooks و useState hook introduction to Hooks and useState hook

• شروع به کار با axios، جاواسکریپت ناهمزمان Getting started with the axios , asynchronous Javscript

• ادامه هید Continue

• طراحی کل برنامه قسمت 1. The designing of the whole application Part-1.

• طراحی کل برنامه قسمت 2 The designing of the whole application Part-2

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

Project-46: قیچی کاغذ سنگی با استفاده از React.js، CSS، قلاب React Project-46 : Rock paper Scissors using React.js , CSS, React hooks

• معرفی پروژه introduction to the project

• شروع پروژه و ایجاد محیط توسعه Getting started with the project and creating the development enviornment

• تنظیم سه جزء اصلی برای پروژه Setting up the three main components for the project

• ایجاد قسمت اصلی بدن-1 creation of the main body part-1

• تنظیم عملکرد با استفاده از useState() و ایجاد بدنه اصلی setting up the functionality using useState() andcreation of the main body

• کار با عملکرد با استفاده از useEffect() و ایجاد bo main working with the functionality using useEffect() and creation of the main bo

• عملکرد کامل پروژه Complete functionality of the project

• طراحی کل برنامه قسمت 1 Designing the whole application part-1

• طراحی کل برنامه قسمت 2 Designing the whole application part-2

• طراحی کل اپلیکیشن قسمت 3 Designing the whole application part-3

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

Project-46: قیچی کاغذ سنگی با استفاده از React.js، CSS، قلاب React Project-46 : Rock paper Scissors using React.js , CSS, React hooks

• معرفی پروژه introduction to the project

• شروع پروژه و ایجاد محیط توسعه Getting started with the project and creating the development enviornment

• تنظیم سه جزء اصلی برای پروژه Setting up the three main components for the project

• ایجاد قسمت اصلی بدن-1 creation of the main body part-1

• تنظیم عملکرد با استفاده از useState() و ایجاد بدنه اصلی setting up the functionality using useState() andcreation of the main body

• کار با عملکرد با استفاده از useEffect() و ایجاد bo main working with the functionality using useEffect() and creation of the main bo

• عملکرد کامل پروژه Complete functionality of the project

• طراحی کل برنامه قسمت 1 Designing the whole application part-1

• طراحی کل برنامه قسمت 2 Designing the whole application part-2

• طراحی کل اپلیکیشن قسمت 3 Designing the whole application part-3

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

Project-47: برنامه اعلان بلادرنگ با استفاده از React.Js، CSS، React hooks، Socke Project-47 : Realtime Notification app Using React.Js , CSS, React hooks , Socke

• شروع پروژه و تنظیم محیط توسعه Getting started with the project and setting the development enviornment

• طراحی اجزای قسمت 1 Designing the components part-1

• طراحی اجزای قسمت 2 و راه اندازی useState Hook Designing of the components part-2 and setting up useState Hook

• طراحی قطعات قسمت 3 Designing of the components part-3

• طراحی کامپوننت Navbar Designing of the Navbar component

• نوشتن عملکرد کامپوننت ها با استفاده از داده های json Writing the functionality of the components using the json data

• نوشتن عملکرد و طراحی تمام اجزا Writing the functionality and Dasigning of all the components

• معرفی و ارتباط با socket.io Introduction and connection with socket.io

• عملکرد socket.io part-1 Functionality of socket.io part-1

• عملکرد socket.io part-2 Functionality of socket.io part-2

• عملکرد socket.io part-3 Functionality of socket.io part-3

• نوشتن عملکرد نمایش اعلان ها. Writing the functionality of displaying the notifications.

• پروژه تکمیل Completion project

• نوشتن عملکرد نمایش اعلان ها Writing the functionality of displaying the notifications

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

Project-47: برنامه اعلان بلادرنگ با استفاده از React.Js، CSS، React hooks، Socke Project-47 : Realtime Notification app Using React.Js , CSS, React hooks , Socke

• شروع پروژه و تنظیم محیط توسعه Getting started with the project and setting the development enviornment

• طراحی اجزای قسمت 1 Designing the components part-1

• طراحی اجزای قسمت 2 و راه اندازی useState Hook Designing of the components part-2 and setting up useState Hook

• طراحی قطعات قسمت 3 Designing of the components part-3

• طراحی کامپوننت Navbar Designing of the Navbar component

• نوشتن عملکرد کامپوننت ها با استفاده از داده های json Writing the functionality of the components using the json data

• نوشتن عملکرد و طراحی تمام اجزا Writing the functionality and Dasigning of all the components

• معرفی و ارتباط با socket.io Introduction and connection with socket.io

• عملکرد socket.io part-1 Functionality of socket.io part-1

• عملکرد socket.io part-2 Functionality of socket.io part-2

• عملکرد socket.io part-3 Functionality of socket.io part-3

• نوشتن عملکرد نمایش اعلان ها. Writing the functionality of displaying the notifications.

• پروژه تکمیل Completion project

• نوشتن عملکرد نمایش اعلان ها Writing the functionality of displaying the notifications

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

Project-48: برنامه ردیاب Covid-19 با استفاده از React.Js، CSS، React hooks Project-48 : Covid-19 tracker Application Using React.Js , CSS , React hooks

• معرفی پروژه. Introduction to the project.

• تنظیم محیط توسعه و اجزای آن Setting tup the development enviornment and components

• استخراج داده ها از API و useEffect() Hook Extraction of the data from the API and useEffect() Hook

• استفاده از داده های API با کمک useState() Hook Using the data from the API with the help of useState() Hook

• ایجاد JSX برای صفحه اصلی و طراحی قسمت 1 Creating the JSX for the main page and designing part-1

• طراحی قسمت 2 پروژه Designing of the project part-2

• تکمیل پروژه Completion of the project

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

Project-48: برنامه ردیاب Covid-19 با استفاده از React.Js، CSS، React hooks Project-48 : Covid-19 tracker Application Using React.Js , CSS , React hooks

• معرفی پروژه. Introduction to the project.

• تنظیم محیط توسعه و اجزای آن Setting tup the development enviornment and components

• استخراج داده ها از API و useEffect() Hook Extraction of the data from the API and useEffect() Hook

• استفاده از داده های API با کمک useState() Hook Using the data from the API with the help of useState() Hook

• ایجاد JSX برای صفحه اصلی و طراحی قسمت 1 Creating the JSX for the main page and designing part-1

• طراحی قسمت 2 پروژه Designing of the project part-2

• تکمیل پروژه Completion of the project

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

Project-49: برنامه تولید کننده گیف تصادفی با استفاده از React.Js، React Hooks، CSS، API، Project-49 : Random gif generator app using React.Js , React Hooks , CSS , API ,

• معرفی پروژه Introduction to the project

• راه اندازی محیط توسعه و ایجاد اپلیکیشن React Setting up the development environment and creating the React app

• واکشی داده ها از API و استفاده از قلاب useEffect Fetching the data from the API and using useEffect hook

• تنظیم GIF توسط داده های JSON API برای جزء تصادفی Setting up the GIF by the JSON data of the API for the random component

• ایجاد کامپوننت Tag برای نوع خاصی از GIF بر اساس درخواست کاربران Creating the Tag component for a specific type of GIF based on the users que

• ایجاد و کار با قلاب سفارشی useGif Creation and working with the custom hook useGif

• عملکرد کامل پروژه با استفاده از قلاب سفارشی useGif Complete functionality of the project by using useGif custom hook

• طراحی کل برنامه قسمت 1 Designing the whole application part-1

• طراحی کل برنامه قسمت 2 Designing the whole application part-2

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

Project-49: برنامه تولید کننده گیف تصادفی با استفاده از React.Js، React Hooks، CSS، API، Project-49 : Random gif generator app using React.Js , React Hooks , CSS , API ,

• معرفی پروژه Introduction to the project

• راه اندازی محیط توسعه و ایجاد اپلیکیشن React Setting up the development environment and creating the React app

• واکشی داده ها از API و استفاده از قلاب useEffect Fetching the data from the API and using useEffect hook

• تنظیم GIF توسط داده های JSON API برای جزء تصادفی Setting up the GIF by the JSON data of the API for the random component

• ایجاد کامپوننت Tag برای نوع خاصی از GIF بر اساس درخواست کاربران Creating the Tag component for a specific type of GIF based on the users que

• ایجاد و کار با قلاب سفارشی useGif Creation and working with the custom hook useGif

• عملکرد کامل پروژه با استفاده از قلاب سفارشی useGif Complete functionality of the project by using useGif custom hook

• طراحی کل برنامه قسمت 1 Designing the whole application part-1

• طراحی کل برنامه قسمت 2 Designing the whole application part-2

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

Project-50: برنامه ردیاب Wildfire با استفاده از React.js، CSS، js ناهمزمان، NASA ope Project-50 : Wildfire tracker App USing React.js, CSS, asynchronous js, NASA ope

• معرفی پروژه Introduction to the project

• راه اندازی محیط توسعه و ایجاد اپلیکیشن react Setting up the development environment and creating the react app

• یکپارچه سازی API نقشه های گوگل و تنظیم آیکون ها Integrating the Google maps API and setting the icons

• واکشی داده ها از API و استفاده از نمادهای نقشه گوگل Fetching the data from the API and using the icons for the google map

• استفاده از داده های JSON از API و استفاده از آن در نقشه گوگل Using the JSON data from the API and using it in the google map

• ایجاد جعبه اطلاعات برای اطلاعات بیشتر در مورد هر آتش سوزی Creating the info box for additional info regarding every wildfire

• تکمیل پروژه. Completion of the project.

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

Project-50: برنامه ردیاب Wildfire با استفاده از React.js، CSS، js ناهمزمان، NASA ope Project-50 : Wildfire tracker App USing React.js, CSS, asynchronous js, NASA ope

• معرفی پروژه Introduction to the project

• راه اندازی محیط توسعه و ایجاد اپلیکیشن react Setting up the development environment and creating the react app

• یکپارچه سازی API نقشه های گوگل و تنظیم آیکون ها Integrating the Google maps API and setting the icons

• واکشی داده ها از API و استفاده از نمادهای نقشه گوگل Fetching the data from the API and using the icons for the google map

• استفاده از داده های JSON از API و استفاده از آن در نقشه گوگل Using the JSON data from the API and using it in the google map

• ایجاد جعبه اطلاعات برای اطلاعات بیشتر در مورد هر آتش سوزی Creating the info box for additional info regarding every wildfire

• تکمیل پروژه. Completion of the project.

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