Новости и обновления в Telegram
rutube
Полезные видео о фронтенде. Подпишись на Rutube

Импорт и экспорт React компонентов

год назад·4 мин. на чтение

Как импортировать и экспортировать React компоненты

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

Файл корневого компонента

В части "Пишем первый React компонент" мы создали компонент Profile и компонент Gallery , который его отображает: 
function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
В настоящее время они находятся в корневом файле компонента, который в этом примере называется App.js. В Create React App ваше приложение находится в src/App.js. Однако в зависимости от вашей настройки ваш корневой компонент может находиться в другом файле. Если вы используете фреймворк с файловой маршрутизацией, например Next.js, ваш корневой компонент будет разным для каждой страницы.

Экспорт и импорт компонента

Что, если в будущем вы захотите изменить посадочную страницу и разместить там список научных книг? Или разместить все профили в другом месте? Имеет смысл переместить Gallery и Profile из корневого файла компонента. Это сделает их более модульными и позволит повторно использовать их в других файлах. Вы можете переместить компонент в три шага:
  1. Создайте новый файл JS, чтобы поместить в него компоненты.
  2. Экспортируйте компонент из этого файла (используя экспорт по умолчанию или именованный экспорт).
  3. Импортируйте его в файл, в котором вы будете использовать компонент (используя соответствующую технику для импорта по умолчанию или именованного экспорта).
 Здесь и Profile, и Gallery были перемещены из App.js в новый файл с именем Gallery.js. Теперь вы можете изменить App.js, чтобы импортировать галерею из Gallery.js: 
// App.js

import Gallery from './Gallery.js';

export default function App() {
  return <Gallery />;
}
// Gallery.js

function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
Обратите внимание, как этот пример теперь разбит на два файла компонентов:
  1. Gallery.js:
    • Определяет компонент профиля, который используется только в том же файле и не экспортируется.
    • Экспортирует компонент Gallery в качестве экспорта по умолчанию.
  2. App.js:
    • Импортирует Gallery по умолчанию из Gallery.js.
    • Экспортирует корневой компонент App в качестве экспорта по умолчанию.
Вы можете столкнуться с файлами, в которых отсутствует расширение .js, например: 
import Gallery from './Gallery';
И './Gallery.js', и './Gallery' будут работать с React, хотя первое ближе к тому, как работают нативные модули ES.

Экспорт по умолчанию и именованный экспорт

Существует два основных способа экспорта значений с помощью JavaScript: экспорт по умолчанию и именованный экспорт. До сих пор в наших примерах использовался только экспорт по умолчанию. Но вы можете использовать один или оба из них в одном файле. Файл может иметь не более одного экспорта по умолчанию, но он может иметь сколько угодно именованных экспортов. То, как вы экспортируете свой компонент, определяет, как вы должны его импортировать. Вы получите сообщение об ошибке, если попытаетесь импортировать экспорт по умолчанию так же, как и именованный экспорт. Эта таблица поможет вам:
СинтаксисЭэкспортированиеИмпортрирование
по умолчаниюexport default function Button() {}import Button from './button.js';
именованныйexport function Button() {}import { Button } from './button.js';
Когда вы пишете импорт по умолчанию, вы можете указать любое имя после импорта. Например, вместо этого вы можете написать import Banana from './button.js', и он все равно предоставит вам тот же экспорт по умолчанию. Напротив, при именованном импорте имя должно совпадать с обеих сторон. Вот почему они называются именованным импортом. Люди часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и используют именованный экспорт, если он экспортирует несколько компонентов и значений. Независимо от того, какой стиль вы предпочитаете, всегда давайте осмысленные имена функциям компонентов и файлам, которые их содержат. Компоненты без имен, такие как export default() => {}, не рекомендуются, поскольку они усложняют отладку.

Экспорт и импорт нескольких компонентов из одного файла

Что, если вы хотите показать только один Profile вместо галереи? Вы также можете экспортировать компонент Profile. Но в Gallery.js уже есть экспорт по умолчанию, и у вас не может быть двух экспортов по умолчанию. Вы можете создать новый файл с экспортом по умолчанию или добавить именованный экспорт для Profile. Файл может иметь только один экспорт по умолчанию, но он может иметь множество именованных экспортов. Чтобы уменьшить возможную путаницу между экспортом по умолчанию и именованным экспортом, некоторые команды предпочитают придерживаться только одного стиля (по умолчанию или именованного) или избегать их смешивания в одном файле. Это вопрос предпочтений. Делайте то, что лучше всего работает для вас. Сначала экспортируйте Profile из Gallery.js, используя именованный экспорт (без ключевого слова default ): 
export function Profile() {
  // ...
}
 Затем импортируйте Profile из Gallery.js в App.js, используя именованный импорт (с фигурными скобками): 
import { Profile } from './Gallery.js';
Наконец, отобразите <Profile /> из компонента App: 
export default function App() {
  return <Profile />;
}
Теперь Gallery.js содержит два экспорта: экспорт Gallery по умолчанию и именованный экспорт Profile. App.js импортирует их оба. 
// App.js

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return <Profile />;
}
// Gallery.js

export function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
Теперь вы используете сочетание экспорта по умолчанию и именованного экспорта:
  • Gallery.js:
    • Экспортирует компонент Profile как именованный экспорт с именем Profile.
    • Экспортирует компонент Gallery в качестве экспорта по умолчанию.
  • App.js:
    • Импортирует Profile как именованный импорт с именем Profile из Gallery.js.
    • Импортирует Gallery как импорт по умолчанию из Gallery.js.
    • Экспортирует корневой компонент App в качестве экспорта по умолчанию.

Резюме

На этой странице вы узнали:
  • Что такое файл корневого компонента
  • Как импортировать и экспортировать компонент
  • Когда и как использовать именованный импорт и экспорт; и импорт и экспорт по умолчанию
  • Как экспортировать несколько компонентов из одного файла
FrontendReactТуториал по React

Разметка React с JSX

год назад·1 мин. на чтение

JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.

Содержание туториала по React JSX — это расширение синтаксиса для JavaScript, позволяющее писать HTML-подобную разметку внутри файла JavaScript. Хотя есть и другие способы написания компонентов, большинство разработчиков React предпочитают лаконичность JSX, и большинство кодовых баз используют его.

JSX: добавление разметки в JavaScript

Интернет был построен на HTML, CSS и JavaScript. В течение многих лет веб-разработчики хранили контент в HTML, дизайн в CSS и логику в JavaScript — часто в отдельных файлах. Контент был размечен внутри HTML, а логика страницы жила отдельно в JavaScript. Но по мере того, как Интернет становился все более интерактивным, содержание все больше определялось логикой. JavaScript отвечал за HTML. Вот почему в React логика рендеринга и разметка живут в одном месте — в компонентах. Сохранение логики рендеринга кнопки и разметки вместе гарантирует их синхронизацию друг с другом при каждом редактировании. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает более безопасным изменение любой из них по отдельности. Каждый компонент React — это функция JavaScript, которая может содержать некоторую разметку, которую React отображает в браузере. Компоненты React используют расширение синтаксиса под названием JSX для представления этой разметки. JSX очень похож на HTML, но немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую разметку HTML в разметку JSX. JSX и React — это две разные вещи. Они часто используются вместе, но вы можете использовать их независимо друг от друга. JSX — это расширение синтаксиса, а React — это библиотека JavaScript.

Преобразование HTML в JSX

Предположим, что у вас есть некоторый (совершенно правильный) HTML: 
<h1>Todos</h1>
<img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
<ul>
  <li>Learn JavaScript</li>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ul>
И вы хотите поместить его в свой компонент: 
export default function TodoList() {
  return (
    // ???
  )
}
Если вы скопируете и вставите его как есть, он не будет работать. 
// App.js

export default function TodoList() {
  // Этот код не будет работать
  return (
    <h1>Todos</h1>
    <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
    <ul>
      <li>Learn JavaScript</li>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
    </ul>
  );
}

// App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)

// App.js: Смежные элементы JSX должны быть заключены в закрывающий тег. Вам нужен фрагмент JSX <>...</>? (5:4)
Это потому, что JSX строже и имеет несколько больше правил, чем HTML. Если вы прочитали сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.

Правила JSX

1. Возвращать один корневой элемент

Чтобы вернуть несколько элементов из компонента, оберните их одним родительским тегом. Например, вы можете использовать <div>: 
<div>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</div>
Если вы не хотите добавлять в разметку лишний <div>, вы можете вместо этого написать <> и </>: 
<>
  <h1>Todos</h1>
  <img src="https://example.com/userpic.jpg" alt="userpic" class="photo" />
  <ul>
    ...
  </ul>
</>
Этот пустой тег называется фрагментом (Fragment). Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.

Почему необходимо обернуть несколько тегов JSX?

JSX выглядит как HTML, но внутри он трансформируется в простые объекты JavaScript. Вы не можете вернуть два объекта из функции, не поместив их в массив. Это объясняет, почему вы также не можете вернуть два тега JSX, не завернув их в другой тег или фрагмент.

2. Закрывать все теги

JSX требует, чтобы теги были закрыты явно: самозакрывающиеся теги, такие как <img>, должны стать <img />, а теги-обертки, такие как <li>апельсины, должны быть записаны как <li>апельсины</li>.

3. Пишите все в camelCase

JSX превращается в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вам часто потребуется считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать тире или быть зарезервированными словами, такими как class. Вот почему в React многие атрибуты HTML и SVG записываются в camelCase. Например, вместо stroke-width вы используете strokeWidth. Поскольку class является зарезервированным словом, в React вместо этого вы пишете className, названное в честь соответствующего DOM свойства: 
<img src="https://example.com/userpic.jpg" alt="userpic" className="photo" />

Совет: используйте конвертер JSX

Преобразование всех этих атрибутов в существующую разметку может быть утомительным. Рекомендуется использовать конвертер для перевода существующих HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно. Вот окончательный результат: 
export default function TodoList() {
  return (
    <>
      <h1>Todos</h1>
      <img
        src="https://example.com/userpic.jpg"
        alt="userpic"
        className="photo"
      />
      <ul>
        <li>Learn JavaScript</li>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
      </ul>
    </>
  );
}

Резюме

Теперь вы знаете, почему существует JSX и как его использовать в компонентах:
  • React компоненты группируют логику рендеринга вместе с разметкой, потому что они связаны.
  • JSX похож на HTML с некоторыми отличиями. Вы можете использовать конвертер, если вам нужно.
  • Сообщения об ошибках часто укажут вам правильное направление для исправления разметки.
FrontendReactТуториал по React
logo

itdevjournal