Основы React

Что такое React и что значит, что React декларативный?

Что такое virtual DOM и делает ли он React быстрее реального DOM?

Что такое JSX и во что он компилируется?

import { jsxs as _jsxs } from 'react/jsx-runtime'; const name = 'Ada'; // What you writeconst written = <h1 className="title">Hello, {name}</h1>;…

Что такое компонент в React и почему его имя должно начинаться с заглавной буквы?

interface AvatarProps {  name: string;  url: string;} function Avatar({ name, url }: AvatarProps) {…

Чем классовые компоненты отличаются от функциональных и осталось ли что-то, для чего ещё нужен класс?

import { Component, useState } from 'react'; // class: one state object that setState merges into; handlers need `this`export class ClassCounter extends Component<{ step: number }, { count: number }> {  state = { count: 0 };…

Что такое пропсы и почему компонент не может менять свои пропсы?

Чем пропсы отличаются от стейта?

Что такое проп children и почему React предпочитает композицию наследованию?

import type { ReactNode } from 'react'; interface CardProps {  title: string;  footer?: ReactNode;  children: ReactNode;…

Какими способами можно рендерить что-то по условию в JSX?

interface InboxProps {  loading: boolean;  error?: string;  unread: number;  isAdmin: boolean;}…

Как отрендерить список в React и зачем каждому элементу нужен key?

interface Todo {  id: string;  title: string;  done: boolean;}…

Что такое Fragment и когда он нужен?

import { Fragment } from 'react'; interface Term {  id: string;  word: string;  meaning: string;…

Как начать новый React-проект в 2026 году и почему create-react-app объявлен устаревшим?

Что отрендерит этот компонент при пустой корзине и как это исправить?

interface CartProps {  items: string[];} export function Cart({ items }: CartProps) {  return (    <div>      <h2>Cart</h2>      {items.length && <p>{items.length} items in your cart</p>}    </div>  );}

Найдите баг: после удаления первой строки заметка, набранная в ней, оказывается в следующей строке.

import { useState } from 'react'; function Row({ title }: { title: string }) {  const [note, setNote] = useState('');  return (    <li>      {title} <input value={note} onChange={(e) => setNote(e.target.value)} />    </li>  );} export function List({ items }: { items: { id: string; title: string }[] }) {  return <ul>{items.map((item, index) => <Row key={index} title={item.title} />)}</ul>;}

Что такое однонаправленный поток данных в React и как дочерний компонент передаёт данные родителю?

import { useState } from 'react'; interface FilterProps {  value: string;  onChange: (value: string) => void;}…

Почему React-компонент должен быть чистым и что считается побочным эффектом во время рендера?

let renderCount = 0; // wrong: mutates a module variable during renderexport function CupBad({ guest }: { guest: number }) {  renderCount++;  return <h2>Tea cup #{renderCount} for guest {guest}</h2>;…

Найдите баг: поле поиска теряет фокус после каждого нажатия клавиши.

import { useState } from 'react'; export function SearchPage() {  const [query, setQuery] = useState('');   function SearchBox() {    return <input value={query} onChange={(e) => setQuery(e.target.value)} />;  }   return (    <main>      <SearchBox />      <p>Results for {query}</p>    </main>  );}

Что ломается, если вызвать компонент как функцию, {Row({ item })}, вместо того чтобы отрендерить его как <Row item={item} />?

import { useState } from 'react'; type Item = { id: string; title: string; details: string }; function Row({ item }: { item: Item }) {  const [open, setOpen] = useState(false);  return (    <li onClick={() => setOpen(!open)}>      {item.title} {open && item.details}    </li>  );} export function List({ items }: { items: Item[] }) {  return <ul>{items.map((item) => Row({ item }))}</ul>;}

Каким хукам соответствуют методы жизненного цикла классов и у каких из них нет прямого аналога среди хуков?

import { Component, useEffect } from 'react'; // before: three lifecycle methods keep one connection in syncexport class ChatRoomClass extends Component<{ roomId: string }> {  connection = createConnection(this.props.roomId);…

Что изменилось в React 19 из того, что заметно в повседневном коде компонентов?

import type { ComponentProps } from 'react'; // React 19: ref arrives as a normal prop, no forwardRef wrapperfunction TextInput({ ref, ...props }: ComponentProps<'input'>) {  return <input ref={ref} className="input" {...props} />;}…

Когда React сохраняет стейт компонента, когда сбрасывает его и как с помощью key принудительно его сбросить?

import { useState } from 'react'; function ChatInput({ contact }: { contact: string }) {  const [draft, setDraft] = useState('');  return (    <textarea…