Итак, вы решили попробовать реагировать, отлично!
Итак, вы читали о реакции, читали о 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 .