آموزش ریاکت (React) - آخرین آپدیت

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

مبانی Fundamentos

• ریاکت چیست و چه چیزی نیست O que é React e o que não é

• انواع اپلیکیشن‌های وب Tipos de Aplicações Web

• تفاوت DOM و Virtual DOM DOM x Virtual DOM

• درخت رندرینگ در React Árvore de Renderização do React

• موردی بررسی: چت فیس‌بوک پیشرفته O Caso Chat do Facebook-enhanced

• کامپوننت‌سازی و قابلیت استفاده مجدد Componentização e Reutilização

• کامپوننت‌سازی: یک مثال عملی Componentização: Um Exemplo Prático

• روش‌های اجرای React Formas de Rodar o React

• ایجاد فایل پایه Criando arquivo base

• افزونه‌های مفید React برای VSCode Extensões Úteis para o React no VSCode

• اولین برنامه Hello World ما Nosso primeiro "Hello World"

• مرور کلی Recap

• معرفی JSX (JavaScript XML) JSX - JavaScript XML

• فرگمنت‌ها (Fragments) Fragmentos

• Babel.js چیست O que é Babel.js

• تست با Babel REPL Testando com Babel REPL

• انواع CSS و نحوه استایل‌دهی به HTML Tipos de CSS e Como Vamos Estilizar o HTML

• تئوری کامپوننت‌ها Teoria dos Componentes

• ساخت یک کامپوننت ساده Criando um Componente Básico

• تئوری پراپ‌ها (Properties) Teoria das Propriedades

• ایجاد پراپ برای کامپوننت Criando Propriedades para o Componente

• نیازمندی‌های ماشین حساب Requisitos da Calculadora

• تحلیل لایوت و تعریف توکن‌های طراحی Analisando Layout e Definindo Design Tokens

• کامپوننت: Text Componente: Text

• کامپوننت: Button Componente: Button

• کامپوننت: Card Componente: Card

• کامپوننت: ماشین حساب Componente: Calculadora

• کامپوننت: تاریخچه عملیات Componente: Histórico de Operações

• اتمام لایوت Finalizando Layout

• جمع‌بندی Conclusão

• مقدمه Introdução

• به‌روزرسانی مدل Atualizando o Modelo

• تئوری رویدادها (Events) Teoria dos Eventos

• پیاده‌سازی عملی رویدادها Criando Eventos na Prática

• ریاکت هوکس (React Hooks) چیست O que são React Hooks

• توضیح useState Explicando o useState

• کاربرد useState Aplicando o useState

• استفاده از prevValue در useState O prevValue do useState

• شرط‌ها (Conditionals) Condicionais

• نمایش لیست‌ها Exibição de Listas

• فیلتر کردن لیست‌ها Filtragem de Listas

• اعمال مفهوم لیست‌ها در ماشین حساب Aplicando conceito de listas na calculadora

• ایجاد رویدادهای کلیک در ماشین حساب Criando eventos de clique na calculadora

• نمایش عملیات و نتیجه در نمایشگر ماشین حساب Mostrando operação e resultado no display da calculadora

• رفع باگ فاصله (Space) Arrumando bug do espaço

• هشدار درباره eval: قدرت زیاد، مسئولیت زیاد Alerta sobre o “eval” - Grandes poderes, grandes responsabilidades

• API کانتکست چیست و تفاوت آن با State O que é API de contexto e como se diferencia do estado

• ایجاد استیت سراسری با createContext و useContext Criando estado global com createContext e useContext

• ذخیره و نمایش تاریخچه عملیات با API کانتکست Persistindo e listando histórico de operação pela API de contexto

• چرخه حیات (Lifecycle) یک کامپوننت چیست O que é o “ciclo de vida” de um componente

• تابع کال‌بک در useEffect Função de callback do useEffect

• تابع بازگشتی (Cleanup) در useEffect Função de retorno do callback do useEffect

• وابستگی‌های (Dependencies) useEffect Dependências do useEffect

• مثال عملی useEffect Exemplo prático de useEffect

• ذخیره تاریخچه عملیات در localStorage Persistir histórico de operações no localStorage

• بازیابی تاریخچه عملیات هنگام بارگذاری صفحه Consumir histórico de operações ao recarregar a página

• هوکس سفارشی (Custom Hooks) چیست O que são hooks customizados

• ساخت هوک سفارشی useCalculator Criando o custom hook useCalculator

ساخت اولین پروژه با ابزارهای توسعه Criando primeiro projeto com tooling

• درک پروژه Entendendo o Projeto

• ایجاد پروژه با Vite Criando Projeto com Vite

• پاک‌سازی محتوای پیش‌فرض Vite Zerando o Conteúdo Padrão do Vite

• آماده‌سازی Tailwind CSS Preparando o Tailwind

• گسترش مقادیر در Tailwind Estendendo Valores no Tailwind

• خروجی گرفتن از فایل‌های استاتیک Exportando Arquivos Estáticos

• ساخت کامپوننت Text با CVA Criando Componente Text com CVA

• ساخت کامپوننت Icon Criando Componente Icon

• ساخت کامپوننت Badge Criando Componente Badge

• ساخت کامپوننت Button Criando Componente Button

• ساخت کامپوننت ButtonIcon Criando Componente ButtonIcon

• ساخت کامپوننت Input Text Criando Componente Input Text

• ساخت کامپوننت Input Checkbox Criando Componente Input Checkbox

• ساخت کامپوننت Card Criando Componente Card

• ساخت کامپوننت Container Criando Componente Container

• ساخت کامپوننت Skeleton Criando Componente Skeleton

• مسیریابی صفحه کامپوننت‌ها Roteando Página de Componentes

• ساختاربندی بدنه لایوت Estruturando Corpo do Layout

• ساخت کامپوننت خلاصه وظایف Criando Componente de Resumo das Tarefas

• ساخت کامپوننت وظیفه (Task) Criando Componente da Tarefa

• ساخت کامپوننت لیست وظایف Criando Componente de Lista de Tarefas

• آماده‌سازی Local Storage به عنوان پایگاه داده Preparando o Local Storage como Banco de Dados

• آماده‌سازی وظیفه Preparar Tarefa

• لیست کردن وظایف Listar Tarefas

• جمع‌آوری داده‌های فرم Coletando Dados do Formulário

• به‌روزرسانی وظیفه Atualizando Tarefa

• تغییر وضعیت وظیفه Alterar Status da Tarefa

• حذف وظیفه Deletar Tarefa

• به‌روزرسانی نشان‌های خلاصه وظایف Atualizando Badges de Resumo das Tarefas

• شبیه‌سازی درخواست‌های HTTP Simulando Requisições HTTP

پیشرفته در مبانی Avançando no fundamentos

• مقدمه‌ای بر ماژول Introdução ao módulo

• ارجاعات (useRef) Referências (useRef)

• مدیریت اسکرول با useRef Manipulando scroll com referência

• بهینه‌سازی داده‌ها با useMemo Memoização de dados com useMemo

• مثال با useMemo Exemplo com useMemo

• بهینه‌سازی توابع با useCallback Memoização de funções com useCallback

• مثال با useCallback Exemplo com useCallback

• ابزار مفید برای تحلیل رندرینگ Ferramenta útil para analise de renderizações

• آماده‌سازی json server Preparando json-server

• درخواست GET دستی Requisição GET manual

• درخواست با پروتکل‌های دیگر Requisição de outros protocolos

• درخواست API با React Query Requisição de API com React Query

• درک پروژه Entendendo o projeto

• کلون کردن پروژه پایه Clonando projeto base

• اجرای بک‌اند و تنظیم Postman Rodando o backend e configurando Postman

• کامپوننت InputText Componente InputText

• کامپوننت InputCheckbox Componente InputCheckbox

• طراحی لایوت کامپوننت InputSingleFile: حالت بدون فایل Montando layout do componente InputSingleFile - Estado parado

• طراحی لایوت کامپوننت InputSingleFile: حالت دارای فایل Montando layout do componente InputSingleFile - Estado com arquivo

• تعیین رفتار InputSingleFile: جابجایی بین حالت‌ها Definindo comportamento do componente InputSingleFile - Alternando estados

• تعیین رفتار InputSingleFile: اعمال اعتبارسنجی‌ها Definindo comportamento do componente InputSingleFile - Aplicando validações

• تعیین رفتار InputSingleFile: اعمال replaceBy Definindo comportamento do componente InputSingleFile - Aplicando o replaceBy

• آشنایی با Radix UI Entendendo o Radix UI

• کامپوننت Dialog Componente Dialog

• ساختاربندی مسیریابی (Routing) Estruturando roteamento

• کامپوننت Header Componente Header

• کامپوننت PhotosSearch با Debounce Componente PhotosSearch com debounce

• کامپوننت MainContent Componente MainContent

• کامپوننت PhotoWidget Componente PhotoWidget

• شبیه‌سازی (Mock) لیست عکس‌ها Mock da lista de fotos

• شبیه‌سازی فیلتر بر اساس آلبوم‌ها Mock do filtro por álbuns

• شبیه‌سازی صفحه جزئیات عکس: هدر صفحه Mock da página de detalhes da foto - Header da página

• شبیه‌سازی صفحه جزئیات عکس: تصویر و دکمه حذف Mock da página de detalhes da foto - Imagem e botão de excluir

• شبیه‌سازی صفحه جزئیات عکس: لیست آلبوم‌های قابل انتخاب Mock da página de detalhes da foto - Lista de álbuns selecionáveis

• شبیه‌سازی دیالوگ افزودن عکس: لایوت Mock do dialog de “Adicionar foto” - Layout

• شبیه‌سازی دیالوگ ایجاد آلبوم: لایوت Mock do dialog de “Criar álbum” - Layout

• شبیه‌سازی دیالوگ ایجاد آلبوم: تبدیل ImagePreview به حالت قابل انتخاب Mock do dialog de “Criar álbum” - Adaptando ImagePreview para ser selecionável

• ایجاد داده‌ها با Postman Criando dados com Postman

• آماده‌سازی Helper برای API Preparando helper para API

• تنظیم React Query Configurando React Query

• دریافت لیست آلبوم‌ها Retornando lista de álbuns

• دریافت لیست عکس‌ها Retornando lista de fotos

• آشنایی با NUQS Conhecendo o NUQS

• افزودن فیلتر آلبوم به لیست عکس‌ها Adicionando filtro por álbum na lista de fotos

• افزودن فیلتر متنی به لیست عکس‌ها Adicionando filtro por texto na lista de fotos

• دریافت جزئیات عکس Retornando detalhe da foto

• ناوبری بین عکس‌ها Navegando entre fotos

• آشنایی با Zod Conhecendo o Zod

• عکس جدید: ساخت اسکیما و اعتبارسنجی فیلدها Nova foto - montando schema e validando campos

• عکس جدید: پاک‌سازی فرم هنگام لغو Nova foto - limpando formulário ao cancelar

• عکس جدید: انتخاب آلبوم برای عکس‌ها Nova foto - selecionando álbuns para fotos

• عکس جدید: ایجاد عکس از طریق API Nova foto - criando foto via API

• عکس جدید: نمایش بازخورد با Toast Notification Nova foto - mostrando feedback com toast notification

• آلبوم جدید: ساخت اسکیما و اعتبارسنجی فیلدها Novo álbum - montando schema e validando campos

• آلبوم جدید: افزودن عکس‌ها هنگام ایجاد آلبوم Novo álbum - adicionando fotos ao criar um novo álbum

• آلبوم جدید: ایجاد آلبوم از طریق API Novo álbum - criando novo álbum via API

• مدیریت عکس‌ها در آلبوم‌ها Gerenciando fotos em álbuns

• حذف عکس Deletando foto

• دیپلوی اپلیکیشن در Railway Deploy da aplicação no Railway

ریاکت مدرن React moderno

• مقدمه Introdução

• بخش پایانی Encerramento