Введение в React — React — Aduca

React — JavaScript-библиотека для построения пользовательских интерфейсов. Разработана Facebook (Meta), основана на компонентах и декларативном подходе: вы описываете, как UI должен выглядеть при заданном state.

React использует Virtual DOM для эффективных обновлений. Один компонент — одна функция или класс, возвращающий JSX. Экосистема: React Router, Redux/Zustand, Next.js для SSR.

Для старта: Node.js, npm create vite@latest с шаблоном react. Знание JavaScript обязательно.

Создание проекта

npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev

Структура

src/
  App.jsx       — корневой компонент
  main.jsx      — точка входа
  components/   — переиспользуемые блоки

На заметку: React — библиотека, а не фреймворк: роутинг и state вы подключаете отдельно.

Игра Упражнение

Содержание книги

Всего: 15 глав

Книга, игра и упражнения доступны без регистрации. Видеоуроки — после оплаты курса.

React — JavaScript-библиотека для построения пользовательских интерфейсов. Разработана Facebook (Meta), основана на компонентах и декларативном подходе: вы описываете, как UI должен выглядеть при заданном state.React исп...

Читать главу

Игра Упражнение

Точка входа main.jsx: createRoot из react-dom/client монтирует приложение в #root. StrictMode в dev помогает находить побочные эффекты и устаревшие API.App.jsx — корневой компонент. index.html содержит <div id="r...

Читать главу

Игра Упражнение

JSX похож на HTML, но это JavaScript: className вместо class, htmlFor вместо for. Выражения в { }. Один корневый элемент или Fragment <>...</>.Компонент — функция с именем с заглавной буквы: function Button()...

Читать главу

Игра Упражнение

Props — аргументы компонента, передаются как атрибуты: <UserCard name="Ann" age={25} />. Внутри: function UserCard({ name, age }) или props.name.Props только для чтения — не мутируйте их. children — вложе...

Читать главу

Игра Упражнение

State — локальные данные компонента, при изменении вызывают ре-рендер. useState(initial) возвращает [value, setValue].Обновление: setCount(count + 1) или функциональная форма setCount(c => c + 1) при зависимости от пр...

Читать главу

Игра Упражнение

События в camelCase: onClick, onChange, onSubmit. Передаёте функцию: onClick={handleClick}, не строку как в HTML.Синтетическое событие React оборачивает нативное. e.preventDefault() на форме. Передача аргумента: onClick=...

Читать главу

Игра Упражнение

Controlled components: value={text} onChange={e => setText(e.target.value)}. React контролирует значение поля.Checkbox: checked={agree} onChange={...}. Select: value={city} onChange={...}. Несколько полей — один объек...

Читать главу

Игра Упражнение

Списки рендерят через array.map(): items.map(item => <li key={item.id}>{item.name}</li>). key должен быть стабильным и уникальным среди соседей.Индекс как key — только если список статичен и не переупорядо...

Читать главу

Игра Упражнение

useEffect(() => { ... }, [deps]) — побочные эффекты: fetch, подписки, таймеры. Пустой [] — только при монтировании. Без deps — после каждого рендера (осторожно).Cleanup: return () => clearInterval(id) в useEffect —...

Читать главу

Игра Упражнение

Custom hook — функция useXxx(), внутри которой вызываются другие хуки. Переиспользует логику между компонентами: useFetch, useLocalStorage, useDebounce.Правила хуков: вызывать только на верхнем уровне, не в if/циклах. Им...

Читать главу

Игра Упражнение

react-router-dom: BrowserRouter, Routes, Route, Link, useNavigate, useParams. SPA без перезагрузки страницы.path="/user/:id" — параметр через useParams(). Вложенные маршруты: Route с element и children routes....

Читать главу

Игра Упражнение

createContext(defaultValue) + Provider + useContext — передача данных вглубь без prop drilling. Подходит для темы, языка, авторизации.Value на Provider должен быть стабильным или мемоизированным (useMemo), иначе лишние р...

Читать главу

Игра Упражнение

Локальный state — useState/useReducer. Глобальный — Context, Redux Toolkit, Zustand, Jotai.Redux Toolkit: createSlice, configureStore, useSelector, useDispatch — предсказуемый поток данных. Zustand — минималистичный API...

Читать главу

Игра Упражнение

Загрузка в useEffect или React Query / SWR. Состояния: loading, error, data. async в useEffect: отдельная async function внутри.Отмена запроса: AbortController. POST: fetch(url, { method: 'POST', headers, body:...

Читать главу

Игра Упражнение

npm run build — минифицированный bundle в dist/. Vite использует Rollup. Переменные: import.meta.env.VITE_*.Деплой dist на Netlify, Vercel, GitHub Pages. base в vite.config для подпапки. React 18+ createRoot уже в шаблон...

Читать главу

Игра Упражнение

К содержанию курса

Следующий урок

Курс

Книга бесплатно

Все главы Интерактивная игра