📚 React.js introducing

Учебное пособие в виде конспекта для студентов курса RS School React Course.

Разделы располагаются в порядке возрастания сложности, все примеры в разделах README.md написаны на JavaScript, там где есть уточнения с использованием TypeScript это указано.

Примеры кода в разделах написаны на TypeScript + Tailwind CSS.

• Знакомство с JSX
• Отрисовка элементов
• Компоненты - одна из основных концепций React
• Условный рендеринг
• Обработка событий
• Списки и ключи - React Key Concepts
• Состояние: память компонента, знакомство с useState
• Применение стилей CSS - краткий обзор
• React DOM компоненты - компоненты форм
• Совместное использование состояния между компонентами
• Знакомство с хуком useEffect
• Руководство React Quiz App - Мыслим как React
• Получение данных - Fetching data
• Маршрутизация в SPA - React Routing
• Знакомство с хуком useReducer
• Знакомство с хуком useRef
• Знакомство с хуком useContext
• Работа с формами - обзор библиотеки React Hook Form
• Знакомство с React API: createPortal
• Путеводитель по Flux в картинках
• Знакомство с Redux
• Знакомство с Redux Toolkit (RTK)
• Знакомство с RTK Query
• Новые возможности в Redux Toolkit 2.0
• Знакомство MobX
• Знакомство с Zustand

Примеры приложений (деплой):

• 🔗 Приложение Todo App
  • form-components
  • hook-use-reducer
  • hook-use-context
• 🔗 Приложение React Roadmap (Accordion)
  • sharing-state
• 🔗 Приложение с примерами useEffect
  • hook-use-effect
• 🔗 Приложение React Quiz App
  • react-quiz-app
• 🔗 Приложение Fetching Data
  • fetching-data
• 🔗 Приложение с React Router
  • react-routing
• 🔗 Приложение с примерами useRef
  • hook-use-ref
• 🔗 Приложение с примерами React Hook Form
  • react-hook-form

Information

Для работы с примерами кода клонируйте репозиторий

git clone https://github.com/shopot/react-101.git
cd react-101

Выберите раздел на который вы хотите перейти (например redux-base)

git checkout redux-base

Установите зависимости

npm install

Запустите dev-сервер

npm run dev

📚 React Testing

• Основы тестирования
• Vitest: Установка и базовая настройка
• Обзор React Testing Library
• Обзор Mock Service Worker (MSW)

📚 React и TypeScript

• Конспект по TypeScript
• React TypeScript Cheatsheet

📚 Архитектура и паттерны

Coming soon...

📓️ Полезности

• 🔗 Соглашение о коммитах (conventionalcommits.org)