Автор оригинала: Tamizhvendan S.
Facebook действительно изменил, как мы думаем о развитии интернет-пользовательского интерфейса с введением Реагировать Отказ Одним из основных преимуществ этого компонента на основе компонентов является, это легко рассуждать, поскольку вид является просто функцией реквизита и состояния.
Хотя кривая об обучении реагирования является более мелким по сравнению с аналогом его аналогов, один запугивающий аспект для начинающих является инструменты ( Babel , WebPack ) и библиотеки вокруг него.
На самом деле эти инструменты не обязаны использовать реагирование и но для того, чтобы получить максимальную отдачу от особенностей ES6 , Jsx И объединение, мы им нужны. В этом сообщении мы посмотрим, как настроить среду разработки реагирования, не откладываясь инструментами.
Отказ от ответственности: подход, который я собираюсь поделиться, – это только для начинающих, чтобы понять, как начать работу с реагированием, так как проходит этот худой путь, когда я начал изучать реагирование.
Давайте начнем с нуля
Создайте новую папку «React – Hello-World» и инициализируйте ее с NPM.
mkdir react-hello-world cd react-hello-world npm init
Примите значение по умолчанию для всех подсказок
Установка и настройка WebPack
WebPack это модуль Bundler, который принимает модули с зависимостями и генерирует статические активы, объединяя их вместе на основе некоторой конфигурации.
Поддержка Погрузчики В WebPack делает его идеальным подходящим для использования его вместе с React, и мы обсудим его позже в этом посте с более подробностями.
Давайте начнем с установки WebPack с помощью NPM
npm i webpack -S
WebPack требует некоторых настроек конфигурации для выполнения своей работы, и лучшая практика делает его через файл конфигурации webpack.config.js Отказ
touch webpack.config.js
Обновите файл конфигурации следующим образом
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
}
};
module.exports = config;
Минималистское требование файла конфигурации Webpack – это наличие свойств входа и вывода.
App_dir Удерживает путь каталога кодовой базы Action Application и Build_dir Представляет путь каталога вывода файла пучка.
Как указано имя, Вход Указывает файл ввода, используя, как запускается процесс подключения. Если вы идете от C # или Java, это похоже на класс, который содержит Главная метод. WebPack поддерживает несколько точек входа. Здесь index.jsx В SRC/Client/App каталог является отправной точкой приложения
Выход Указывает на WebPack, что делать после того, как процесс объединения был завершен. Здесь мы инструктируем это использовать SRC/Client/Public каталог для вывода подключенного файла с именем bundle.js.
Давайте создадим index.jsx Файл в ./src/client/app и добавьте следующий код, чтобы проверить эту конфигурацию.
console.log('Hello World!');
Теперь в терминале запустите следующую команду
./node_modules/.bin/webpack -d
Вышеуказанная команда запускает WebPack в режиме разработки и генерирует bundle.js Файл и связанный с ним файл карты bundle.jsmap В SRC/Client/Public каталог.
Чтобы сделать его более интерактивным, создать index.html Файл в SRC/клиент каталог и изменить его, чтобы использовать это bundle.js файл
React.js using NPM, Babel6 and Webpack
Теперь, если вы откроете браузер, вы можете увидеть Привет мир! В журнале консоли.
Примечание: есть погрузчик на веб-папат HTML-погрузчик который автоматически создает этот HTML-файл с правильным расположением bundle.js Отказ
Настройка Babel-Loader
Как мы видели в начале, используя JSX и ES6, мы можем быть более продуктивными при работе с реагированием. Но синтаксис JSX и ES6 не поддерживаются во всех браузерах.
Следовательно, если мы используем их в React Code, нам нужно использовать инструмент, который переводит их в формат, который был поддержан браузерами. Это где Бабел входит в картину.
Установив веб-папак, мы немного коснулись погрузчики. WebPack использует загрузчики для перевода файла перед их составом
Для настройки установите следующие пакеты NPM
npm i babel-loader babel-preset-es2015 babel-preset-react -S
Babel-Preset-ES2015 и Babel-Preset-React являются плагинами, используемыми Babel-Loader Перевести синтаксис ES6 и JSX соответственно.
Как мы сделали для WebPack, Babel-Loader Также требуется некоторая конфигурация. Здесь нам нужно сказать это, чтобы использовать плагины ES6 и JSX.
Создать .babelrc Файл и обновите его, как показано ниже
touch .babelrc
{
"presets" : ["es2015", "react"]
}
Следующий шаг рассказывает WebPack использовать Babel-Loader во время объединения файлов
открыть webpack.config.js Файл и обновите его, как показано ниже
// Existing Code ....
var config = {
// Existing Code ....
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
}
]
}
}
Погрузчики Свойство принимает массив погрузчиков, здесь мы просто используем Babel-Loader Отказ Каждый погрузчик Недвижимость должна указать, каковы расширение файла, которое он должен обрабатывать через Тест имущество. Здесь мы настроили его для обработки обоих .js и .jsx Файлы с использованием регулярного выражения. включить Свойство указывает, каков каталог, который будет использоваться для поиска этих расширений файлов. погрузчик Свойство представляет имя загрузчика.
Теперь мы сделаем со всей настройкой. Давайте напишем какой-нибудь код в реакции.
Привет реагировать
Используйте NPM для установки React и React-Dom
npm i react react-dom -S
Заменить существующие console.log Заявление в index.jsx со следующим контентом
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return Hello React!
;
}
}
render(Затем запустите следующую команду, чтобы обновить файл Bundle с новыми изменениями
./node_modules/.bin/webpack -d
Теперь, если вы откроете index.html В браузере вы можете увидеть Привет реагировать
Добавление некоторой сложности
Изготовление часов WebPack
Запуск команды WebPack каждый раз, когда вы меняете файл, не является продуктивным рабочим процессом. Мы можем легко изменить это поведение, используя следующую команду
./node_modules/.bin/webpack -d --watch
Теперь WebPack работает в режиме часов, который автоматически связывает файл всякий раз, когда обнаружено обнаружено изменение. Чтобы проверить это, изменить Привет отреагировать на что-то еще и обновить index.html в браузере. Вы можете увидеть ваши новые изменения.
Если вам не нравится обновление браузера, чтобы увидеть изменения, вы можете использовать React – Hot-Loader !
Использование NPM в качестве бегуна инструмента
Команда ./node_modules/.bin/webpack Может быть сделан еще проще, используя NPM.
Обновите Packages.json как ниже
{
// ...
"scripts": {
"dev": "webpack -d --watch",
"build" : "webpack -p"
},
// ...
}
Теперь команда NPM запустить сборку Запускает WebPack в режиме производства, что сводит к минимуму файл пучка автоматически и Команда NPM запустить dev Запускает WebPack в режиме часов.
Добавление некоторых файлов
В образце мы видели только один компонент под названием Приложение Отказ Давайте добавим еще, чтобы проверить установку бабки.
Создать новый файл Awesomecomponent.jsx и обновить его как ниже
import React from 'react';
class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {likesCount : 0};
this.onLike = this.onLike.bind(this);
}
onLike () {
let newLikesCount = this.state.likesCount + 1;
this.setState({likesCount: newLikesCount});
}
render() {
return (
Likes : {this.state.likesCount}
);
}
}
export default AwesomeComponent;
Затем включите его в index.jsx файл
// ...
import AwesomeComponent from './AwesomeComponent.jsx';
// ...
class App extends React.Component {
render () {
return (
Hello React!
Если ваш WebPack уже работает в режиме Watch, затем обновите браузер, чтобы увидеть AwesomeComponent в действии!
Резюме
В этом посте в блоге мы видели нанесенный подход для создания среды разработки для работы с реагированными. В следующем посте в блоге мы будем расширять этот пример для реализации Flux Архитектура, использующая Alt Отказ Вы можете получить исходный код, связанный с этим сообщением в блоге, можно найти в моем Github Repository Отказ