vitalik-prog / react-webinar

React с нуля

Пошаговое преобразование кода в полноценное приложение на React. Примеры кода для вебинара. В ветке master последний шаг преобразований кода. Форкайте репозиторий и творите!

• Презентация

Шаг 1 (ветка step1)

git checkout step1

Одностраничное приложение (SPA) на чистом JavaScript. Создаём каждый тег методом document.createElement. Выводим список записей, добавляем, удалением записи. При изменении списка записей приложение пересоздаёт DOM.

Шаг 2 (ветка step2)

git checkout step2

Подключаем React классическим способом через тег <srcipt> - быстрый старт с нуля 🙂. Решаем задачу оптимального обновления DOM. В разметке используется React.createElement

Шаг 3 (ветка step3)

git checkout step3

Подключаем Babel классическим способом через тег <srcipt>. Всем скриптам добавляем транспиляцию современных возможностей JAvaScript и разметки в JSX. Код приложения переписываем на использование синтаксиса тегов JSX вместо React.createElement

Шаг 4 (ветка step4 или master)

git checkout step4

Подключаем Webpack для сборки приложения. Теперь у нас модульная архитектура, скрипты изолированные друг от друга, их не надо подключать вручную в <srcipt>. Исходный код перенесён в /src.

Лекция 2 (ветка lecture-2)

git checkout lecture-2

Компоненты, мемомизация React.memo, useCallback. Глупые компоненты. Состояние компонента, useState. Иммутабельность.

Лекция 3 (ветка lecture-3)

git checkout lecture-3

Состояние приложения. Контекст, useEffect, кастмоные хуки. Умные компоненты. Модульность хранилища. Интегарция АПИ