Учебное пособие в виде конспекта для студентов курса RS School React Course.
Разделы располагаются в порядке возрастания сложности, все примеры в разделах README.md написаны на JavaScript, там где есть уточнения с использованием TypeScript это указано.
Примеры кода в разделах написаны на TypeScript + Tailwind CSS.
- 📘 Знакомство с JSX - chapter-01
- 📘 Отрисовка элементов - chapter-02
- 📘 Компоненты - одна из основных концепций React - chapter-03
- 📘 Условный рендеринг - chapter-04
- 📘 Обработка событий - chapter-05
- 📘 Списки и ключи - React Key Concepts - chapter-06
- 📘 Состояние: память компонента, знакомство с useState - chapter-07
- 📘 Применение стилей CSS - краткий обзор - chapter-08
- 📘 React DOM компоненты - компоненты форм - chapter-09
- 📘 Совместное использование состояния между компонентами - chapter-10
- 📘 Знакомство с хуком useEffect - chapter-11
- 📘 Руководство React Quiz App - Мыслим как React - chapter-12
- 📘 Получение данных - Fetching data - chapter-13
- 📘 Маршрутизация в SPA - React Routing - chapter-14
- 📘 Знакомство с хуком useReducer - chapter-15
- 📘 Знакомство с хуком useRef - chapter-16
- 📘 Знакомство с хуком useContext - chapter-17
- 📘 Работа с формами - обзор библиотеки React Hook Form - chapter-18
- 📘 Знакомство с React API: createPortal - chapter-19
- 📘 Путеводитель по Flux в картинках - chapter-20
- 📘 Знакомство с Redux - chapter-21
Примеры приложений (деплой):
- 🔗 Приложение Todo App - chapter-09, chapter-15, chapter-17 , chapter-21
- 🔗 Приложение React Roadmap (Accordion) - chapter-10
- 🔗 Приложение с примерами useEffect - chapter-11
- 🔗 Приложение React Quiz App - chapter-12
- 🔗 Приложение Fetching Data - chapter-13
- 🔗 Приложение с React Router - chapter-14
- 🔗 Приложение с примерами useRef - chapter-16
- 🔗 Приложение с примерами React Hook Form - chapter-18
Information
Для работы с примерами кода клонируйте репозиторий
git clone https://github.com/shopot/react-101.git
cd react-101
Выберите раздел на который вы хотите перейти (например chapter-02)
git checkout chapter-02
Установите зависимости
npm install
Запустите dev-сервер
npm run dev