🔔 با توجه به بهبود نسبی اینترنت، آمادهسازی دورهها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دورهها ممکن است با کمی تأخیر انجام شود. مدت اشتراکهای تهیهشده محفوظ است.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش دوره مگا ریاکت: ساخت ۵۰ پروژه واقعی در ۵۰ روز
- آخرین آپدیت
دانلود React Mega Course: Build 50 Real World Projects in 50 Days
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
آموزش جامع برنامهنویسی React: توسعه اپلیکیشنهای وب با Socket، REST API، Firebase، React Hooks، Bootstrap و React.js
ساخت اپلیکیشنهای وب قدرتمند، سریع، کاربرپسند و واکنشی (Reactive)
یادگیری ایجاد پروژههای واقعی React
درک عمیق React و نحوه عملکرد آن
ایجاد رزومه کاری با پروژههای واقعی در یکی از پرطرفدارترین تکنولوژیهای توسعه وب
مشاهده فرآیند گام به گام طراحی و ساخت یک پروژه پیشرفته
مفاهیم عملی از پایه تا پیشرفته در توسعه React
پیشنیازها
دانش پایه React
اولین دلیل برای یادگیری ReactJS، محبوبیت و استفاده گسترده آن در میان توسعهدهندگان حرفهای است.
هر کسبوکار موفقی از React استفاده میکند و به طور روزانه به دنبال استعدادهای جدید در این زمینه است.
اگر در مورد اینکه آیا یادگیری React و تبدیل شدن به یک توسعهدهنده React میتواند منجر به شغل جدید شود شک دارید، نگران نباشید. هزاران فرصت شغلی برای توسعهدهندگان React (حتی دورکار) در حال حاضر در بازار وجود دارد.
پس اگر میخواهید یک توسعهدهنده React شوید، همین حالا اقدام کنید! این زمان مناسبی برای این کار است.
و دلیلی وجود دارد که چرا کسبوکارها React را اینقدر دوست دارند و از آن استفاده میکنند! این دلیل ما را به دلیل دوم برای یادگیری React در سال 2023 میرساند.
کار با React به لطف سادگی و زیرساخت ماژولار خود، زندگی ما را به عنوان توسعهدهنده آسانتر میکند. ما میتوانیم برنامههای خود را بسیار سریعتر بسازیم و نگهداری کنیم. مردم آن را دوست دارند، من آن را دوست دارم، و شما هم آن را دوست خواهید داشت!
در این دوره، برنامهنویسی React را به صورت عملی یاد میگیرید و اپلیکیشنهای وب واقعی را با استفاده از Socket، REST API، Firebase، React Hooks، Bootstrap، React.js، Webpack، HTML5، CSS3 و React-Router توسعه میدهید.
حقوق توسعهدهندگان React بر اساس منطقه
نیویورک - 142,350 دلار
جورجیا - 135,000 دلار
نیوجرسی - 131,625 دلار
کالیفرنیا - 130,000 دلار
ایلینوی - 126,750 دلار
آریزونا - 121,875 دلار
تگزاس - 117,000 دلار
در این دوره، ما روی 50 پروژه واقعی توسعه React کار خواهیم کرد که در زیر لیست شدهاند:
پروژه 50: اپلیکیشن ردیاب آتشسوزی جنگل با Reactjs، CSS، جاوا اسکریپت ناهمزمان، NASA Open API
نکته (این را بخوانید): این دوره ارزش وقت و پول شما را دارد، همین حالا ثبت نام کنید قبل از اینکه پیشنهاد منقضی شود.
سرفصل ها و درس ها
معرفی دوره
Course Introduction
معرفی دوره
Course Introduction
طرح کلی دوره
Course Outline
معرفی دوره
Course Introduction
معرفی دوره
Course Introduction
طرح کلی دوره
Course Outline
مقدمة الدورة
Introduction To The Course
مقدمة الدورة
Introduction To The Course
مخطط الدورة
Course Outline
المشروع 1: التجارة الإلكترونية (نسخة طبق الأصل من أمازون) - React، React-Context-API، Firebase
Project-1 : E-Commerce (Amazon Clone) - React, React-Context-Api, Firebase
مقدمه ای بر پروژه
Intro To The Project
مقدمة للمشروع - التجارة الإلكترونية (نسخة طبق الأصل من أمازون)
Intro To The Project - E-Commerce (Amazon Clone)
البدء مع React
Getting Started With React
رأس متجر الإلكترونيات
eShop Header
الصفحة الرئيسية لمتجر الإلكترونيات
eShop Home Page
خصائص React
React Props
التوجيه في React
React Routing
صفحة الدفع لمتجر الإلكترونيات
eShop Checkout Page
React Context API
React Context API
الإضافة إلى السلة
Add To Basket
الإزالة من السلة
Remove From Basket
المصادقة باستخدام Firebase
Authentication Using Firebase
المشروع 5: موقع Todolist - React، Material-UI، React Hooks، إدارة الحالة
Project-5 : Todolist Website - React, Material-Ui, React Hooks, State Management
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
المشروع 6: موقع مدونة - React، Material-UI، React Hooks، إدارة الحالة
Project-6 : Blog Website - React, Material-Ui, React Hooks, State Management
مقدمة للمشروع - موقع مدونة
Intro To The Project - Blog Website
البدء
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، إدارة الحالة
Project-7 : Social Networking Website - Material-Ui, React Hooks, State Manageme
مقدمة للمشروع - موقع شبكات اجتماعية
Intro To The Project - Social Networking Website
مقدمه ای بر پروژه
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، الحالة
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
المشروع 9: تطبيق بحث عن الرموز التعبيرية مصنوع من React - React، React DOM، 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
EmojiResults
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
المشروع 10: تطبيق شخصيات Breaking Bad مصنوع من React - React، React
Project-10 : A Breaking Bad Character Application Made With React - React, React
مقدمة التطبيق
App Introduction
إنشاء تطبيق React
Creating React Application
حفظ المنزل
House Keeing
إعادة صياغة الكود في تطبيقنا
Refactoring The Code in Our App
إضافة الحالة
Adding State
إنشاء شريط البحث
Creating SearchBar
جلب البيانات من API.
Fetching Data from API.
إضافة كود إلى CharacterList.
Adding Code to CharacterList.
عرض CharacterListItem
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
المشروع 11: تطبيق مولد اقتباسات عشوائية مصنوع من React ومنشور على
Project-11 : A Random Quote Generator Application Made With React And Deployed O
مقدمة التطبيق.
App Introduction.
إنشاء تطبيق React
Creating React Application
مكون "مرحباً بالعالم"
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
النشر على Heroku
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
المشروع 12: تطبيق مولد كلمات مرور مصنوع من React - React، React DOM،
Project-12 : A Password Generator Application Made With React - React, Reactdom,
مقدمة التطبيق
App Inroduction
إنشاء تطبيق React
Creating React Application
التشغيل الأول
First Run
تثبيت التبعيات
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.
إضافة Toast
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
المشروع 13: تطبيق اختبار مصنوع من React - React، React DOM، HTML5، SCSS
Project-13 : A Quiz App Made With React - React, Reactdom, Html5, Scss
مقدمة التطبيق
App Introduction
إنشاء تطبيق React
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
إدارة تدفق البيانات
Managing DataFlow
إعادة صياغة البيانات
Refactoring Data
إعداد البيانات في تطبيقنا
Settings Data in Our App
إعادة هيكلة النافذة المنبثقة
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
المشروع 14: تطبيق معرض صور Unsplash مصنوع من React - ReactDOM، React
Project-14 : UnSplash Image Gallery Application made with React -ReactDOM, React
مقدمة التطبيق
App Introduction
إنشاء تطبيق React
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
إضافة Submit Handle
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
المشروع 15: تطبيق تجريبي لـ React Router مصنوع من ReactJs - React Js، NPM،
Project-15 : A React Router Demo Application made with ReactJs -React Js , NPM ,
مقدمة التطبيق.
App Introduction.
إنشاء تطبيق React
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
المشروع 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
المشروع 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
المشروع 18: تطبيق سجل جهات اتصال React - React Js، NPM، CSS، إدارة الحالة
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
المشروع 19: تطبيق إنفاق الأموال مصنوع من React - React Js، NPM، CSS، إدارة الحالة
Project-19 : A Spend Money App made with React-React Js , NPM , CSS , State Mana
مقدمة التطبيق
App Introduction
إنشاء تطبيق React
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
المشروع 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
إنشاء أساليب في Billing
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
إضافة ديناميكيات إلى 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
المشروع 21: حاسبة مؤشر كتلة الجسم مصنوعة من React - React Js، NPM، CSS،
Project-21 : A Body Mass Index Calculator made with React-React Js , NPM , CSS ,
مقدمة التطبيق
App Intro
إنشاء تطبيق React.
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
المشروع 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
إنشاء Reducer.
Creating Reducer.
منشئو الإجراءات
Actions Creators
استخدام connect
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
المشروع 23: تطبيق لوحة النتائج مصنوع من 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
المشروع 24: تطبيق مولد Meta Tag مصنوع من 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
المشروع 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
تطبيق Trim لمسار React
Applying React Router Trim
إنشاء وتصميم شريط التنقل Trim
Creating & Styling The Nav Bar Trim
إنهاء شريط التنقل Trim.
Finishing Up The Nav bar Trim.
إنشاء الصفحة الرئيسية والتذييل Trim
Creating the Homepage and Footer Trim
صفحة القائمة ورسم الخرائط للبيانات
Menu Page And Mapping The Data
نصب و راه اندازی پروژه
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
المشروع 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
الوعود، 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
المشروع 27: تطبيق وصفات طعام - React.Js، Edamam API، Firebase للاستضافة
Project-27 : Food Recipe Application - React.Js, Edamam Api, Firebase For Hostin
مقدمة للمشروع
Introduction To The Project
توليد معرف API _ مفتاح
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
پیکربندی زمینه جهانی
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-اپلیکیشن جستجوی گوگل با استفاده از API – React.Js, TailwindCss, Googl
Project-33 : Google Search Application Using Api - React.Js, Tailwind Css, Googl
مقدمهای بر پروژه
Introduction To The Project
راهاندازی پروژه
Setting Up The Project
نصب Tailwind و Craco
Installing Tailwind And Craco
ساخت نویگیشن بار
Creating The Navbar
ساخت کامپوننت جستجو
Creating The Search Component.
تکمیل جستجو و ساخت لینکها
Completing The Search And Creating Links
ساخت کامپوننتهای Loading و Footer
Creating Loading And Footer Component
ساخت Global Context
Creating The Global Context
ساخت ساختار کامپوننت نتایج
Creating The Results Component Structure
توزیع دادهها بر اساس فیلد جستجو
Distributing Data According To Search Field.
راهاندازی Routeها و 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-بازی دوز با React js
Project-34 : Tic-Tac-Toe game with React js
مقدمهای بر پروژه بازی دوز
Introduction to Tic tac Toe game Project
راهاندازی محیط برای پروژه
Environment Setup for the project.
شروع با کامپوننت React و درک ساختار پوشهها
Getting started with React Component and Understanding Folder Structure
مقدمهای بر props در React و ارسال تابع به کامپوننتها
Introduction to react props and passing function to componnennts
رندر کردن بازیکن ما با استفاده از هوک useState
Rendering our player using useState Hooks
تغییر نوبت بین بازیکن X و O با استفاده از هوک useEffect
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، شامل useState
Project-35 : Word and letter counter apllication using react js, including useSt
مقدمهای بر شمارشگر کلمات با 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-اپلیکیشن تشخیص گفتار، دستیار صوتی با استفاده از 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 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، هوکها، هوکهای سفارشی، 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
فراخوانی توابع برای عملکرد کارت بودجه
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
تکمیل جزء کارت بودجه
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 (کلون اسپاتیفای) با استفاده از react js با 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
نصب Bootstrap از طریق ترمینال
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
مقدمهای بر پروژه اپلیکیشن تقویم ما با استفاده از 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
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-کلون یوتیوب با استفاده از react js
Project-43 : Youtube Clone using react js
مقدمهای بر کلون یوتیوب
Introduction to Youtube Clone
شروع با پروژه ما
Getting started with our project
راهاندازی fetch و یادگیری API
Initializing fetch and learning Api
تنظیم state برای استفاده از هوکها
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
دریافت رویداد drag and drop
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
مقدمهای بر هوکها و هوک useState
introduction to Hooks and useState hook
شروع با axios، جاوا اسکریپت ناهمزمان
Getting started with the axios , asynchronous Javscript
ادامه
Continue
طراحی کل اپلیکیشن بخش اول
The designing of the whole application Part-1.
طراحی کل اپلیکیشن بخش دوم
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 hooks
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
ساخت بخش اصلی بدنه بخش اول
creation of the main body part-1
راهاندازی عملکرد با استفاده از useState() و ساخت بدنه اصلی
setting up the functionality using useState() andcreation of the main body
کار با عملکرد با استفاده از useEffect() و ساخت بدنه اصلی
working with the functionality using useEffect() and creation of the main bo
عملکرد کامل پروژه
Complete functionality of the project
طراحی کل اپلیکیشن بخش اول
Designing the whole application part-1
طراحی کل اپلیکیشن بخش دوم
Designing the whole application part-2
طراحی کل اپلیکیشن بخش سوم
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
طراحی کامپوننتها بخش اول
Designing the components part-1
طراحی کامپوننتها بخش دوم و راهاندازی هوک useState
Designing of the components part-2 and setting up useState Hook
طراحی کامپوننتها بخش سوم
Designing of the components part-3
طراحی کامپوننت نویگیشن بار
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 بخش اول
Functionality of socket.io part-1
عملکرد socket.io بخش دوم
Functionality of socket.io part-2
عملکرد socket.io بخش سوم
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-اپلیکیشن ردیاب کووید-۱۹ با استفاده از 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
Extraction of the data from the API and useEffect() Hook
استفاده از دادههای API با کمک هوک useState()
Using the data from the API with the help of useState() Hook
ساخت JSX برای صفحه اصلی و طراحی بخش اول
Creating the JSX for the main page and designing part-1
طراحی پروژه بخش دوم
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
تنظیم گیف با دادههای JSON API برای کامپوننت تصادفی
Setting up the GIF by the JSON data of the API for the random component
ساخت کامپوننت Tag برای نوع خاصی از گیف بر اساس درخواست کاربر
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
طراحی کل اپلیکیشن بخش اول
Designing the whole application part-1
طراحی کل اپلیکیشن بخش دوم
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-اپلیکیشن ردیاب آتشسوزی جنگل با استفاده از React.js, CSS, asynchronous 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
ادغام Google Maps API و تنظیم آیکونها
Integrating the Google maps API and setting the icons
فچ کردن دادهها از API و استفاده از آیکونها برای Google Map
Fetching the data from the API and using the icons for the google map
استفاده از دادههای JSON از API و استفاده از آن در Google Map
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
شرکت فناوری اطلاعات سوفا دیجیتال یک شرکت فناوری اطلاعات است که با استفاده از آخرین فنآوریها، مشکلات تجاری شرکتهای جهانی را حل میکند. ما همچنین جدیدترین فن آوری هایی را که توسط چندین شرکت در دنیای واقعی پیاده سازی شده است را به دانش آموزان آموزش می دهیم. ما روی عمودها و دامنه های مختلف صنعت کار کرده ایم. ما می خواهیم همه چیزهایی را که در حین کار با شرکت ها یاد گرفته ایم را آموزش دهیم.
نمایش نظرات