آموزش دوره تسلط Zero to Hero ReactJS [ویدئو]

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

تسلط بر HTML5 Mastering HTML5

• بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

• مقدمه ای بر توسعه وب Introduction to Web Development

• مقدمه ای بر توسعه وب Introduction to Web Development

• نصب و راه اندازی Installation and Setup

• نصب و راه اندازی Installation and Setup

• Html-Structure-Comments Html-Structure-Comments

• Html-Structure-Comments Html-Structure-Comments

• Head-Meta-Link-Script-Tags Head-Meta-Link-Script-Tags

• Head-Meta-Link-Script-Tags Head-Meta-Link-Script-Tags

• عنوان-p-span-div-br-hr-text Headings-p-span-div-br-hr-text

• عنوان-p-span-div-br-hr-text Headings-p-span-div-br-hr-text

• Anchor-img-tag Anchor-img-tag

• Anchor-img-tag Anchor-img-tag

• لیست مرتب و نامرتب Ordered and Unordered List

• لیست مرتب و نامرتب Ordered and Unordered List

• ستون ردیف جدول Table Row Column

• ستون ردیف جدول Table Row Column

• ورودی فرم ناحیه متنی را انتخاب کنید Form Input Select textarea

• ورودی فرم ناحیه متنی را انتخاب کنید Form Input Select textarea

• Inline-Block-Entities-Header-Footer-Section-Button-Article-Audio-Video-iframe Inline-Block-Entities-Header-Footer-Section-Button-Article-Audio-Video-iframe

• Inline-Block-Entities-Header-Footer-Section-Button-Article-Audio-Video-iframe Inline-Block-Entities-Header-Footer-Section-Button-Article-Audio-Video-iframe

تسلط بر CSS3 Mastering CSS3

تسلط بر CSS3 Mastering CSS3

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

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

• روش های مختلف استفاده از CSS Different Ways of Using CSS

• روش های مختلف استفاده از CSS Different Ways of Using CSS

• انتخابگرها در CSS Selectors-in-CSS

• انتخابگرها در CSS Selectors-in-CSS

• Debugging-Using-Developer-Tool Debugging-Using-Developer-Tool

• Debugging-Using-Developer-Tool Debugging-Using-Developer-Tool

• فونت ها در CSS Fonts-in-CSS

• فونت ها در CSS Fonts-in-CSS

• رنگ ها در CSS Colors-in-CSS

• رنگ ها در CSS Colors-in-CSS

• حاشیه-پس زمینه-ارتفاع-عرض Border-Background-Height-Width

• حاشیه-پس زمینه-ارتفاع-عرض Border-Background-Height-Width

• BoxModel-Margin-Padding BoxModel-Margin-Padding

• BoxModel-Margin-Padding BoxModel-Margin-Padding

• Float-Clear Float-Clear

• Float-Clear Float-Clear

• شبه انتخابگر Pseudo-Selector

• شبه انتخابگر Pseudo-Selector

• CSS-Display-Property CSS-Display-Property

• CSS-Display-Property CSS-Display-Property

• CSS-Position-Property CSS-Position-Property

• CSS-Position-Property CSS-Position-Property

• CSS-Visibility-Z-Index CSS-Visibility-Z-Index

• CSS-Visibility-Z-Index CSS-Visibility-Z-Index

• CSS-Flexbox CSS-Flexbox

• CSS-Flexbox CSS-Flexbox

• CSS-Responsive-Units-em-rem-vh-vw CSS-Responsive-Units-em-rem-vh-vw

• CSS-Responsive-Units-em-rem-vh-vw CSS-Responsive-Units-em-rem-vh-vw

• داستان های رسانه Media-Queries

• داستان های رسانه Media-Queries

• پیشبرد-شبه انتخابگر Advance-Pseudo-Selector

• پیشبرد-شبه انتخابگر Advance-Pseudo-Selector

• انتخابگر نهمین nth Selector

• انتخابگر نهمین nth Selector

• پیش-پس-شبه انتخابگر Before-After-Pseudo-Selector

• پیش-پس-شبه انتخابگر Before-After-Pseudo-Selector

• CSS-Box-Text-Shadow CSS-Box-Text-Shadow

• CSS-Box-Text-Shadow CSS-Box-Text-Shadow

• CSS-Custom-Variables CSS-Custom-Variables

• CSS-Custom-Variables CSS-Custom-Variables

• CSS-Animation-Keyframes-Part-1 CSS-Animation-Keyframes-Part-1

• CSS-Animation-Keyframes-Part-1 CSS-Animation-Keyframes-Part-1

• CSS-Animation-Keyframes-Part-2 CSS-Animation-Keyframes-Part-2

• CSS-Animation-Keyframes-Part-2 CSS-Animation-Keyframes-Part-2

• انتقال Transition

• انتقال Transition

• تبدیل Transform

• تبدیل Transform

تسلط بر جاوا اسکریپت و ES6 Mastering JavaScript and ES6

تسلط بر جاوا اسکریپت و ES6 Mastering JavaScript and ES6

• مقدمه ای بر دنیای جاوا اسکریپت Introduction to the World of JavaScript

• مقدمه ای بر دنیای جاوا اسکریپت Introduction to the World of JavaScript

• محبوبیت جاوا اسکریپت و تکامل ECMAScript JavaScript Popularity and ECMAScript Evolution

• محبوبیت جاوا اسکریپت و تکامل ECMAScript JavaScript Popularity and ECMAScript Evolution

• نصب و راه اندازی Installation and Setup

• نصب و راه اندازی Installation and Setup

• نوشتن اولین جاوا اسکریپت Writing your First JavaScript

• نوشتن اولین جاوا اسکریپت Writing your First JavaScript

• نوع داده و متغیرها Datatype and Variables

• نوع داده و متغیرها Datatype and Variables

• نظرات در جاوا اسکریپت Comments in JavaScript

• نظرات در جاوا اسکریپت Comments in JavaScript

• اپراتورها و اپراتورها Operators and Operands

• اپراتورها و اپراتورها Operators and Operands

• الحاق رشته String Concatenation

• الحاق رشته String Concatenation

• توابع رشته String Functions

• توابع رشته String Functions

• دامنه در جاوا اسکریپت Scope in JavaScript

• دامنه در جاوا اسکریپت Scope in JavaScript

• If Else Switch Case If Else Switch Case

• If Else Switch Case If Else Switch Case

• شی در جاوا اسکریپت Object in JavaScript

• شی در جاوا اسکریپت Object in JavaScript

• آرایه در جاوا اسکریپت Array in JavaScript

• آرایه در جاوا اسکریپت Array in JavaScript

• عملکرد در جاوا اسکریپت Function in JavaScript

• عملکرد در جاوا اسکریپت Function in JavaScript

• اعلان هشدار تایید تجزیه در جاوا اسکریپت Alert Prompt Confirm Parse in JavaScript

• اعلان هشدار تایید تجزیه در جاوا اسکریپت Alert Prompt Confirm Parse in JavaScript

• حلقه ها در جاوا اسکریپت Loops in JavaScript

• حلقه ها در جاوا اسکریپت Loops in JavaScript

• اپراتور گسترش Spread Operator

• اپراتور گسترش Spread Operator

• اپراتور سه تایی Ternary Operator

• اپراتور سه تایی Ternary Operator

• عملکرد فیلتر آرایه Array Filter Function

• عملکرد فیلتر آرایه Array Filter Function

• آشنایی با DOM Understanding DOM

• آشنایی با DOM Understanding DOM

• دستکاری DOM با جاوا اسکریپت Manipulating DOM with JavaScript

• دستکاری DOM با جاوا اسکریپت Manipulating DOM with JavaScript

• Event و Event-Listener در جاوا اسکریپت Event and Event-Listener in JavaScript

• Event و Event-Listener در جاوا اسکریپت Event and Event-Listener in JavaScript

• setTimeout و clearTimeout setTimeout and clearTimeout

• setTimeout و clearTimeout setTimeout and clearTimeout

• setInterval و clearInterval setInterval and clearInterval

• setInterval و clearInterval setInterval and clearInterval

• تاریخ و زمان قسمت 1 Date and Time Part-1

• تاریخ و زمان قسمت 1 Date and Time Part-1

• تاریخ و زمان قسمت 2 Date and Time Part-2

• تاریخ و زمان قسمت 2 Date and Time Part-2

• شی JSON و دستکاری آن JSON Object and its Manipulation

• شی JSON و دستکاری آن JSON Object and its Manipulation

• تابع پیکان Arrow Function

• تابع پیکان Arrow Function

• پنجره، سند، محل ذخیره‌سازی محلی، ذخیره‌سازی جلسه Window, Document, Localstorage, Sessionstorage

• پنجره، سند، محل ذخیره‌سازی محلی، ذخیره‌سازی جلسه Window, Document, Localstorage, Sessionstorage

• شیء ریاضی و توابع مختلف Math Object and Various Functions

• شیء ریاضی و توابع مختلف Math Object and Various Functions

• پروژه 1 Project 1

• پروژه 1 Project 1

• پروژه 2 Project 2

• پروژه 2 Project 2

• پروژه 3 Project 3

• پروژه 3 Project 3

تسلط بر ReactJS و Bootstrap 5 Mastering ReactJS and Bootstrap 5

تسلط بر ReactJS و Bootstrap 5 Mastering ReactJS and Bootstrap 5

• معرفی ReactJS و راه اندازی محیط ReactJS Introduction and Environment Setup

• معرفی ReactJS و راه اندازی محیط ReactJS Introduction and Environment Setup

• ایجاد React App Create React App

• ایجاد React App Create React App

• بررسی جریان برنامه و فایل های پروژه Program Flow and Project Files Walkthrough

• بررسی جریان برنامه و فایل های پروژه Program Flow and Project Files Walkthrough

• انواع کامپوننت ها در React Types of Components in React

• انواع کامپوننت ها در React Types of Components in React

• ایجاد و استفاده از 1st کامپوننت عملکردی Creating and Using 1st Functional Component

• ایجاد و استفاده از 1st کامپوننت عملکردی Creating and Using 1st Functional Component

• ایجاد کامپوننت 1st Stateful Class Creating 1st Stateful Class Component

• ایجاد کامپوننت 1st Stateful Class Creating 1st Stateful Class Component

• کامپوننت عملکردی ES6، صادرات و واردات ES6 Functional Component, Export and Import

• کامپوننت عملکردی ES6، صادرات و واردات ES6 Functional Component, Export and Import

• مقایسه بین مولفه عملکردی و کلاسی Comparison Between Functional and Class Component

• مقایسه بین مولفه عملکردی و کلاسی Comparison Between Functional and Class Component

• معرفی React Hooks React Hooks Introduction

• معرفی React Hooks React Hooks Introduction

• Jsx توضیح داد Jsx Explained

• Jsx توضیح داد Jsx Explained

• لوازم در کامپوننت عملکردی و کلاسی Props in Functional and Class Component

• لوازم در کامپوننت عملکردی و کلاسی Props in Functional and Class Component

• دولت در مقابل Props State versus Props

• دولت در مقابل Props State versus Props

• شیرجه عمیق به حالت setstate Deep Dive into setstate

• شیرجه عمیق به حالت setstate Deep Dive into setstate

• فرم رسیدگی در جزء 1 کلاس Handling Form in Class Component Part 1

• فرم رسیدگی در جزء 1 کلاس Handling Form in Class Component Part 1

• فرم رسیدگی در جزء 2 کلاس Handling Form in Class Component Part 2

• فرم رسیدگی در جزء 2 کلاس Handling Form in Class Component Part 2

• روش بارگذاری چرخه حیات componentDidMount componentDidMount Lifecycle Onload Method

• روش بارگذاری چرخه حیات componentDidMount componentDidMount Lifecycle Onload Method

• برنامه React جدید ایجاد کنید و ساختار پروژه را درک کنید. Create New React App and Understand Project Structure.

• برنامه React جدید ایجاد کنید و ساختار پروژه را درک کنید. Create New React App and Understand Project Structure.

• پاکسازی پروژه Project Cleanup

• پاکسازی پروژه Project Cleanup

• نصب بوت استرپ و پسوند React Vscode Installing Bootstrap and React Vscode Extension

• نصب بوت استرپ و پسوند React Vscode Installing Bootstrap and React Vscode Extension

• صفحه اصلی درباره تماس را ایجاد کنید Create Home About Contact Page

• صفحه اصلی درباره تماس را ایجاد کنید Create Home About Contact Page

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

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

• افزودن React-Router-Dom و مسیرهای مختلف Adding React-Router-Dom and Different Routes

• افزودن React-Router-Dom و مسیرهای مختلف Adding React-Router-Dom and Different Routes

• پیوند و NavLink برای جلوگیری از بارگذاری مجدد صفحه Link and NavLink to avoid Page Reload

• پیوند و NavLink برای جلوگیری از بارگذاری مجدد صفحه Link and NavLink to avoid Page Reload

• طراحی صفحه درباره و تماس با ما Designing About and Contact Page

• طراحی صفحه درباره و تماس با ما Designing About and Contact Page

• صفحه یافت نشد Page Not Found

• صفحه یافت نشد Page Not Found

• Bootstrap در مقابل React-Bootstrap Bootstrap Versus React-Bootstrap

• Bootstrap در مقابل React-Bootstrap Bootstrap Versus React-Bootstrap

• استفاده از استایل سفارشی Using Custom Styling

• استفاده از استایل سفارشی Using Custom Styling

• راه اندازی Backend Fake api و db Setting Up Backend Fake api and db

• راه اندازی Backend Fake api و db Setting Up Backend Fake api and db

• useState useEffect axios api call و React Dev Tools Extension useState useEffect axios api call and React Dev Tools Extension

• useState useEffect axios api call و React Dev Tools Extension useState useEffect axios api call and React Dev Tools Extension

• نمایش همه کاربران در رابط کاربری Frontend Showing All Users on Frontend UI

• نمایش همه کاربران در رابط کاربری Frontend Showing All Users on Frontend UI

• اضافه کردن دکمه های اکشن در فرانت اند Adding Action Buttons on Frontend

• اضافه کردن دکمه های اکشن در فرانت اند Adding Action Buttons on Frontend

• افزودن مسیریابی ناوبری کاربر Add User Navigation Routing

• افزودن مسیریابی ناوبری کاربر Add User Navigation Routing

• ایجاد فرم افزودن کاربر Create Add User Form

• ایجاد فرم افزودن کاربر Create Add User Form

• داده های متغیر حالت را تنظیم کنید Set State Variable Data

• داده های متغیر حالت را تنظیم کنید Set State Variable Data

• ذخیره کاربر جدید در DB از طریق ارسال تماس api Save New User to DB Via Post api Call

• ذخیره کاربر جدید در DB از طریق ارسال تماس api Save New User to DB Via Post api Call

• روش دیگری برای ذخیره داده های کاربر در DB با استفاده از Post api Another Way to Save User Data in DB Using Post api

• روش دیگری برای ذخیره داده های کاربر در DB با استفاده از Post api Another Way to Save User Data in DB Using Post api

• ویرایش داده‌های کاربر از قبل جمعیت Edit User Prepopulate User Data

• ویرایش داده‌های کاربر از قبل جمعیت Edit User Prepopulate User Data

• کاربر به روز شده را در DB ذخیره کنید Save Updated User in DB

• کاربر به روز شده را در DB ذخیره کنید Save Updated User in DB

• حذف یک کاربر Delete a User

• حذف یک کاربر Delete a User

• مشاهده جزئیات کاربر View User Details

• مشاهده جزئیات کاربر View User Details

• مشاهده آدرس کاربر و اطلاعات شرکت View User Address and Company Info

• مشاهده آدرس کاربر و اطلاعات شرکت View User Address and Company Info

• نمایش اسپینر در حال بارگذاری Showing Loading Spinner

• نمایش اسپینر در حال بارگذاری Showing Loading Spinner