Итак, вы решили попробовать реагировать, отлично!

Итак, вы читали о реакции, читали о ES6, читали о webpack, читали о Babel, теперь вы готовы написать свое первое «простое» реагирующее «приложение/компонент», не так ли? или вы больше запутались, прежде чем начать читать все учебники?

Все говорят вам, что реакция отлично работает с ES6 (babel), веб-пакетом, … «подожди, подожди», — говорите вы себе, «я просто жду, чтобы написать небольшое приложение/компонент и попробовать немного реакции», так много вещей, чтобы узнать и как, черт возьми, я настроил свою среду?

Когда я начал использовать React, я не нашел места, где я мог бы найти «учебник» шаг за шагом, который мог бы рассказать мне, как создать его с нуля. Это правда, что есть много стартовых наборов (даже у Facebook есть один в загрузке React), но если вы думаете, как я: «эти стартовые наборы великолепны, но внутри слишком много волшебства, все работает, но как?».

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

Итак, прочитав множество руководств, я попытаюсь обобщить основные моменты, а также постараюсь помочь вам настроить вашу среду. Как я уже говорил, в этом уроке мы будем использовать react, babel для функций ES6 и webpack для загрузчиков модулей.

Отказ от ответственности

  • Я предполагаю, что у вас есть некоторые знания о node.js и npm, и вы читали о React, Webpack, Babel и ES6.
  • Если вы уже хорошо знакомы и уже работаете с React, это не для вас, возможно, вы будете знать все, что я здесь использую, и даже вы знаете больше.

Так что удачи нам и давайте начнем:

  • Создайте новую папку «react-starter» и инициализируйте ее с помощью npm. Примите или измените все подсказки
mkdir react-starter
cd react-starter
npm init
  • Установка и настройка вебпака

webpack — это сборщик модулей, который берет модули с зависимостями и генерирует статические активы, объединяя их вместе на основе некоторой конфигурации.

В вебпаке есть такие штуки, как загрузчики и плагины. Используя эти загрузчики, вы можете запрашивать что угодно, от файлов .css и .html до файлов .png и т. д., а с помощью плагинов вы добавляете дополнительные функции в веб-пакет.

Установите веб-пакет глобально и локально, используя:

npm i -g webpack
npm i webpack -S
  • Создайте файл, назовите его:
webpack.config.js

Его содержание будет:

Это минималистское требование к конфигурационному файлу webpack.

Обратите внимание, что мы уже указываем веб-пакету использовать babel-loader, css-loader и style-loader при объединении файлов свойство loaders принимает массив загрузчиков. Каждое свойство loader должно указывать расширение файла, которое он должен обрабатывать с помощью свойства test.

Настройка нашей среды

Webpack использует загрузчики для перевода файла перед его объединением.

Для установки установите следующие пакеты npm:

npm i babel-loader babel-preset-es2015 babel-preset-react css-loader style-loader react react-dom html-webpack-plugin -S
  • babel-preset-es2015 и babel-preset-react — это подключаемые модули, используемые babel-loaderдля перевода синтаксиса ES6 и JSX соответственно.
  • react и react-domявляются плагинами для работы с react :-)
  • css-loader и style-loader — это плагины для работы с файлами css.
  • html-webpack-plugin – это подключаемый модуль, упрощающий создание HTML-файлов для обслуживания пакетов веб-пакетов. Подробнее здесь

Как и для веб-пакета, babel-loader также требует некоторой настройки. Здесь нам нужно сказать ему использовать плагины ES6 и JSX.

  • Создайте файл, назовите его:
.babelrc

Пресеты — это наборы плагинов, которые добавляют функции в код, который вы пишете. es2015 добавляет функции, которые определенно будут в официальном выпуске ES6, а пресеты, которые являются этапами 0–3, являются предложениями для будущих спецификаций Javascript, которые все еще находятся в стадии разработки. Чем ниже вы идете, тем выше риск того, что функции, которые вы используете, будут прекращены.

Создайте файл, папку и назовите ее assets и файл с именем stye.css, например:

Создайте два файла и назовите их:

index.jsx and simpleComponent.jsx

Создайте файл, назовите его:

index.html
  • Добавьте в ваш package.json следующее под частью скриптов:
"build": "webpack --config webpack.config.js",
"watch": "webpack --watch"
  • buildскрипт запустит webpack с конфигурацией webpack.conf.js
  • Скрипт watch начнет отслеживать и объединять каждое изменение в вашем коде.

Итак, теперь мы готовы, выполните следующую команду:

npm run build

После запуска этой команды вы найдете в папке target файл in index.html и файл bundle.js, откройте в своем любимом браузере файл index.html и, если все прошло хорошо, вы должны увидеть свое первое реагирующее приложение.

Простой пример как в блоге можно найти в здесь

Я надеюсь, что это поможет вам немного, так что настройте свою первую среду реагирования, отсюда вы можете прочитать о «горячем обновлении», «сервере разработки» и многих других темах, которые я не просмотрел.

Так что удачи и Happy React Coding .