Построение пользовательского интерфейса с помощью компонентов

Основные концепции React

Существует три основные концепции React, с которыми вам нужно ознакомиться, чтобы начать создавать React-приложения. Это:

• Компоненты
• Пропсы (Props)
• Состояние (State)

В следующих главах мы рассмотрим эти концепции и предоставим ресурсы для их дальнейшего изучения. После знакомства с этими концепциями мы покажем, как установить Next.js и использовать новые возможности React, такие как серверные и клиентские компоненты.

Компоненты

Пользовательские интерфейсы можно разбить на небольшие строительные блоки, называемые компонентами.

Компоненты позволяют создавать самодостаточные, повторно используемые фрагменты кода. Если представить компоненты как кирпичики LEGO, то можно взять эти отдельные элементы и объединить их для создания более крупных структур. Если нужно обновить часть интерфейса, можно изменить конкретный компонент или "кирпичик".

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

Приятная особенность React-компонентов заключается в том, что они представляют собой обычный JavaScript. Давайте посмотрим, как можно написать React-компонент с точки зрения JavaScript:

Создание компонентов

В React компоненты — это функции. Внутри тега script создайте новую функцию header:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Компонент — это функция, которая возвращает элементы UI. Внутри оператора return функции можно писать JSX:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Чтобы отобразить этот компонент в DOM, передайте его в качестве первого аргумента в метод root.render():

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

Но подождите. Если попытаться запустить этот код в браузере, возникнет ошибка. Для его работы нужно сделать две вещи:

Во-первых, React-компоненты должны начинаться с заглавной буквы, чтобы отличаться от обычных HTML-элементов и JavaScript:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Компонент React с заглавной буквы
root.render(Header);

Во-вторых, React-компоненты используются так же, как обычные HTML-теги, с угловыми скобками <>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

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

Вложенность компонентов

Приложения обычно содержат больше контента, чем один компонент. Можно вкладывать React-компоненты друг в друга, как обычные HTML-элементы.

В вашем примере создайте новый компонент HomePage:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Затем вложите компонент <Header> внутрь нового компонента <HomePage>:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Вложенный компонент Header */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Дерево компонентов

Таким образом можно продолжать вкладывать React-компоненты, формируя дерево компонентов.

Например, ваш компонент верхнего уровня HomePage может содержать компоненты Header, Article и Footer. Каждый из этих компонентов, в свою очередь, может иметь свои дочерние компоненты и так далее. Например, компонент Header может включать компоненты Logo, Title и Navigation.

Такой модульный формат позволяет повторно использовать компоненты в разных частях приложения.

В вашем проекте, поскольку <HomePage> теперь является компонентом верхнего уровня, его можно передать в метод root.render():

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

Дополнительные ресурсы:

• Ваш первый компонент
• Импорт и экспорт компонентов