مبانی ری‌اکت و آموزش راه‌اندازی محیط توسعه مدرن - آخرین آپدیت

مقدمه Introduction

• تریلر دوره ری‌اکت جی‌اس React JS Course Trailer

پایه‌های ری‌اکت و راه‌اندازی محیط توسعه مدرن Foundations of React and Modern Development Setup

• ری‌اکت چیست؟ What Is React?

• فلسفه‌های بنیادی ری‌اکت Core Philosophies of React

• مزایا – عملکرد، قابلیت بازاستفاده، جامعه کاربری قوی، سئو (با SSR/SSG) Benefits – Performance, Reusability, Strong Community, SEO (with SSR/SSG)

• کاربردها – SPAs، PWAs، اپلیکیشن‌های موبایل (با React Native)، اپلیکیشن‌های دسکتاپ Use Cases – SPAs, PWAs, Mobile Apps (with React Native), Desktop Apps

• DOM مجازی (Virtual DOM) – نحوه عملکرد و مزایای آن The Virtual DOM – How It Works, Its Advantages

• الگوریتم Reconciliation – توضیح دقیق فرآیند Diffing Reconciliation Algorithm – Detailed Explanation of the Diffing Process

• معماری React Fiber React Fiber Architecture

• راه‌اندازی محیط توسعه مدرن Set Up Modern Development Environment

• ویژوال استودیو کد و افزونه‌ها VS Code and Extensions

• ابزارهای توسعه‌دهنده مرورگر (DevTools) Browser Developer Tools

• انتخاب استارتر مناسب برای پروژه Choosing Your Project Starter

• ساختار استاندارد پروژه‌های Vite/Next.js Standard Vite/Next.js Project Structure

• ساختار Feature First یا Domain Driven Feature-First/Domain-Driven

• طراحی اتمیک (Atomic Design) Atomic Design

• معماری لایه‌ای (Layered Architecture) Layered Architecture

• اجرای اولین پروژه ری‌اکت Running Your First React Project

مبانی ری‌اکت و مفاهیم بنیادی React Fundamentals and Core Concepts

• سینتکس، جایگذاری عبارت‌ها، اتریبیوت‌ها و فرزندان Syntax, Embedding Expressions, Attributes, Children

• تفاوت‌ها با HTML Differences from HTML

• بهترین روش‌ها برای نوشتن JSX تمیز Best Practices for Writing Clean JSX

• کامپوننت‌ها – تابعی و کلاسی Components – Functional and Class

• کامپوننت‌های تابعی (Functional Components) Functional Components

• کامپوننت‌های کلاسی (Class Components) Class Components

• مقایسه کامپوننت‌های تابعی در مقابل کلاسی Functional vs Class Component

• درک مفهوم پراپ‌ها (Props) Understanding Props

• دسترسی به پراپ‌ها Accessing Props

• انواع پراپ‌ها (Prop Types) Prop Types

• بهترین روش‌ها برای طراحی کارت کاربر User Card Best Practices

• مقدمه‌ای بر Prop Drilling Introduction to Prop Drilling

• راهکار – ترکیب کامپوننت‌ها (Component Composition) Solution – Component Composition

• راهکار – Context API Solution – Context API

• خلاصه – بهترین روش‌ها Summary – Best Practices

• مقدمه‌ای بر useState Introduction to the useState

• مدیریت رویدادهای کاربر Handling User Events

• بهترین روش‌ها برای ساخت شمارنده Counter Best Practices

• رندرینگ شرطی – عملگرهای سه تایی (Ternaries) Conditional Rendering – Ternaries

• لیست‌ها در ری‌اکت Lists in React

• کلیدها (Keys)، Reconciliation و جمع‌بندی Keys, Reconciliation, and Summary

استایل‌دهی در برنامه‌های ری‌اکت Styling in React Applications

• استایل‌های خطی (Inline Styles) – کاربردها و محدودیت‌ها Inline Styles – Use Cases and Limitations

• شیت‌های CSS – CSS سراسری و وارد کردن CSS CSS Stylesheets – Global CSS and Importing CSS

• ماژول‌های CSS – محدوده محلی و مزایا برای پروژه‌های بزرگ CSS Modules – Local Scope and Benefits for Larger Projects

• Styled Components – بخش اول Styled Components – Part 1

• Styled Components – بخش دوم Styled Components – Part 2

• استایل‌دهی پویا (Dynamic Styling) Dynamic Styling

• پشتیبانی از تمینگ (Theming) Theming Support

• کتابخانه Emotion Emotion Library

• مزایا و معایب CSS-in-JS Pros and Cons of CSS-in-JS

• معرفی Tailwind CSS Introducing Tailwind

• راه‌اندازی Tailwind CSS در پروژه ری‌اکت (با Vite) Setting Up Tailwind CSS in a React Project (Vite)

• مفاهیم بنیادی و تمینگ با tailwind.config.js Core Concepts and Theming with tailwind.config.js

• مثال‌های طراحی واکنش‌گرا (Responsive) Responsive Design Examples

• بهترین روش‌ها برای رویکرد Mobile First Mobile-First Best Practices

• توضیح طراحی کارت کاربر واکنش‌گرا Responsive User Card Explanation

• پیاده‌سازی عملی کارت کاربر واکنش‌گرا Responsive User Card Practical