Документация React v19.2

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

React позволяет создавать пользовательские интерфейсы из отдельных элементов, называемых компонентами. Создавайте собственные компоненты React, такие как Thumbnail, LikeButton и Video. Затем объединяйте их в целые экраны, страницы и приложения.

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

Независимо от того, работаете ли вы в одиночку или с тысячами других разработчиков, использование React ощущается одинаково. Он разработан для того, чтобы вы могли беспрепятственно комбинировать компоненты, написанные независимыми людьми, командами и организациями.

Создавайте компоненты с помощью кода и разметки.

Компоненты React — это функции JavaScript. Хотите отобразить контент в зависимости от условий? Используйте оператор if. Отображаете список? Попробуйте функцию array map(). Изучение React — это изучение программирования.

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = count > 1 ? 'Videos' : 'Video';
    heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
      )}
    </section>
  );
}

Этот синтаксис разметки называется JSX. Это расширение синтаксиса JavaScript, получившее популярность благодаря React. Размещение разметки JSX рядом с соответствующей логикой рендеринга упрощает создание, поддержку и удаление компонентов React.

Добавляйте интерактивность там, где это необходимо.

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

import { useState } from 'react';

function SearchableVideoList({ videos }) {
  const [searchText, setSearchText] = useState('');
  const foundVideos = filterVideos(videos, searchText);
  return (
    <>
      <SearchInput
        value={searchText}
        onChange={newText => setSearchText(newText)} />
      <VideoList
        videos={foundVideos}
        emptyHeading={`No matches for “${searchText}”`} />
    </>
  );
}

Вам не обязательно создавать всю страницу на React. Добавьте React к существующей HTML-странице и отображайте интерактивные компоненты React в любом месте страницы.

Разрабатывайте full-stack с использованием фреймворка.

React — это библиотека. Она позволяет объединять компоненты, но не предписывает, как осуществлять маршрутизацию и получение данных. Для создания полноценного приложения с использованием React мы рекомендуем использовать полнофункциональный фреймворк React, такой как Next.js или React Router.

React — это также архитектура. Фреймворки, которые её реализуют, позволяют получать данные в асинхронных компонентах, работающих на сервере или даже во время сборки. Читайте данные из файла или базы данных и передавайте их в ваши интерактивные компоненты.