بیش از 30 پروژه React، آموزش React JS با ساخت بیش از 30 اپلیکیشن وب - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• چگونه از این دوره بیشترین بهره را ببریم؟ How to get the most out of this course ?

• منابع دوره و لینک‌های مفید Course Resources and Useful Links

تنظیمات اختیاری محیط و دوره فشرده ری‌اکت شامل پروژه Optional Env Setup & React Crash Course inkl Project

• راه‌اندازی محیط توسعه ری‌اکت Setting up the React Development Env.

• منابع Node.js و npm Node.js and npm resources

• دوره فشرده ری‌اکت React Crash Course

پروژه 01: اپلیکیشن امضای الکترونیکی P01 E-signature-App

• مرور کلی پروژه Project overview

• ایجاد کامپوننت عنوان و استایل‌دهی کلی در ری‌اکت Create Title component and general styling in React

• آموزش کار با useState و تغییر نام و تاریخ Learn how useState works and manipulate name and date

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 02: تصادفی‌سازی رنگ‌ها P02-Randomize-colors

• مرور کلی پروژه Project overview

• استفاده از رویدادها و توابع Using events and functions

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 03: لایک کردن عکس من P03-Like my photo

• مرور کلی پروژه Project overview

• طراحی کارت Card design

• نصب و استفاده از آیکون‌های ری‌اکت در پروژه Install and use React Icons to the project

• استفاده از useState ری‌اکت برای لایک با کلیک و دابل کلیک React useState to like on click and double Click

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 04: توصیفات P04- Testimonials

• مرور کلی پروژه Project overview

• منابع Resources

• ایجاد کامپوننت‌های دکمه ری‌اکت Create a React Button components

• دریافت پست‌ها/کاربران/نظرات با استفاده از هوک‌های useState و useEffect ری‌اکت Get Post/Users/Comments using React useState and useEffect Hooks

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 05: هشدارها P05- Alerts

• مرور کلی پروژه Project overview

• ایجاد یک کامپوننت هشدار Create a Alert component

• بستن خودکار هشدار با تاخیر با استفاده از تریگر زمانی Automatically close alert with delay using time trigger

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 06: کنترل‌کننده دما P06-Temperature-controller

• مرور کلی پروژه Project overview

• طراحی کامپوننت کنترل‌کننده Design the Controller component

• تغییر دما با استفاده از هوک useState ری‌اکت Change temperature using the React useState Hook

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 07: حالت تاریک P07-Dark-mode

• مرور کلی پروژه Project overview

• ایجاد یک کامپوننت بلاگ Create a Blog component

• حالت تاریک با استفاده از useContext Dark mode using useContext

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 08: اسلاید برای باز کردن قفل P08-Slide-to-unlock

• مرور کلی پروژه Project overview

• ایجاد رابط کاربری Create the UI

• ایجاد صفحه قفل Create Lock screen

• ایجاد وضعیت صفحه قفل Creating the Lock screen state

• قفل کردن صفحه Lock the screen

• تغییر وضعیت قفل و باز کردن قفل صفحه Toggle Lock and Unlock Screen

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 09: اپلیکیشن اسلایدر P09-Slider App

• مرور کلی پروژه Project overview

• ایجاد کامپوننت اسلایدر Create the Slider Component

• هوک useState برای تغییر دایره با استفاده از کامپوننت اسلایدر useState hook to manipulate the Circle using the slider Component

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 10: نوار جستجوی مخفی P10-Hidden-search-bar

• مرور کلی پروژه Project overview

• ایجاد کامپوننت جستجو و استایل‌دهی کلی Create the search component and general styling

• نمایش نوار جستجو Show search bar

• فوکوس خودکار روی ورودی با استفاده از هوک useRef Auto focus on the input using useRef Hook

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 11: پاپ‌آپ جادویی P11-Magic Popup

• مرور کلی پروژه Project overview

• ایجاد یک کامپوننت پاپ‌آپ Create a Popup component

• فعال کردن و بستن یک پاپ‌آپ Trigger a popup and close it

• پاپ‌آپ فعال‌شده با زمان Time Triggered popup

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 12: ردیاب پیشرفت پروژه P12- Project Progress tracker

• مرور کلی پروژه Project overview

• طراحی رابط کاربری و فوکوس خودکار ورودی با useRef و useEffect Ui design and input outo focus with useRef and useEffect

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

• افزودن چندین نوار پیشرفت با استفاده از متد map Add multiple Progress Bars using map method

• تغییر داده‌های هر نوار پیشرفت با useState Manipulate each Progress bars data with useState

• داده‌های تصادفی نوار پیشرفت با useEffect Random Progress Bar data with useEffect

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 13: جعبه گفتگو P13-Dialog-box

• مرور کلی پروژه Project overview

• طراحی رابط کاربری کامپوننت جعبه گفتگو Dialog Box component UI design

• کامپوننت جعبه گفتگوی "سلام" Hello Dialog Box component

• کامپوننت جعبه گفتگوی "لغو اشتراک" Unsubscribe Dialog Box component

• افکت انیمیشن پرشی Bounce animation effect

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 14: اپلیکیشن فیلتر مخاطبین P14-Filter-contacts-app

• مرور کلی پروژه Project overview

• طراحی رابط کاربری و فوکوس خودکار با useRef و useEffect UI design and Autofocus using useRef and useEffect

• وارد کردن داده‌ها از فایل JSON Import data from JSON file

• ایجاد یک کامپوننت مخاطب Create a Contact component

• فیلتر کردن مخاطبین Filer contacts

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 15: ثبت نام فرم ساده با اعتبارسنجی P15- Simple Form Registration with Validation

• مرور کلی پروژه Project overview

• رابط کاربری فرم Form Ui

• مدیریت ورودی‌ها و ثبت‌نام‌ها Handle inputs and Registrations

• اعتبارسنجی تکی فیلدهای ورودی Input fields individual validation

• ارسال و اعتبارسنجی فرم Form Submission and Validation

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 16: اپلیکیشن یادداشت‌ها P16-Notes-app

• مرور کلی پروژه Project overview

• طراحی رابط کاربری اپلیکیشن App UI design

• نصب و استفاده از کامپوننت‌های استایل‌دهی شده ری‌اکت Install and use React Styled Components

• افزودن یادداشت جدید Add New Note

• حذف یادداشت Delete Note

• ایجاد انواع یادداشت‌های تصادفی Create Random Note types

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 17: ناوبری واکنش‌گرا با منوی همبرگری در صفحه‌های کوچک P17- Responsive navigation with hamburger menu on small screens

• مرور کلی پروژه Project overview

• ایجاد یک کامپوننت ناوبری Create a nav component

• ایجاد یک کامپوننت آیتم ناوبری Create a Nav Item component

• استایل‌دهی ناوبری با استفاده از کامپوننت‌های استایل‌دهی شده ری‌اکت Style the Nav using React Styled Components

• نمایش و پنهان کردن نوار ناوبری با استفاده از useState و useEffect ری‌اکت Show and Hide the navbar using React useState and useEffect

• باز و بسته کردن نوار ناوبری با استفاده از useState و useEffect ری‌اکت Open and Close the Navbar using React useState and useEffec

• نمایش آیتم ناوبری فعال و تغییر عنوان صفحه با استفاده از useState ری‌اکت Show Active nav item and change page title using React useState

• فایل‌های پروژه تکمیل‌شده Finished project files

• به‌روزرسانی - افزودن صفحاتی برای ناوبری UPDATE - Adding pages to navigate to

پروژه 18: انیمیشن متن P18-Text-animation

• مرور کلی پروژه Project overview

• استایل رابط کاربری فرم Form UI style

• ایجاد یک کامپوننت FormGroup ری‌اکت Create a React FormGroup Component

• کار با کامپوننت گروه فرم Working with the form group component

• نصب و استفاده از کامپوننت متن متحرک Install and use Animated Text component

• پاک کردن و فوکوس مجدد فیلد ورودی Clear and Refocus the input field

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 19: ماشین حساب نرخ سود مرکب P19-compound-interest-rate-calc

• مرور کلی پروژه Project overview

• طراحی رابط کاربری با استفاده از کامپوننت‌های FormGroup UI Design using FormGroup Components

• دریافت مقادیر با استفاده از هوک useState Get values using useState hook

• ایجاد یک کامپوننت برای محاسبه سود Create a component to calc the interest

• محاسبه سود مرکب Calc the compounded interest

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 20: پنگوئن فضایی P20-Space-penguin

• مرور کلی پروژه Project overview

• طراحی محیط فضایی Design the Space ENV

• کامپوننت سفینه فضایی Space ship component

• کامپوننت‌های زمین و ماه Earth and Moon Components

• پرتاب و فرود سفینه Launch and Land the Ship

• تبدیل سفینه فضایی به پنگوئن Change the Spaceship in to a Penguin

• فایل‌های پروژه تکمیل‌شده Finished project files

کوئیز ری‌اکت React Quiz

• توانایی ری‌اکت خود را بیازمایید Test your React Might

پروژه 21: ردیاب وظایف P21-Tasks-tracker

• مرور کلی پروژه Project overview

• برنامه‌ریزی چیدمان کامپوننت‌ها برای رابط کاربری Planing the components layout for the UI

• استایل ردیاب وظیفه با استفاده از کامپوننت‌های استایل‌دهی شده Task tracker style using Styled components

• کامپوننت ورودی وظیفه Input Task Component

• ایجاد و افزودن یک وظیفه جدید Create and Add a New Task

• تکمیل و حذف وظیفه Complete and Delete Task

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 22: رابط کاربری بازی کارتی P22-Card-game-ui

• مرور کلی پروژه Project overview

• طراحی منوی شروع Design the Start Menu

• ایجاد کامپوننت کارت واحدها Create Units Card Component

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 23: فرم ورود متحرک P23-Animated-login-form

• مرور کلی پروژه Project overview

• برنامه‌ریزی و طراحی رابط کاربری با استفاده از کامپوننت‌ها UI planning and Design using Components

• طراحی کانتینر ورود با استفاده از کامپوننت‌های استایل‌دهی شده Login Container design using Styled Components

• انیمیشن‌سازی با استفاده از کامپوننت‌های استایل‌دهی شده Animate using Styled Components

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 24: دفترچه تلفن P24-phone-book

• مرور کلی پروژه Project overview

• رابط کاربری اصلی دفترچه تلفن Phone Book main UI

• ایجاد کامپوننت‌های React مخاطب Create a Contact React Components

• ایجاد کامپوننت‌های React لیست مخاطبین Create a Contact List React Components

• نمایش همه مخاطبین از پایگاه داده مخاطبین Display all contacts from the Contacts Database

• ایجاد کامپوننت‌های جستجوی قابل جابجایی و فیلتر مخاطبین Create the Toggle Search and Filter Contacts Components

• مرتب‌سازی مخاطبین A-Z و Z-A Sort Contact A-Z and Z-A

• جستجوی مخاطب Search contact

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 25: اپلیکیشن ماشین حساب و ردیاب هزینه‌ها P25-Expenses calculator and tracker App

• مرور کلی پروژه Project overview

• برنامه‌ریزی کامپوننت‌ها Components Planing

• ایجاد یک کامپوننت فرم هزینه‌ها Create a Expenses Form Component

• ایجاد یک کامپوننت لیست هزینه‌ها Create a Expenses List Component

• ایجاد یک کامپوننت آیتم لیست Create a List Item Component

• استایل‌دهی بودجه با استفاده از کامپوننت‌های استایل‌دهی شده Style the budget using Styled components

• افزودن وضعیت به تمام کامپوننت‌ها Add state to all components

• افزودن بودجه با استفاده از useState، useEffect و useRef Add budget using useState , useEffect and useRef

• ذخیره و بارگذاری داده‌ها از حافظه محلی (Local Storage) Save and Load data from Local Storage

• مدیریت تمام ورودی‌ها و ارسال‌ها Handle all input and submission

• افزودن شناسه یکتا Add unique Id

• نمایش تمام هزینه‌ها Display all expenses

• پاک کردن حافظه محلی و افزودن هزینه‌های جدید Clear local storage and add new expenses

• مدیریت پاک کردن تمام هزینه‌ها از حافظه و رابط کاربری Handle Clear all expenses from storage and UI

• مدیریت حذف یک هزینه از حافظه و رابط کاربری Handle Delete one expense from storage and UI

• مدیریت ویرایش یک هزینه از حافظه و رابط کاربری Handle Edit one expense from storage and UI

• محاسبه کل هزینه‌ها و صرفه‌جویی‌ها Calculate the total expenses and economies

• افزودن هشدارها Add Alerts

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 26: ماشین حساب وام مسکن P26-mortgage-calculator

• مرور کلی پروژه Project overview

• کامپوننت اصلی و طراحی رابط کاربری Main component and Ui design

• افزودن وضعیت به تمام کامپوننت‌ها Add State to all components

• محاسبه مبلغ وام Calculate the Loan Amount

• محاسبه پرداخت‌های ماهانه Calculate monthly payments

• نمایش پرداخت‌های ماهانه و هشدارها Display monthly payments and Alerts

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 27: فروشگاه دوره‌ها P27-Course-store

• مرور کلی پروژه Project overview

• ساختار پروژه و طراحی رابط کاربری Project structure and UI design

• ایجاد کامپوننت دوره‌ها Create the Courses component

• ایجاد و طراحی یک کامپوننت دوره Create a Course component and design

• ایجاد یک پایگاه داده برای تمام دوره‌ها Create a Database for all Courses

• پایگاه داده ارزها و دکمه‌های مبدل Currencies Database and converter Buttons

• تبدیل ارزها با هوک useContext ری‌اکت Convert the Currencies with the React useContext Hook

• تغییر ظاهر دوره بسته به ارز آن Change Course appearance depending on its currency

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 28: اپلیکیشن احراز هویت P28-Authentication App

• مرور کلی پروژه Project overview

• طراحی رابط کاربری Ui design

• لفاف فرم و انیمیشن لرزش Form Wrapper and Shake animation

• کانتینر احراز هویت Authentication container

• وضعیت احراز هویت با استفاده از کانتکست Authentication status using context

• احراز هویت نام کاربری و رمز عبور Authentication User name and password

• احراز هویت: ورود، خروج و تلاش مجدد Authentication Login Logout and Try again

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 29: سنتزکننده گفتار P29-Speech Synthesizer

• مرور کلی پروژه Project overview

• ساختار رابط کاربری و کامپوننت اصلی UI Structure and main component

• کامپوننت رابط کاربری راوی گفتار Speech Narrator UI Component

• تقسیم‌کننده متن و متن برجسته‌شده Text splitter and Highlighted Text

• شروع، توقف و نرخ Start Pause and Rate

• فایل‌های پروژه تکمیل‌شده Finished project files

پروژه 30: بارگذاری تنبل (Lazy Loading) P30-lazy-loading

• مرور کلی پروژه Project overview

• رابط کاربری Ui

• دریافت پست Get post

• پیاده‌سازی بارگذاری تنبل Implement Lazy load

• فایل‌های پروژه تکمیل‌شده Finished project files

بخش اضافی Extra section

• سخنرانی جایزه Bonus lecture