Пишем первый React компонент

Содержание туториала по React Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.

Компоненты: строительные блоки пользовательского интерфейса

В Интернете HTML позволяет нам создавать богато структурированные документы с помощью встроенного набора тегов, таких как <h1> и <li>:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

Эта разметка представляет эту статью <article>, ее заголовок <h1> и (сокращенное) оглавление в виде упорядоченного списка <ol>. Подобная разметка в сочетании с CSS для стилизации и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модального окна, раскрывающегося списка — каждой части пользовательского интерфейса, которую вы видите в Интернете. React позволяет комбинировать разметку, CSS и JavaScript в кастомные «компоненты», повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />, который можно отображать на каждой странице. Внутри он по-прежнему использует те же HTML-теги, такие как <article>, <h1> и т. д. Как и в случае с HTML-тегами, вы можете составлять, упорядочивать и размещать компоненты для оформления целых страниц. Например, страница документации, которая состоит из компонентов React, может выглядеть следующим образом:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

По мере роста вашего проекта вы заметите, что многие из ваших проектов могут быть составлены путем повторного использования уже написанных вами компонентов, что ускоряет разработку. Оглавление выше можно добавить на любой экран с помощью <TableOfContents />. Вы даже можете запустить свой проект, состоящий из компонентов, которыми поделились участники сообщества React с открытым исходным кодом, такими как Chakra UI и Material UI.

Определение компонента

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

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

Вот как написать компонент:

Шаг 1: Экспортируйте компонент

Префикс export default — это стандартный синтаксис JavaScript (не относящийся к React). Он позволяет пометить основную функцию в файле, чтобы впоследствии можно было импортировать ее из других файлов. Подробнее об импорте смотрите в разделе Импорт и экспорт компонентов.

Шаг 2: Определите функцию

С помощью функции function Profile() { } вы определяете функцию JavaScript с именем Profile. Компоненты React — это обычные функции JavaScript, но их имена должны начинаться с заглавной буквы, иначе они не будут работать.

Шаг 3: Добавьте разметку

Компонент возвращает тег <img /> с атрибутами src и alt. <img /> написан как HTML, но на самом деле это JavaScript. Этот синтаксис называется JSX, и он позволяет встраивать разметку в JavaScript. Но если ваша разметка не находится на той же строке, что и ключевое слово return, вы должны заключить ее в пару круглых скобок, например:

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

Использование компонента

Теперь, когда вы определили свой компонент Profile, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery, который использует несколько компонентов Profile:

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Что видит браузер

Обратите внимание на разницу в регистрах:

• <section> пишется строчными буквами, поэтому React знает, что мы ссылаемся на HTML-тег.
• <Profile/> начинается с заглавной P, поэтому React знает, что мы хотим использовать наш компонент с именем Profile.

А Profile содержит еще больше HTML: <img />. В итоге вот что видит браузер:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
</section>

Вложение и организация компонентов

Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно малы или тесно связаны друг с другом. Если этот файл переполнен, вы всегда можете переместить Profile в отдельный файл. Как это сделать, вы узнаете вскоре на странице об импорте. Поскольку компоненты Profile визуализируются внутри Gallery — даже несколько раз — мы можем сказать, что Gallery является родительским компонентом, отображающим каждый Profile как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и столько раз, сколько захотите. Компоненты могут отображать другие компоненты, но вы никогда не должны вкладывать их определения:

export default function Gallery() {
  // Никогда не определяйте компонент внутри другого
  function Profile() {
    // ...
  }
  // ...
}

Фрагмент выше очень медленный и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне:

export default function Gallery() {
  // ...
}

// ✅ Определите компонент на корневом уровне
function Profile() {
  // ...
}

Когда дочернему компоненту нужны данные от родителя, передайте их пропсами, а не определениями вложенности.

Резюме

Вы только что впервые попробовали React! Напомним некоторые ключевые моменты.

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

Почему не Webpack для создания библиотеки?

Webpack можно использовать для основного приложения (проекта), которое будет использовать нашу UI библиотеку (для которой выбрали Rollup). Мы используем Rollup для компиляции библиотеки, потому что Webpack не поддерживает формат вывода ES6 (пока) Webpack хорошо подойдет для сборки основного проекта, поскольку он поддерживает встроенное встряхивание дерева и может объединять код, отличный от JS. Единственное предостережение относительно алгоритма встряхивания дерева Webpack заключается в том, что он вряд ли может определить, вызывает ли код побочные эффекты при импорте, поэтому в package.json библиотеки следует добавить ключ sideEffects, для которого можно установить значение false, если библиотека не запускает побочные эффекты.

// В библиотеке нет сайд эффектов
{
  …
  "sideEffects": false
}

// Все *.scss, которые при импорте будут вызывать сайд эффекты
{
  …
  "sideEffects": [ "src/**/*.scss" ]
}

Некоторые понятия

Давайте определим некоторые понятия, чтобы пост был понятнее:

• Tree shaking (встряхивание дерева) - это термин, широко используемый в контексте JavaScript, чтобы описать удаление неиспользуемого кода. Он основан на операторах import и export в ES2015 для определения, были ли кодовые модули экспортированы и импортированы для использования в JavaScript-файлах.
• Однофайловые Vue компоненты (SFC) - это способ определения компонентов в VueJS с помощью файлов .vue, которые включают шаблон, скрипт и стиль в одном файле. Другие способы определения компонентов VueJS - это обычный JavaScript (с помощью Vue.extent(...)) и JSX.

Почему нужна поддержка tree shaking?

Один из факторов, которые следует учитывать при разработке веб-приложения, - это размер пакета, доставляемого в браузер. Для небольших проектов это может быть незначительно, но для больших проектов это может стать проблемой из-за количества зависимостей и устаревшего кода. При создании внешней библиотеки следует поддерживать удаление неиспользуемого кода, потому что:

• В крупных проектах часто есть много зависимостей, и по мере роста проекта и изменения требований некоторые из этих зависимостей становятся неиспользуемым кодом, который тем не менее упаковывается, увеличивая размер приложения.
• При создании больших библиотек (например, библиотек UI компонентов) многие потребители будут использовать только подмножество предоставляемых функций, и если библиотека не поддерживает удаление неиспользуемого кода, то им придется импортировать все функции.

Требования к библиотеке для поддержки tree shaking

Если мы хотим, чтобы наша библиотека была статически анализируема, чтобы сборщики могли удалять неиспользуемый код, мы должны выполнить следующие требования:

• Она должна быть экспортирована в формате ES6, конкретно с использованием синтаксиса import/export (а не синтаксиса require CommonJS). Таким образом, код статически анализируем, и поэтому можно определить, используется ли код или нет.
• Он не должен быть упакован (bundled). Это облегчает работу компилятора, изолируя код по модулям и не объединяя все в один файл.
• Модули, которые мы хотим встряхнуть, не должны вызывать побочных эффектов. Это означает, что они не должны изменять глобальные переменные или вызывать любые другие виды действий с побочными эффектами при импортировании.

Конфигурация Rollup

Обычно настройка Rollup для tree shaking довольно прямолинейна, но в этом случае есть некоторые ограничения:

• TypeScript нужно скомпилировать в ES6 JavaScript
• VueJS SFC нужно скомпилировать в ES6 JavaScript

Rollup может сохранить модули в отдельных файлах, но сохраняет оригинальное название (так что файлы TypeScript останутся .ts, то же самое для файлов .vue). Мы фактически получаем файлы TypeScript и Vue, но с содержимым JavaScript. Для этого нам нужно использовать некоторые плагины в Rollup:

• rollup-plugin-typescript2 для компиляции TypeScript в JavaScript
• rollup-plugin-vue для компиляции Vue SFC в JavaScript
• renameExtensions для переименования .ts и .vue в .js.

Файлы конфигурации

package.json

{
  "name": "your-library-name",
  "version": "0.1.0",
  "module": "dist/index.js",
  "sideEffects": false,
  "scripts": {
    "build": "rollup --config ./config/rollup.config.js",
    "serve": "rollup --config ./config/rollup.config.js --watch",
    "test": "jest --config ./config/jest.config.js --rootDir ."
  },
  "devDependencies": {
    "@betit/rollup-plugin-rename-extensions": "^0.0.4",
    "@types/jest": "^24.0.15",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-vue": "^2.0.2",
    "jest": "^24.8.0",
    "jest-serializer-vue": "^2.0.2",
    "postcss": "^7.0.17",
    "rollup": "^1.16.7",
    "rollup-plugin-cleaner": "^1.0.0",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-typescript2": "^0.22.0",
    "rollup-plugin-vue": "^5.0.1",
    "standard-changelog": "^2.0.18",
    "ts-jest": "^24.0.2",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "vue": "^2.6.10",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.7.0",
    "vue-property-decorator": "^8.2.1",
    "vue-template-compiler": "^2.6.10"
  },
  "peerDependencies": {
    "vue": "^2.6.10"
  }
}

rollup.config.js

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import renameExtensions from '@betit/rollup-plugin-rename-extensions'
import cleaner from 'rollup-plugin-cleaner'
import commonjs from 'rollup-plugin-commonjs'
export default {
  input: 'index.js',
  output: {
    format: 'esm', // Это то, что говорит rollup использовать ES6 модули
    dir: 'dist'
  },
  external: [ 'vue', 'vue-class-component' ],
  plugins: [
    cleaner({ targets: [ 'dist' ] }),
    commonjs(),
    typescript({ rollupCommonJSResolveHack: true, clean: true }),
    // Это расширение переименовывает .vue и .ts в .js и обновляет импорты
    renameExtensions({
      include: ['**/*.ts', '**/*.vue'],
      mappings: { '.vue': '.vue.js', '.ts': '.js' }
    }),
    vue()
  ],
  // Предотвращает бандлинг, но не переименовывает файлы
  preserveModules: true
}