آموزش دوره جامع React JS: ساخت ۱۵ پروژه واقعی با ریکت - آخرین آپدیت
دانلود Ultimate React JS Course: Build 15 Web Projects with React
آیا از آموزشهای تئوری طولانی و خستهکننده که هرگز نحوه ساخت اپلیکیشنهای واقعی را نشان نمیدهند، خسته شدهاید؟
به دوره جامع React JS: ساخت ۱۵ پروژه واقعی با React 19 و Tailwind خوش آمدید؛ دورهای کاملاً عملی که طراحی شده تا ریکت را به درستترین شکل به شما بیاموزد: از طریق ساخت اپلیکیشنهای وب واقعی از صفر.
این فقط یک دوره دیگر ریکت پر از اسلاید و مفاهیم انتزاعی نیست. این یک تجربه یادگیری پروژه-محور است که در آن گام به گام با ما کدنویسی میکنید و مهارتهای واقعی را کسب میکنید که کارفرمایان به دنبال آن هستند.
این دوره درباره چیست؟
در این دوره، شما ۱۵ پروژه مدرن و واقعی را با استفاده از آخرین نسخه ریکت (React 19) و نسخه جدید Tailwind CSS 4.0 خواهید ساخت و در بسیاری از بخشها از CSS خالص استفاده میکنیم تا پایهای قوی در استایلدهی داشته باشید.
ما از ابتداییترین موارد مانند ساخت هدر و اسلایدر شروع میکنیم و تا پروژههای پیشرفتهای چون فرمهای احراز هویت، سبد خرید، اپلیکیشن هواشناسی با اتصال به API زنده، چتبات هوش مصنوعی، اپلیکیشن وبلاگ/اخبار، اپلیکیشن تقویم و موارد دیگر پیش میرویم.
هر پروژه هدف مشخصی دارد و یک مورد کاربردی در دنیای واقعی است که نه تنها مهارتهای فنی، بلکه اعتماد به نفس لازم برای ساخت اپلیکیشنهای شخصی یا کار در پروژههای حرفهای ریکت را به شما میدهد.
چه چیزهایی خواهید ساخت؟
نگاهی سریع به برخی از پروژههای جذابی که در این دوره خلق میکنید:
هدرها و چیدمانهای وبسایت تمیز و واکنشگرا
اسلایدرهای تعاملی تصویر و محتوا
اپلیکیشن هواشناسی زنده با استفاده از APIهای واقعی
فرمهای احراز هویت با اعتبارسنجی کامل ورودیها
سبد خرید با قابلیت افزودن/حذف و مدیریت وضعیت
اپلیکیشن تقویم شخصی با مدیریت تاریخهای پویا
چتبات مبتنی بر هوش مصنوعی با ابزارها و APIهای مدرن
اپلیکیشن وبلاگ/اخبار با رندرینگ پویا
و بسیاری دیگر از اپلیکیشنهای کوچک و جامع کاربردی
هر پروژه برای آموزش تکنیکهای جدید، تقویت متدهای بهینه و افزایش اعتماد به نفس شما از طریق تکرار و چالش طراحی شده است.
چه چیزهایی یاد میگیرید؟
مبانی اصلی ریکت: کامپوننتها، Props، State و Events
هوکهای ریکت مانند useState، useEffect، useRef و هوکهای سفارشی پیشرفته
روشهای مدرن استایلدهی با Tailwind CSS 4 و CSS خالص
نحوه ساختاردهی و سازماندهی پروژههای ریکت برای مقیاسپذیری
اتصال به APIها و مدیریت دادههای لحظهای
ساخت کامپوننتهای قابل استفاده مجدد و مدیریت وضعیتهای مشترک
اصول طراحی واکنشگرا (Responsive) و توسعه Mobile-First
جریانهای کاری توسعه عملی و ابزارهای مورد استفاده در محیطهای شغلی
این دوره سرشار از متدهای مدرن توسعه، توضیحات ساده و کدهای تمیزی است که به راحتی درک خواهید کرد. چه هدف شما تبدیل شدن به توسعهدهنده ریکت باشد، چه فریلنسینگ یا ساخت اپلیکیشنهای شخصی، این دوره تجربه و اعتماد به نفس لازم را به شما میدهد.
این دوره برای چه کسانی است؟
مبتدیانی که با HTML، CSS و JavaScript آشنا هستند
توسعهدهندگانی با دانش پایه ریکت که میخواهند اپلیکیشنهای واقعی بسازند
دانشجویانی که قصد دارند پورتفولیوی خود را با پروژههای مدرن تقویت کنند
یادگیرندگان خودآموزی که یادگیری عملی و پروژه-محور را ترجیح میدهند
هر کسی که میخواهد React 19 و Tailwind CSS 4 را از طریق ساخت پروژه یاد بگیرد
ابزارها و تکنولوژیهای مورد استفاده
React 19 – جدیدترین و قدرتمندترین نسخه ریکت
Tailwind CSS 4.0 – استایلدهی مدرن Utility-first
Pure CSS – برای انعطافپذیری و تجربه استایلدهی بنیادی
Live APIs – برای یکپارچهسازی دادههای واقعی
در پایان این دوره، شما نه تنها ریکت و Tailwind CSS را درک میکنید، بلکه ۱۵ پروژه صیقلخورده خواهید داشت که میتوانید در پورتفولیو یا رزومه خود ارائه دهید.
اگر آمادهاید تماشای آموزش را متوقف کرده و شروع به ساختن کنید، این دوره برای شماست.
بیایید با هم کد بزنیم و خلق کنیم.
مقدمه Introduction
-
مقدمه Introduction
تقویم Calendar
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
ساخت JSX Creating JSX
-
سفارشیسازی و استایلدهی اپلیکیشن Customizing and Styling the App
-
ناوبری تقویم و نمایش روزها Calendar Navigation and Days
-
بهبود پاپآپ رویدادها و افزودن رویداد جدید Enhancing Event Popup and Adding New Events
-
ویرایش و حذف رویدادهای موجود Editing and Deleting Existing Events
-
واکنشگرا کردن پروژه Making Project Responsive
اپلیکیشن هواشناسی زنده Live Weather App
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
ساخت JSX Creating JSX
-
استایلدهی و سفارشیسازی اپلیکیشن Styling and Customizing App
-
دریافت دادههای لحظهای Fetching Real-time Data
-
نمایش مکانها و جزئیات هواشناسی Displaying Locations and Weather Details
-
بهروزرسانی تصاویر و پسزمینههای هواشناسی Updating Weather Images and Backgrounds
-
نمایش تاریخ Displaying Date
-
مدیریت درخواستهای نامعتبر و افزودن لودر Dealing with Bad Request and Adding a Loader
اپلیکیشن تولید جملات انگیزشی Quote Generator App
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
ساخت صفحه جملات Creating the Quotes Page
-
دریافت دادهها Fetching Data
-
ساخت بخش علاقهمندیها Creating the Favorites Section
-
عملیاتی کردن بخش علاقهمندیها Making Favorites Section Functional
-
واکنشگرا کردن پروژه Making Project Responsive
چتبات هوش مصنوعی AI Chat Bot
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
ساخت صفحه شروع Creating Start Page
-
ساخت صفحه چت Creating Chat Page
-
ناوبری بین صفحات شروع و چت Navigating between Start and Chat Pages
-
ساخت قابلیتهای چت Building Chat Functionality
-
ساخت چتهای جدید Creating New Chats
-
رفع مشکل ایجاد چت جدید Fixing New Chat Creation
-
یکپارچهسازی با ChatGPT Integration ChatGPT
-
افزودن انتخابگر ایموجی Adding Emoji Picker
-
افزودن Local Storage Adding Local Storage
-
واکنشگرا کردن پروژه Making Project Responsive
اپلیکیشن تبدیل رنگ Color Converter App
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
ساخت تبدیلکننده رنگ - بخش اول Building Color Converter - Part 1
-
ساخت تبدیلکننده رنگ - بخش دوم Building Color Converter - Part 2
اپلیکیشن اخبار و وبلاگ News & Blogs App
-
پیشنمایش پروژه Project Preview
-
راهاندازی پروژه Project Setup
-
شروع به کار Getting Started
-
ساخت چیدمان پروژه Creating Project Layout
-
استایلدهی و سفارشیسازی هدر Styling and Customizing Header
-
استایلدهی و سفارشیسازی نوبار Styling and Customizing Navbar
-
ساخت محتوای خبری Creating News Content
-
دریافت اخبار - بخش اول Fetching News - Part 1
-
دریافت اخبار - بخش دوم Fetching News - Part 2
-
دریافت اخبار بر اساس دستهبندی Fetching News by Category
-
افزودن قابلیت جستجو Adding Search Functionality
-
ساخت مدال اخبار Creating News Modal
-
عملیاتی کردن مدال Making Modal Functional
-
ساخت مدال بوکمارکها Creating Bookmarks Modal
-
پیادهسازی قابلیت بوکمارک Implementing Bookmarking Feature
-
ذخیره بوکمارکها در Local Storage Saving Bookmarks in Local Storage
-
ساخت JSX برای ویجت هواشناسی Creating JSX for Weather Widget
-
استایلدهی و سفارشیسازی ویجت هواشناسی Styling and Customizing Weather Widget
-
عملیاتی کردن ویجت هواشناسی Making Weather Widget Functional
-
ساخت JSX برای تقویم Creating JSX for Calendar
-
عملیاتی کردن تقویم Making Calendar Functional
-
ساخت فوتر Creating Footer
-
ساخت و سفارشیسازی بخش وبلاگها Creating and Customizing Blogs Section
-
ساخت و سفارشیسازی فرم Creating and Customizing Form
-
ناوبری بین بخشها Navigating between Sections
-
ساخت و سفارشیسازی بخش وبلاگهای من Creating and Customizing My Blogs Section
-
ارسال و نمایش پستهای کاربر Submitting and Displaying User Posts
-
نمایش پیام ارسال و اعتبارسنجی فرمها Displaying Submission Message and Validating Forms
-
ذخیره وبلاگها در Local Storage Saving Blogs in the Local Storage
-
نمایش پستهای وبلاگ در مدال Displaying Blog Posts in the Modal
-
ویرایش و حذف پستهای وبلاگ Editing and Deleting the Blog Posts
-
واکنشگرا کردن پروژه Making Project Responsive
آکاردئون سوالات متداول FAQ Accordion
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
راهاندازی هدر و کنترلهای FAQ Setting Up the FAQ Header & Controls
-
پیادهسازی تغییر تم تاریک/روشن Implementing Dark/Light Theme Toggle
-
نمایش سوالات و پاسخها Displaying Questions & Answers
-
پیادهسازی قابلیت باز و بسته شدن (Expand/Collapse) Implementing Expand / Collapse Functionality
-
افزودن قابلیت Local Storage Adding Local Storage Functionality
هدر وبسایت با تغییر تم تاریک/روشن Website Header with Dark/Light Theme Toggle
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
ساخت تغییر تم تاریک/روشن Creating Dark/Light Theme Toggle
-
ساخت المانهای پسزمینه Creating Background Elements
-
طراحی المانهای بنر Designing Banner Elements
-
بجهای متحرک و Local Storage Bouncing Badges and Local Storage
سبد خرید Shopping Cart
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
نمایش محصولات Displaying the Products
-
ساخت کامپوننت CartItem Creating the CartItem Component
-
پیادهسازی Context API Implementing Context API
-
پیادهسازی قابلیت افزودن به سبد و حذف Implementing Add to Cart & Remove Functionality
-
مدیریت وضعیت سبد خرید و بهروزرسانی تعداد Managing Cart State & Updating Quantities
-
ساخت رابط کاربری سبد خرید Creating the Shopping Cart UI
-
افزودن و حذف آیتمهای سبد خرید Adding and Removing Cart Items
-
محاسبه قیمت کل Calculating Total Price
-
افزودن قابلیت Local Storage Adding Local Storage Functionality
-
واکنشگرا کردن پروژه Making Project Responsive
فروشگاه محصولات اپل Apple Products Store
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
پیادهسازی قابلیت زوم Implementing Zooming Functionality
-
ساخت نوبار Creating Navbar
-
ساخت صفحه اصلی Building the Home Page
-
ساخت صفحه آیفونها Creating the Iphones Page
-
ساخت صفحه مکبوک Creating the MacBook Page
-
ساخت صفحه اپل واچ Creating the Apple Watch Page
-
ساخت صفحه آیمک Building the Imac Page
-
پیادهسازی انتقال نرم بین صفحات Implementing Smooth Page Transitions
-
افزودن طراحی واکنشگرا Adding Responsive Design
-
ساخت نوبار موبایل کاربردی Creating a Functional Mobile Navbar
وبسایت پورتفولیو Portfolio Website
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
ساخت نوبار و راهاندازی بخش Hero Building Navbar & Setting Up Hero Section
-
افزودن افکت Hover به عبارت Hello در بخش Hero Adding Hover Effects to 'Hello' in the Hero Section
-
افزودن انیمیشن چرخش Adding Rotation Animation
-
بهبود بخش Hero با انیمیشنها Enhancing Hero Section with Animations
-
پیادهسازی حالت تاریک/روشن Implementing Dark/Light Mode
-
ساخت بخش خدمات (Services) Creating Services Section
-
ساخت بخش تماس با ما Creating Contact Section
-
ساخت دایرههای ناوبری Creating Navigation Circles
-
عملیاتی کردن ناوبری Making Navigation Work
-
واکنشگرا کردن پروژه Making Project Responsive
-
افزودن لودر Adding Loader
سیستم رتبهبندی ۵ ستاره 5-Star Rating System
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
ساخت سیستم رتبهبندی Building Rating System
اسلایدر تصاویر Image Slider
-
ساخت اسلایدر تصاویر Building Image Slider
فرمهای احراز هویت Authentication Forms
-
پیشنمایش پروژه Project Preview
-
نصب و راهاندازی Installation & Setup
-
ساخت فرمهای احراز هویت Building Authentication Forms
مدال سفر Travel Modal
-
ساخت مدال سفر Building Travel Modal
https://donyad.com/d/0dd80e
Code And Create
توسعه وب / طراحی وب 'کد و ایجاد' یک شرکت توسعه وب است که متشکل از توسعه دهندگان حرفه ای وب ، طراحان وب و مدرسان آنلاین باتجربه است. 'Code And Create' دوره های آموزشی آنلاین ایجاد می کند. بیشتر آنها پرفروش ترین ها در بستر Udemy هستند. ما در چندین فن آوری و زبان برنامه نویسی مانند HTML5 ، CSS3 ، SASS ، Bootstrap ، Material Design ، JavaScript ، ReactJS ، Angular ، VueJS ، NodeJS ، MongoDB ، PHP ، MySQL ، Python و موارد دیگر تخصص داریم ... "Code And Create" همچنین یک کانال YouTube به نام "Code And Create" را اجرا می کند ، جایی که ما محتوای آموزشی رایگان را در توسعه وب / طراحی / برنامه نویسی ایجاد می کنیم. ما از حضور در اینجا هیجان زده ایم و مشتاقیم دانش و تجربه خود را به اشتراک بگذاریم. مشتاقانه منتظر دیدن شما در دوره های ما هستیم.
George Lomidze
توسعه دهنده/طراح/معلم آنلاین
سلام،
من جورج هستم، یک برنامهنویس/طراح وب کامل، یکی از بنیانگذاران 'Code And Create' و نویسنده چندین کلاس در Skillshare.
من هیجان زده هستم که اینجا هستم و فرصتی برای کمک به مردم برای یادگیری یکی از جالب ترین و قدرتمندترین زمینه های امروزی دارم.
من تصمیم گرفتم دانش و تجربه خود را با جهان به اشتراک بگذارم و این دلیل اصلی حضور من در Skillshare است.
من در فناوریهای زیر تخصص دارم: HTML، CSS، SASS، Bootstrap، JavaScript، jQuery، React، React Native، NodeJS، Git و موارد دیگر...
منتظر دیدار شما در کلاسهایم هستم و به شما کمک میکنم تا یک توسعهدهنده وب حرفهای شوید.
Lasha Nozadze
توسعه دهنده وب و نرم افزار بنیانگذار 'CodeAndCreate'. سلام من لاشا هستم! من یک توسعه دهنده / طراح وب کاملاً پشته و کاملاً پشته ، مهندس نرم افزار با چندین سال تجربه و نویسنده چندین دوره پرفروش در Udemy هستم. وقتی وارد برنامه نویسی شدم ، حدس زدم که زندگی جدیدی پیدا کرده ام و از آن احساس هیجان می کنم ، زیرا معتقدم برنامه نویسی یکی از داغ ترین زمینه ها در قرن 21 است. تجربه من در توسعه وب شامل فن آوری های زیر است ، مانند HTML5 ، CSS3 ، SASS ، Bootstrap ، JavaScript ، React ، Node.js ، PHP ، MySQL و موارد دیگر ... خوشحالم که به شما گفتم ، تدریس اشتیاق دیگر من شد. من بسیار سپاسگزار و هیجان زده هستم که فرصتی پیدا کردم تا دانش و تجربه خود را با شما در میان بگذارم. من یک شرکت توسعه وب ایجاد کرده ام ، به نام 'CodeAndCreate' ، با دوستم جورج. 'CodeAndCreate' شرکتی است که برای اهداف زیر عمل می کند: "دانش خود را برای بهتر کردن دنیا کدگذاری ، ایجاد و به اشتراک بگذارید!"
نمایش نظرات