CodeDala
⚛
💻 For developers

React Start

Components, state, effects — modern frontend

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 30 lessons⏱ 1-2 evenings🎓 Advanced
🎯 Mission
Master React Start
⚡+350XP
🏆CertificatePDF
🎓Course complete
Progress0 / 30 · 0%
Next up: Что такое React

Course program

01

Компоненты и JSX

0 / 5 lessons
⌄
  1. 01

    Что такое React

    Библиотека•Компонент•JSX⚡ +10
    ▶ Now
  2. 02

    Правила JSX

    Один корневой тег•Fragment <>•className⚡ +10
    Open
  3. 03

    Выражения в JSX

    Фигурные скобки {}•JS-выражения•Шаблонный текст⚡ +10
    Open
  4. 04

    Использование компонентов

    Вызов как тег•Вложенность•Повторное использование⚡ +10
    Open
  5. 05

    TypeScript и TSX

    Расширение TSX•Аннотация типов•Зачем TypeScript⚡ +10
    Open
02

Props

0 / 5 lessons
⌄
  1. 06

    Что такое props

    Объект props•Как параметр•Передача значений⚡ +10
    Open
  2. 07

    Деструктуризация props

    Деструктуризация•Чистая запись•Раскрытие параметра⚡ +10
    Open
  3. 08

    Интерфейс для props

    interface тип•Тип Props•Повторное использование⚡ +10
    Open
  4. 09

    Значения props по умолчанию

    Значение по умолчанию•Деструктуризация = значение•Необязательный prop⚡ +10
    Open
  5. 10

    Проп children

    props children•Компонент-обёртка•Тип ReactNode⚡ +10
    Open
03

Состояние useState

0 / 5 lessons
⌄
  1. 11

    Введение в useState

    Хук useState•Переменная состояния•Ре-рендер⚡ +10
    Open
  2. 12

    Типы в useState

    Параметр типа•boolean состояние•string состояние⚡ +10
    Open
  3. 13

    Несколько переменных состояния

    Несколько useState•Независимые состояния•Данные формы⚡ +10
    Open
  4. 14

    Состояние-объект

    Объект состояния•Spread синтаксис•Иммутабельность⚡ +10
    Open
  5. 15

    Мини-проект счётчик

    Счётчик•Увеличение/Уменьшение•Сброс в ноль⚡ +10
    Open
04

События и формы

0 / 5 lessons
⌄
  1. 16

    Событие onClick

    Событие onClick•Обработчик события•Анонимная функция⚡ +10
    Open
  2. 17

    Событие onChange

    Событие onChange•Объект события e•Значение input⚡ +10
    Open
  3. 18

    Событие onSubmit

    Событие onSubmit•e.preventDefault()•Отправка формы⚡ +10
    Open
  4. 19

    Управляемый input

    Управляемый input•value + onChange•Синхронизация состояния⚡ +10
    Open
  5. 20

    Мини-проект форма Todo

    Создание Todo•Форма отправки•Добавление в список⚡ +10
    Open
05

Списки и условия

0 / 5 lessons
⌄
  1. 21

    Рендер списка через .map()

    .map() рендеринг•Массив JSX•Список элементов⚡ +10
    Open
  2. 22

    Проп key

    Проп key•Уникальный ID•Индекс vs ID⚡ +10
    Open
  3. 23

    Условный рендер через тернарный оператор

    Условный рендер•Тернарный оператор•Синтаксис ? :⚡ +10
    Open
  4. 24

    Условный рендер через оператор &&

    Оператор &&•Одностороннее условие•Краткий рендер⚡ +10
    Open
  5. 25

    Мини-проект список Todo

    Список Todo•Рендер списка•Функция отметки⚡ +10
    Open
06

useEffect и композиция

0 / 5 lessons
⌄
  1. 26

    Введение в useEffect

    Хук useEffect•Побочный эффект•После рендера⚡ +10
    Open
  2. 27

    Функция очистки useEffect

    Функция очистки•return () => {}•Очистка setInterval⚡ +10
    Open
  3. 28

    Композиция компонентов

    Композиция•Компонент-обёртка•Вложенные компоненты⚡ +10
    Open
  4. 29

    Подъём состояния (lifting state)

    Lifting state•Callback props•Общее состояние⚡ +10
    Open
  5. 30

    Мини-проект Toggle

    Компонент Toggle•Состояние + эффект•Финальный проект
    Course complete
    Open
React Start — online coding course