Полное руководство по React

Введение в React

React - это JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет создавать сложные UI из небольших и изолированных частей кода, называемых компонентами.

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

Компоненты - это строительные блоки любого React-приложения. Компонент - это JavaScript функция, которая возвращает JSX (JavaScript XML) - расширение синтаксиса JavaScript.

function App() {
  return (
    <div>
      <h1>Привет, мир!</h1>
      <p>Это мой первый React компонент.</p>
    </div>
  );
}

Props

Props (сокращение от "properties") - это способ передачи данных от родительского компонента к дочернему.

function Greeting(props) {
  return <h1>Привет, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Алиса" />
      <Greeting name="Боб" />
    </div>
  );
}

Хуки

Хуки - это функции, которые позволяют вам использовать состояние и другие возможности React без написания классов.

useState позволяет добавить состояние в функциональные компоненты.

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

Обработка событий

React позволяет легко добавлять обработчики событий к элементам в JSX.

function App() {
  const handleClick = () => {
    alert('Кнопка была нажата!');
  };

  return <button onClick={handleClick}>Нажми меня</button>;
}

Условный рендеринг

В React вы можете создавать различные компоненты, которые инкапсулируют необходимое вам поведение. Затем вы можете рендерить только некоторые из них, в зависимости от состояния вашего приложения.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>С возвращением!</h1>;
  }
  return <h1>Пожалуйста, войдите.</h1>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
}

Списки и ключи

При работе со списками в React важно использовать ключи для оптимизации производительности.

function App() {
  const todos = ['Изучить React', 'Создать приложение', 'Развернуть приложение'];

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

Формы

React позволяет создавать интерактивные формы с использованием состояния компонента.

function App() {
  const [name, setName] = React.useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Отправленное имя: ' + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <input type="submit" value="Отправить" />
    </form>
  );
}

Заключение

Это базовое введение в React. По мере изучения вы обнаружите много других возможностей, таких как работа с API, маршрутизация, управление состоянием приложения и многое другое. React предоставляет мощные инструменты для создания сложных и интерактивных пользовательских интерфейсов.