Фронтенд-разработчик React (Начальный уровень)

Экзаменационный билет №1

Теоретическая часть

1. Что такое JSX и зачем он используется в React?
2. Охарактеризуйте жизненный цикл компонента в React.

Ответы на теоретическую часть:

1. JSX — это синтаксическое расширение JavaScript, позволяющее писать HTML-подобную разметку внутри JS-кода. В React JSX используется для описания структуры интерфейса, что делает код более читаемым и понятным.
2. Жизненный цикл компонента включает три основных этапа: монтирование (mount), обновление (update) и размонтирование (unmount). На каждом этапе вызываются определённые методы: componentDidMountcomponentDidUpdatecomponentWillUnmountОни позволяют выполнять действия при создании, изменении и удалении компонента.

Практическая часть

Создайте функциональный компонент Counterкоторый содержит кнопки "Увеличить" и "Сброс", а также отображает текущее значение счётчика.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Текущее значение: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <button onClick={() => setCount(0)}>Сброс</button>
    </div>
  );
}

export default Counter;

Экзаменационный билет №2

Теоретическая часть

1. Какие типы компонентов существуют в React? Перечислите их особенности.
2. Что такое props и как они используются в React?

Ответы на теоретическую часть:

1. В React есть два типа компонентов: функциональные и классовые . Функциональные — это простые функции, возвращающие JSX; классовые — это ES6-классы, расширяющие React.ComponentС появлением хуков функциональные компоненты стали мощнее и чаще используются.
2. Props — это данные, передаваемые из родительского компонента в дочерний. Они позволяют делать компоненты универсальными. Props могут содержать строки, числа, объекты, массивы, функции и т.д.

Практическая часть

Создайте компонент UserCardпринимающий props с именем nameи возрастом ageи отображающий информацию о пользователе.

import React from 'react';

function UserCard(props) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>{props.name}</h3>
      <p>Возраст: {props.age}</p>
    </div>
  );
}

export default UserCard;

Экзаменационный билет №3

Теоретическая часть

1. Что такое состояние (state) в React и чем оно отличается от props?
2. Что такое контекст (Context API) и когда его стоит использовать?

Ответы на теоретическую часть:

1. State — это внутреннее состояние компонента, которое может меняться со временем и вызывает повторный рендер. В отличие от props, state управляется внутри самого компонента.
2. Context API — это механизм передачи данных через дерево компонентов без необходимости явной передачи props. Используется для глобальных данных, таких как тема, язык, авторизация.

Практическая часть

Создайте простое состояние с помощью useStateкоторое хранит строку поискового запроса. Добавьте <input>который связан с этим состоянием.

import React, { useState } from 'react';

function SearchBar() {
  const [query, setQuery] = useState('');

  return (
    <div>
      <input
        type="text"
        placeholder="Введите запрос"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <p>Вы ввели: {query || 'ничего'}</p>
    </div>
  );
}

export default SearchBar;

Экзаменационный билет №4

Теоретическая часть

1. Как работает хук useEffectкакие параметры он принимает?
2. Что такое ключи key в списках и почему они важны?

Ответы на теоретическую часть:

1. Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Принимает две аргумента: функцию, которая выполняется после рендера, и массив зависимостей. Если массив пуст — эффект выполняется один раз.
2. Ключиkey— это уникальные идентификаторы элементов списка. Они помогают React эффективно обновлять список, сравнивая элементы по ключам, а не перерисовывая всё заново.

Практическая часть

Создайте список задач, где каждая задача отображается с уникальным ключом.

import React from 'react';

function TodoList() {
  const tasks = ['Задача 1', 'Задача 2', 'Задача 3'];

  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>{task}</li>
      ))}
    </ul>
  );
}

export default TodoList;

Экзаменационный билет №5

Теоретическая часть

1. Что такое React.Fragment и зачем он нужен?
2. Какие способы стилизации компонентов вы знаете в React?

Ответы на теоретическую часть:

1. React.Fragment — это способ группировать несколько элементов без добавления лишних DOM-узлов. Записывается как <>...</> или <React.Fragment>...</React.Fragment>
2. Способы стилизации: CSS-файлы, inline-стили, CSS-модули, сторонние библиотеки (например, styled-components, TailwindCSS).

Практическая часть

Создайте компонент Buttonкоторый принимает цветcolorи текстtextчерез props и применяет стиль к кнопке.

import React from 'react';

function Button({ color, text }) {
  const buttonStyle = {
    backgroundColor: color,
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return <button style={buttonStyle}>{text}</button>;
}

export default Button;

Экзаменационный билет №6

Теоретическая часть

1. Что такое управляемые компоненты в React? Приведите пример.
2. Как реализовать маршрутизацию в React с помощью react-router-dom

Ответы на теоретическую часть:

1. Управляемые компоненты — это элементы формы, значение которых управляется через состояние React. Например, <input value={state} onChange={handleChange} />где значение инпута всегда синхронизировано со значением в state.
2. Маршрутизация в React реализуется с помощью библиотеки react-router-domОсновные элементы: BrowserRouterRouteLinkПример:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Практическая часть

Создайте форму входа с полями "Email" и "Пароль", которые связаны со состоянием. При нажатии на кнопку "Войти" выводите значения полей в консоль.

import React, { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Email:', email);
    console.log('Пароль:', password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Email:
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
      </div>
      <div>
        <label>
          Пароль:
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </label>
      </div>
      <button type="submit">Войти</button>
    </form>
  );
}

export default LoginForm;

Экзаменационный билет №7

Теоретическая часть

1. Что такое useRef и в каких случаях его стоит использовать?
2. Что такое React.memo и зачем он нужен?

Ответы на теоретическую часть:

1. useRef — это хук, который возвращает изменяемый объект с полем currentИспользуется для доступа к DOM-элементам или сохранения данных между рендерами без вызова повторного рендера.
2. React.memo — это функция высшего порядка, которая предотвращает повторный рендер компонента, если props не изменились. Полезна для оптимизации производительности.

Практическая часть

Создайте компонент FocusInputкоторый автоматически фокусируется на поле ввода при монтировании.

import React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Введите текст" />
    </div>
  );
}

export default FocusInput;

Экзаменационный билет №8

Теоретическая часть

1. Что такое useContext и как он используется в React?
2. В чём разница между useStateuseReducer

Ответы на теоретическую часть:

1. useContext — это хук, позволяющий получить доступ к контексту без передачи props через промежуточные компоненты. Вызывается с объектом контекста и возвращает текущее значение.
2. useState используется для простых состояний, useReducer — для сложных логических состояний, особенно когда есть несколько подзначений или следующее состояние зависит от предыдущего.

Практическая часть

Создайте провайдер темыThemeContextи компонент ThemedButtonкоторый меняет цвет фона в зависимости от текущей темы.

// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export { ThemeContext, ThemeProvider };

// ThemedButton.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const buttonStyle = {
    backgroundColor: theme === 'light' ? '#333' : '#eee',
    color: theme === 'light' ? '#fff' : '#000',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return (
    <button style={buttonStyle} onClick={toggleTheme}>
      Текущая тема: {theme}
    </button>
  );
}

export default ThemedButton;

Экзаменационный билет №9

Теоретическая часть

1. Что такое порталы в React и как они используются?
2. Как работает условный рендеринг в React?

Ответы на теоретическую часть:

1. Порталы — это способ рендерить дочерние элементы вне текущего DOM-дерева. Реализуются через ReactDOM.createPortal()Используются, например, для модальных окон.
2. Условный рендеринг — это отображение разных частей интерфейса в зависимости от условия. Может быть реализован через ifтернарный оператор или логическое выражение внутри JSX.

Практическая часть

Создайте модальное окно, которое открывается по кнопке и закрывается по клику вне окна.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }} onClick={onClose}>
      <div style={{
        background: 'white',
        padding: '20px',
        width: '300px',
        position: 'relative'
      }} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Открыть модальное окно</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h3>Это модальное окно</h3>
        <p>Нажмите вне области, чтобы закрыть.</p>
      </Modal>
    </div>
  );
}

export default App;

Экзаменационный билет №10

Теоретическая часть

1. Что такое "подъём состояния" в React и когда он применяется?
2. Какие существуют способы обработки форм в React?

Ответы на теоретическую часть:

1. Подъём состояния — это процесс перемещения состояния из дочернего компонента в родительский, чтобы сделать его доступным для нескольких связанных компонентов. Применяется, когда несколько компонентов должны работать с одним и тем же состоянием.
2. Формы в React могут быть управляемыми (через состояние) или неуправляемыми (через refs). Также можно использовать сторонние библиотеки, такие как Formik или React Hook Form.

Практическая часть

Создайте компонент SearchFormпринимающий начальное значение поискового запроса и функцию onSearchкоторая вызывается при отправке формы.

import React, { useState } from 'react';

function SearchForm({ initialQuery = '', onSearch }) {
  const [query, setQuery] = useState(initialQuery);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Поиск..."
      />
      <button type="submit">Искать</button>
    </form>
  );
}

export default SearchForm;

Экзаменационный билет №11

Теоретическая часть

1. Что такое useMemo и в каких случаях он применяется?
2. Как обновляется состояние в React при использовании?useState

Ответы на теоретическую часть:

1. useMemo — это хук, который возвращает мемоизированное значение. Применяется для оптимизации производительности, когда вычисления зависят от изменяющихся данных. Полезен, если вы не хотите пересчитывать значение каждый раз при рендере.
2. Состояние обновляется с помощью функции, возвращаемой useStateПри вызове этой функции React запускает повторный рендер компонента с новым значением состояния. Если новое значение равно предыдущему, ререндер может быть пропущен.

Практическая часть

Создайте компонент ExpensiveCalculationкоторый принимает число и выводит его квадрат. Используйте useMemoчтобы избежать лишних вычислений при повторном рендере.

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ number }) {
  const expensiveResult = useMemo(() => {
    console.log('Выполняется сложное вычисление');
    return number * number;
  }, [number]);

  return <div>Квадрат числа: {expensiveResult}</div>;
}

function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  return (
    <div>
      <h2>Оптимизация через useMemo</h2>
      <input
        type="number"
        value={inputValue}
        onChange={(e) => setInputValue(Number(e.target.value))}
      />
      <ExpensiveCalculation number={inputValue} />
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить счётчик</button>
    </div>
  );
}

export default App;

Экзаменационный билет №12

Теоретическая часть

1. Что такое useCallback и зачем он нужен?
2. Охарактеризуйте работу React.memo и его влияние на производительность.

Ответы на теоретическую часть:

1. useCallback — это хук, возвращающий мемоизированную версию колбэк-функции. Он полезен при передаче колбэков в дочерние компоненты, которые используют React.memoчтобы избежать ненужных ререндеров.
2. React.memo предотвращает повторный рендер компонента, если его props не изменились. Это улучшает производительность, особенно в списках или часто обновляемых интерфейсах.

Практическая часть

Создайте список пользователей и кнопку "Показать имя". Используйте useCallbackчтобы передать функцию без лишних пересозданий.

import React, { useState, useCallback, memo } from 'react';

const UserItem = memo(({ user, onShowName }) => {
  console.log('Рендер пользователя:', user.name);
  return (
    <div>
      <span>{user.name}</span>
      <button onClick={() => onShowName(user.name)}>Показать имя</button>
    </div>
  );
});

function UsersList() {
  const [users] = useState([
    { id: 1, name: 'Анна' },
    { id: 2, name: 'Иван' },
    { id: 3, name: 'Мария' }
  ]);

  const handleShowName = useCallback((name) => {
    alert(`Имя: ${name}`);
  }, []);

  return (
    <div>
      {users.map((user) => (
        <UserItem key={user.id} user={user} onShowName={handleShowName} />
      ))}
    </div>
  );
}

export default UsersList;

Экзаменационный билет №13

Теоретическая часть

1. Что такое высшие компоненты (HOC)? Приведите пример их использования.
2. В чём разница между props.children и обычными props?

Ответы на теоретическую часть:

1. HOC — это функция, которая принимает один компонент и возвращает новый, расширяя его функциональность. Например, можно создать HOC для добавления логики аутентификации.
2. props.children — это специальное свойство, которое содержит JSX, переданный между открывающим и закрывающим тегом компонента. Обычные props — это данные, передаваемые явно через атрибуты.

Практическая часть

Создайте HOC withLoadingкоторый оборачивает компонент и показывает индикатор загрузки, пока isLoading равен true

import React from 'react';

function withLoading(WrappedComponent) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Загрузка...</div>;
    }
    return <WrappedComponent {...props} />;
  };
}

function DataComponent({ data }) {
  return <div>Данные: {data}</div>;
}

const LoadingDataComponent = withLoading(DataComponent);

function App() {
  return <LoadingDataComponent isLoading={true} data="Пример данных" />;
}

export default App;

Экзаменационный билет №14

Теоретическая часть

1. Что такое пользовательские хуки в React? Приведите пример.
2. Что такое Suspense и как он используется?

Ответы на теоретическую часть:

1. Пользовательские хуки — это функции, начинающиеся с useкоторые могут использовать другие хуки. Они позволяют повторно использовать логику состояния и эффектов между компонентами.
2. Suspense — это компонент, который позволяет показывать fallback (например, спиннер), пока загружается что-то асинхронное, например, динамически импортированный компонент.

Практическая часть

Создайте пользовательский хук useInputкоторый управляет состоянием поля ввода и предоставляет методы для его обновления.

import React, { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange
  };
}

function InputForm() {
  const name = useInput('');
  const email = useInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Имя: ${name.value}, Email: ${email.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Имя:
          <input {...name} />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input {...email} />
        </label>
      </div>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default InputForm;

Экзаменационный билет №15

Теоретическая часть

1. Как реализовать lazy-загрузку компонентов в React?
2. Что такое порталы и какие задачи они решают?

Ответы на теоретическую часть:

1. Lazy-загрузка компонентов реализуется с помощью React.lazy() и SuspenseЭто позволяет загружать компоненты по требованию, уменьшая размер начальной загрузки приложения.
2. Порталы — это способ рендерить элемент вне текущего DOM-дерева. Они решают задачи отображения модальных окон, подсказок, выпадающих меню и других элементов, которые должны быть визуально отделены от контекста.

Практическая часть

// About.js
import React from 'react';

function About() {
  return <div>Это страница "О нас"</div>;
}

export default About;

// App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/about">О нас</Link>
      </nav>
      <Suspense fallback={<div>Загрузка...</div>}>
        <Routes>
          <Route path="/" element={<div>Главная страница</div>} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;