React для начинающих

О чем этот курс

С нуля до рабочего SPA на React

Этот курс создан для разработчиков с базовыми знаниями JavaScript, которые хотят быстро и уверенно перейти к созданию современных интерфейсов на React. Вы шаг за шагом освоите компоненты, JSX, props, состояние, события, формы, ключевые хуки и работу с API, а затем закрепите всё мини‑проектами и выполните итоговый SPA‑проект.

Мы уделяем максимум внимания практике: в каждом модуле — код‑лаборатории, тесты и задания. Вы научитесь структурировать приложение, управлять состоянием (lifting state, Context, reducer), настраивать маршрутизацию и обрабатывать загрузку и ошибки при запросах к API. Итогом станет полноценное одностраничное приложение — менеджер задач или каталог товаров — с данными из внешнего API.

flowchart LR
  Start(["Старт"]) --> JSX["JSX и рендеринг"] --> Components["Компоненты и композиция"] --> PropsState["Props и State"] --> EventsForms["События и формы"] --> ListsKeys["Списки и ключи"] --> Hooks["Хуки: useState/useEffect"] --> API["Работа с API: загрузка/ошибки"] --> Routing["Маршрутизация SPA"] --> StateMgmt["Управление состоянием: Context/Reducer"] --> MiniProjects["Мини‑проекты"] --> FinalSPA[["Итоговый SPA‑проект"]]

Что вы освоите

JSX и компоненты: от простых к композиции и переиспользованию
Props и state, события и управляемые компоненты (формы)
Хуки useState и useEffect: эффекты, подписки, очистка
Списки, ключи, условный рендеринг и мемоизация на уровне подходов
Работа с API (fetch/axios), индикаторы загрузки, обработка ошибок и ретраи
Маршрутизация и архитектура SPA, управление состоянием через Context и reducer

Мини‑проекты и итоговая работа

В течение курса вы создадите серию мини‑проектов (форма обратной связи, список задач, каталог карточек с фильтрами), а в финале — полноценный SPA с данными из API, навигацией, фильтрами и страницей деталей.

Пример того, что вы будете писать

import { useState, useEffect } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos?_limit=5')
      .then(r => r.json())
      .then(data => setTodos(data));
  }, []);

  const addTodo = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    setTodos([{ id: Date.now(), title: text, completed: false }, ...todos]);
    setText('');
  };

  return (
    <div>
      <h3>Мои задачи</h3>
      <form onSubmit={addTodo}>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Новая задача" />
        <button type="submit">Добавить</button>
      </form>
      <ul>
        {todos.map(t => (
          <li key={t.id}>
            <label>
              <input
                type="checkbox"
                checked={t.completed}
                onChange={() => setTodos(todos.map(x => x.id === t.id ? { ...x, completed: !x.completed } : x))}
              />
              {t.title}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}

К финалу у вас будет портфолио из мини‑работ и готовый SPA: менеджер задач или каталог товаров с фильтрами, пагинацией, страницами деталей и обработкой состояний загрузки/ошибок.

Предварительные требования: базовый JavaScript (ES6+), понимание модулей, базовый опыт работы с npm и браузером. Все остальные инструменты и подходы разберём на курсе.

Контакты

О чем этот курс

С нуля до рабочего SPA на React

Что вы освоите

Мини‑проекты и итоговая работа

Пример того, что вы будете писать

Оглавление

Курс содержит:

Похожие курсы

Нейросети для работы: с нуля до уверенного использования

ChatGPT, Claude и YandexGPT для повседневных задач

Промпт-инжиниринг для начинающих

AI для предпринимателя: как экономить время и деньги

Курсы

AIntellecto

Связаться с нами

Контакты