Еще одно руководство для начинающих по настройке проекта React — часть 2

Мы настроили простое приложение React в Часть 1. В качестве зависимостей мы использовали React, React DOM и webpack-dev-server. Мы расширим тот же проект другими плюшками, облегчающими веб-разработку.

Давайте начнем!

JSX и Реагировать

В прошлой статье мы увидели, что для написания <div>Hello World</div> в React мы написали React.createElement("div", null, "Hello World"). Если мы хотим отобразить следующий простой HTML на странице

Нам нужно написать это в React.

Это выглядит пугающе! Не говоря уже о том, что трудно читать, поддерживать или понимать, что происходит. между всеми nulls.

Мы, как программисты, можем сделать лучше.

Facebook уже осознал эту проблему. Написание компонентов или элементов с использованием чистого API React не сработает. Поэтому они создали более простое для понимания расширение React. Они назвали это JavaScript Sсинтаксисом Xtension (сокращенно JSX). Он напоминает синтаксис HTML с небольшими изменениями. Однако JSX — это выражение JavaScript, в отличие от HTML. Под этим я подразумеваю, что вы можете сделать это: const hello = <h1>Hello</h1>. Это совершенно правильный код. Под капотом они становятся обычными React.createElement функциями. Следовательно, они могут использовать всю мощь JavaScript. Полное введение можно прочитать здесь.

Но теперь у нас есть проблема. Если вы измените страницу index.js, чтобы включить JSX, вот так — вы получите ошибку.

Обратите внимание, как строка 5 была изменена на JSX. Если мы снова запустим сервер, мы не получим наш обычный вывод. Вместо этого мы получим ошибку Unexpected Token.

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

Навигация по экосистеме Babel

Преобразователь, о котором мы говорили в предыдущем абзаце, называется транспилятором. Транспайлер — это программа, которая преобразует исходный код одного языка программирования в эквивалентный исходный код другого языка программирования. В данном случае это JSX для обычных функций React/JavaScript. Транспайлер, который мы собираемся использовать, называется Babel.

Вы уже знаете упражнение. Вам нужно установить babel, используя пряжу. Введите yarn add -D @babel/core @babel/preset-react. Мы используем последние версии этих пакетов. Обратите внимание, что мы установили два модуля: babel/core и babel/preset-react. Причины следующие-

Babel Core: это сердце и душа компилятора Babel. Считайте это движком, который будет запускать транспилятор. Он содержит логику преобразования. Но ядро ​​ничего не делает само по себе. Вам необходимо указать отдельные плагины для конкретных преобразований.

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

  • Какой исходный код преобразовать
  • Во что он должен превратиться
  • Как сделать это преобразование

Теперь для преобразований React JSX требуется 6 плагинов, а именно:

@babel/plugin-syntax-jsx
@babel/plugin-transform-react-display-name
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-jsx-self
@babel/plugin-transform-react-jsx-source

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

Предустановки Babel. Предустановки представляют собой набор плагинов. Итак, вместо того, чтобы устанавливать 6 отдельных плагинов для React, мы просто установили babel/preset-react. Он установит для нас 6 плагинов.

Чтобы узнать больше о Babel, вы можете попробовать интерактивный редактор здесь и увидеть живую транспиляцию.

Итак, теперь у вас есть возможность использовать JSX в своих приложениях React. Если вы снова запустите веб-сервер, вы все равно получите ту же ошибку Unexpected Token. Что сейчас случилось?

Джунгли вебпака

У нас есть преобразователь: Babel. У нас также есть преобразование: JSX. Теперь нам нужна программа, которая инициирует преобразование. Мы можем сделать это, установив babel/cli и предоставив ему файл JS для преобразования. Но это означало бы, что каждый раз, когда мы меняем исходный код, нам нужно будет снова запускать babel.

Мы, как программисты, можем сделать лучше. Мы можем сделать этот процесс автоматическим.

Для этого мы собираемся использовать webpack. Webpack — это сборщик модулей. Он способен на многое, о чем мы сейчас поговорим. Помните, что мы уже установили веб-пакет в Часть 1. В Webpack есть 4 основных понятия, которые нужно понять.

  • Вход: модули, с которых начинается объединение.
  • Вывод: место, где будут создаваться связанные модули.
  • Загрузчики. Загрузчики — это утилиты, которые позволяют веб-пакету выполнять некоторую обработку для каждого модуля. Загрузчики могут преобразовывать или предварительно обрабатывать модули перед их объединением.
  • Плагины: Плагины не работают для каждого модуля. Они расширяют возможности самого веб-пакета. Например, допустим, вам нужно минимизировать или сжать пакет. Вы можете использовать плагины webpack для выполнения этих задач.

Теперь поговорим о связке модулей.

Помните, как мы установили 6 модулей (2 зависимости + 4 devDependencies) до сих пор. Это React, React DOM, webpack, webpack-dev-server, babel/core и babel/preset-env.

Чтобы отображать компоненты реакции в браузере, модули react и react-dom должны присутствовать во время оценки HTML-страницы. Теперь есть два способа сделать это:

  • В первом мы поместили три тега <script />. Первые два содержат сценарии react и react-dom. Третий будет содержать наши компоненты, которые необходимо отрендерить. Нравится:
<script type="text/javascript" src="url/of/react.js"></script>
<script type="text/javascript" src="url/of/react-dom.js"></script>
<script type="text/javascript" src="url/of/our/components.js"></script>

Но этот метод не используется.

  • В другом методе мы можем объединить react, react-dom и наши компоненты в один файл. Мы можем назвать получившийся файл bundle.js и просто добавить этот файл в тег сценария нашей HTML-страницы. Мы сделали это в первой части.Посмотрите на строку 9 документа index.html. Мы добавили bundle.js в src тега script. Этот bundle.js был предоставлен webpack-dev-server после того, как он сделал связку с помощью webpack.

Вы можете подумать, что добавить 3 скрипта не так уж и сложно. Но представьте, если ваше приложение имеет 20 модулей или 50 модулей. Кроме того, что, если эти модули зависят друг от друга. Вам всегда нужно будет размещать теги script в таком порядке, чтобы зависимый элемент всегда находился после того, от чего он зависит. Ее также называют топологической сортировкой. Выполнение этого вручную может быть очень трудоемким и подверженным ошибкам.

Конфигурация, конфигурация, везде!

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

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

Несколько вещей, которые следует отметить в объекте config:

  • entry — это массив, в котором перечислены модули, с которых начинается объединение. В нашем случае это index.js из Части 1.
  • Клавиша module перечисляет конфигурацию модулей. У него есть подраздел rules, который принимает набор правил, применимых к каждому модулю.
  • Массив rules содержит объекты с несколькими ключами, такими как test, loaders, exclude и многие другие.
  • Ключ test — это регулярное выражение (регулярное выражение), которое проверяет, является ли модуль модулем JS.
  • loaders применит каждый загрузчик в массиве к модулям, которые передали test.
  • В данном случае это babel-loader. Он преобразует JSX в обычные функции.
  • Поля exclude будут исключать определенные совпадающие пути, поскольку они могут не быть частью нашего приложения, например node_modules.

Короче говоря, веб-пакет проверяет каждый файл, и если расширение файла .js, веб-пакет выполняет для него babel-loader, а затем включает его в пакет.

Поэтому создайте webpack.config.js и вставьте в него указанную выше конфигурацию. Но прежде чем запускать проект, вам необходимо установить babel-loader. Введите yarn add -D [email protected]. Мы добавляем @ после babel-loader, потому что нам нужна его конкретная версия. В данном случае это 8.0.0-beta.0.

Но борьба еще не окончена. Если вы наберете yarn start в надежде увидеть какой-то результат на веб-странице, вы получите сообщение об ошибке. Снова. Теперь, чего еще не хватает?

Давайте еще раз проясним ситуацию — у нас есть трансформер: Babel. У нас есть преобразование: JSX. У нас есть инициатор и сборщик: webpack. У нас есть конфигурации webpack. Сейчас нам нужны конфигурации Babel. Да! Babel также нуждается в настройках. В Babel у нас есть core и react-presets. Однако нам нужно сообщить ядру, что у нас есть реагирующие пресеты, и ему нужно выполнить преобразования, используя эти пресеты. Следовательно, файл конфигурации Babel.

Теперь есть много способов указать конфигурации Babel. Один из способов — создать файл с именем .babelrc. rc относится к команде запуска. Это соглашение напоминает номенклатуру в стиле Unix. Вы можете прочитать больше здесь".

В файл .babelrc вставьте следующее:

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

Содержимое вашей папки должно выглядеть так, как показано на изображении.

В index.js замените строку 5 на <h1>Hello World with JSX, Babel, and Webpack</h1>.

Окончательный index.js теперь должен выглядеть так

Теперь мы можем выполнить yarn start, и если все настроено правильно, вы должны увидеть Hello World with JSX, Babel и Webapck при переходе на http://localhost:8080/.

На этом мы подошли к концу части 2. Мы многое рассмотрели в понимании webpack и babel. Есть еще много инструментов, которые нужно добавить и понять. Тем не менее, это будет заключительная часть в этой серии из двух частей.

Свяжитесь со мной @ Facebook @ Linkedin @ Twitter

Первоначально опубликовано на codeburst.io 8 февраля 2018 г. автором Арфатом Салманом