Компоненты

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

// contacts.js
import Offices from './components/Offices';
import Map from './components/Map';

export default function Contacts() {
  return (
    <>
      <h1>Контакты</h1>
      <div>Контент</div>

      <Offices />
      <Map />
    </>
  )
}

На примере выше используются два компонента: Offices и Map.

Стоит обратить внимание, что код компонента находится внутри скобок <>. Это сделано из-за того, что у компонента должен быть родительский тег, иначе React вернёт ошибку.

Код <> является сокращением от <React.Fragment>, который используется для того, чтобы не подставлять лишние теги.

Компоненты обычно создают в папке components/.

// components/Map.js
export default function Map() {
  return (
    <img src="map.webp" alt="">
  )
}

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

<!-- React распознаёт её как обычный тег -->
<button>Кнопка</button>

<!-- React уже распознаёт её как компонент -->
<Button>Кнопка</Button>

Не выводить компонент

Если компонент не возвращает данные, то в этой ситуации компонент можно не выводить. Делается это через следующий код:

// components/Map.js
export default function Map({coords=""}) {

  // если не переданы координаты, то не выводить компонент
  if (!coords.length) {
    return null;
  }

  return (
    <img src="map.webp" alt="">
  )
}