Установка React 16 +Babel+ Webpack 3
React - яваскрипт библиотека от создателей Facebook для разработки пользовательских интерфейсов. Текущая версия библиотеки - React 16, вышла 26 сентября 2017 года. Подробная документация на официальном сайте - Reactjs.org. Об отличиях новой версии от предыдущей можно почитать на Хабре.
Разработка SPA (single page application или одностраничные приложения) или любого другого сложного пользовательского интерфейса влечёт за собой частые обновления DOM дерева, необходимость в подгрузке и обновлении различной информации, а также совершения других манипуляции с данными. Чтобы "упростить" подобную работу и структурировать исходный код, были созданы яваскрипт фреймворки. Основные лидеры на сегодняшний день - Angular, ReactJS, Vue.js, Backbone.js. Строго говоря не все из них являются чистыми фреймворками, в частности React считается библиотекой для построения пользовательских интерфейсов.
- 1 - Подключение React
- 1.1 Использование CDN
- 1.2 Использование NPM
- 2 - Описание и настройка NPM
- 3 - Webpack 3 настройка
- 4 - Генерация основных файлов проекта
- 5 - Быстрый старт с помощью сборок
- 5.1 Create React App
- 5.2 React Atlogex quick start
1 - Подключение React
Существует два основных способа работы с библиотекой React - подключить файлы библиотеки обычным скриптом или собирать файлы проекта с помощью менеджера пакетов.
1.1 Использование CDN
Самый быстрый способ запустить React - подключить к странице два основных js файла.
Для разработки:
|
1 2 |
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> |
Или минифицированная версия для рабочего проекта:
|
1 2 |
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> |
1.2 Использование NPM
Подключение React вставкой скриптов из CDN сервера, накладывает некоторые ограничения, например такие как - необходимость подключение дополнительной библиотеки Babel (транспайлинг ES6 кода), невозможность сконфигурировать приложение на своё усмотрение и вероятно, многое другое 
В итоге, более гибким вариантом является генерация кода с помощью менеджера пакетов NPM. Для этого необходимо чтобы в вашей системе был установлен Node.js (NPM идёт с ним в комплекте) - скачать Node.js.
Официальная документация по NPM - docs.npmjs.com/getting-started/what-is-npm.
2 - Описание и настройка NPM
После установки Node.js будет доступен менеджер пакетов NPM. Чтобы загрузить какие либо библиотеки или модули вы можете использовать консоль (предварительно перейдите в директорию проекта), либо можно создать файл package.json, в котором указать какие библиотеки вам нужны и автоматически установить всё одной командой "npm i".
Команда для установки пакетов:
npm install имя_пакета
Директивы используемые в NPM
- директива "--save" - записывает в package.json установленный компонент и его версию в блок depandence
- директива --save-dev - записывает в package.json установленный компонент и его версию в блок dev-depandence
Сокращение директив:
| Действие | Команда | Сокращение |
| Установка пакета | install | i |
| Удаление пакета | uninstall | r |
| Обновление пакета | update | up |
| Запись компонента в конфигурацию | --save | -S |
| Запись компонента в конфигурацию (только для разработки) | --save-dev | -D |
Пример файла package.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
{ "name": "React-aqs", "version": "0.1.0", "description": "Atlogex React Quich Start", "main": "main.js", "scripts": {}, "repository": { "type": "git", "url": "git+https://github.com/Atlogex/ReactAxQuickstart" }, "keywords": [ "yiireact" ], "author": "Atlogex", "license": "ISC", "bugs": { "url": "https://github.com/Atlogex/ReactAxQuickstart/issues" }, "homepage": "https://github.com/Atlogex/ReactAxQuickstart#readme", "dependencies": { "react": "*", "react-dom": "*" }, "devDependencies": { "autoprefixer-loader": "*", "babel-core": "*", "babel-loader": "*", "babel-preset-env": "*", "babel-preset-stage-0": "*", "babel-preset-react": "*", "css-loader": "*", "file-loader": "*", "json-loader": "*", "style-loader": "*", "url-loader": "*", "webpack": "*" } } |
По идеи наличие NPM достаточно чтобы сгенерировать файлы вашего будущего проекта. Есть практика так называемых npm-скриптов, с помощью которых можно собирать проекты, а для того чтобы команды не были длинными, можно сохранить их в массив scripts в файле package.json, присвоить короткое название и запускать сборку через NPM. Ещё больше удобства можно достичь если поставить какой-либо сборщик (Webpack, Gulp и т.п.).
3 - Webpack 3 настройка
Для того чтобы настроить webpack используется конфигурационный файл - webpack.config.js, пример его содержимого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
var webpack = require('webpack'); module.exports = { entry: "./src/main.js", output: { path: __dirname + "/public_html/build", publicPath: 'build/', filename: 'bundle.js' }, module: { rules: [ { test: /\.(css)$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" } ] }, resolve: { modules: ['node_modules'], extensions: [".js", ".json", ".jsx", ".css"] }, plugins: [], }; |
Структура конфига вебпака - подключение вебпака, настраиваем местоположения исходников (main.js) и выходящих файлов (bundle.js) подключаем лоадеры и плагины. В приведённом примере можно увидеть, что для разных форматов файлов настроены разные лоадеры (каждый лоадер нужно предварительно загрузить с помощью NPM). С помощью них генерируется CSS, JS и JSX код.
4 - Генерация основных файлов проекта
Помимо Webpack для генерации файлов React нужно ещё настроить пресеты в babel. Это библиотеки для транспайлинга JS6 в более совместимый код, который поддерживают устаревшие версии браузера. Настройки babel можно указать как в package.json так и в webpack.config.js, но можно делать и индивидуальные файлы настроек каждому компоненту. Так если какая то библиотека будет обращаться к например babel, то в первую очередь будет проверяться наличие файла ".babelrc". Для того чтобы ваше приложение правильно скомпилировало код, нужно указать следующие пресеты в .babelrc:
|
1 2 3 4 5 6 7 |
{ "presets": [ "env", "stage-0", "react" ] } |
Для того чтобы сгенерировать файлы для вашего приложения, можно перейдя в директории вашего проекта просто написать команду "webpack" в терминале. Я обычно использую консоль встроенную в IDE, там по умолчанию вы находитесь в каталоге проекта
5 - Быстрый старт с помощью сборок
Для того чтобы ускорить процесс разработки, вы можете воспользоваться готовыми сборками. Обычно каждый разработчик использует свой стек технологий на проекте и можно, например склонировать из репазитория интересный вам проект/сборку чтобы не начинать с нуля и не тратить время на настройку компонентов.
5.1 Create React App
Официальная сборка от разработчиков React - github репозиторий. Все конфигурационные файлы настроены как нужно, после установки можно сразу писать приложение не задумываясь о том как подружить babel с вебпаком. Достаточно иметь только NPM, чтобы развернуть проект.
|
1 2 3 4 5 |
npm install -g create-react-app create-react-app my-app cd my-app/ npm start |
В дальнейшем вы можете также разобраться с настройками компонентов и менять их на своё усмотрение, но после смены настроек вам не будет доступно обновления ядра приложения. Подробнее об этом можно почитать здесь.
5.2 React Atlogex - моя сборка для быстрого старта
Мой стартовый набор на github. Включает в себя React, Babel (preset-env, preset-stage-0), Webpack и список популярных UI Kit библиотек, выберите какую-нибудь одну и раскомментируйте.
Некоторые вещи с выходом новых версий компонентов перестают поддерживаться, мне даже после просмотра уйму видеоуроков и прочтение публикации ( и то, и то было всего лишь годовой давности) пришлось потратить много времени на то чтобы запустить первый проект. К тому же хотел использовать не сильно распространенный UI Kit - AntDesign и в первой время на отладке, не сразу понял что дело не в нём. Если собираете проект сами, то используйте официальную документацию, либо точно придерживайтесь версий из уроков по которым вы обучаетесь реакту .
В своем React Quick Start я установил правила - загружать последние стабильные версии для всех компонентов. Будьте аккуратны, на момент создания всё работало, но возможно что-то может стать несовместимым в будущем. Добавлю потом стабильный репозиторий с фиксированными версиями пакетов, но лучше используйте официальные сборки, например "Create React App" о которой писал выше.
Для клонирования моего репозитория, можно использовать Git. Находясь в папке проекта выполните
git clone https://github.com/Atlogex/ReactAxQuickstart.git .
Точка в конце означает, что файлы скачаются в корень проекта. Директория проекта должна быть пуста. Если вы используете IDE то возможны проблемы в виду того что IDE хранят папки со своими настройками , например ".idea" для IDEA или "nbproject" для NetBeans.
После того как файлы будут скачаны, запустите сборку проекта через NPM
npm i
(No Ratings Yet)
Загрузка...
