Главная » Статьи » Разработка React JS — Настройка среды

Разработка React JS — Настройка среды

Разработка React JS — Настройка среды

От автора: в этой главе мы покажем, как создать среду для того, чтобы разработка React js была успешной. Обратите внимание, что существуют также дополнительные этапы, которые позже помогают ускорить процесс разработки. Нам понадобится NodeJS, поэтому, если вы его не установили, по ссылке ниже вы сможете узнать, как это сделать.

NodeJS и NPM

NodeJS — это платформа, необходимая для разработки на ReactJS. Ознакомьтесь с нашим руководством NodeJS — Установка среды.

Шаг 1. Создание корневой папки.

Корневая папка будет называться reactApp, и мы разместим ее на рабочем столе. После создания папки нам нужно открыть ее и создать внутри пустой файл package.json, выполнив npm init из командной строки и следуя инструкциям.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

Шаг 2 — Установка глобальных пакетов

Для этой установки нам потребуется установить несколько пакетов. Нам понадобятся некоторые плагины babel, поэтому сначала установите babel, запустив следующий код в окне командной строки.

C:\Users\username\Desktop\reactApp>npm install -g babel
C:\Users\username\Desktop\reactApp>npm install -g babel-cli

Шаг 3 — Добавление зависимостей и плагинов

В этом руководстве мы будем использовать пакет webpack. Давайте установим webpack и webpack-dev-сервер.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

Поскольку мы хотим использовать React, нам нужно сначала установить его. Команда -save добавит эти пакеты в файл package.json.

C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save

Как уже упоминалось, нам понадобятся некоторые плагины для babel, поэтому давайте установим их.

C:\Users\username\Desktop\reactApp>npm install babel-core
C:\Users\username\Desktop\reactApp>npm install babel-loader
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Шаг 4. Создание файлов.

Давайте создадим несколько файлов, которые нам нужны. Их можно добавить вручную или с помощью командной строки.

C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js

Альтернативный способ создания файлов, которые нам нужны

C:\Users\username\Desktop\reactApp>type nul >index.html
C:\Users\username\Desktop\reactApp>type nul >App.jsx
C:\Users\username\Desktop\reactApp>type nul >main.js
C:\Users\username\Desktop\reactApp>type nul >webpack.config.js

Шаг 5 — Настройка компилятора, сервера и загрузчика

Откройте файл webpack.config.js и добавьте в него следующий код. Мы устанавливаем точку входа webpack в main.js. Путь вывода — это место, где будет обслуживаться упакованное приложение. Мы также устанавливаем сервер разработки на порт 8080. Вы можете выбрать любой порт, который хотите.

И, наконец, мы устанавливаем загрузчики Babel для поиска js-файлов и используем пресеты es2015 и react, которые мы установили ранее.

webpack.config.js

var config = { entry: './main.js', output: { path:'/', filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }
}
module.exports = config;

Откройте package.json и удалите «test» «echo \»Error: no test specified\» && exit 1″ внутри объекта «scripts». Мы удаляем эту строку, поскольку в этом руководстве не будем проводить тестирование. Давайте вместо этого добавим команду start.

"start": "webpack-dev-server --hot"

Перед вышеуказанным шагом потребуется webpack-dev-server. Для установки webpack-dev-server используйте следующую команду.

C:\Users\username\Desktop\reactApp>npm install webpack-dev-server -g

Теперь мы можем использовать команду npm start для запуска сервера. Команда —hot добавляет интерактивную перезагрузку после того, как что-то изменяется внутри наших файлов, поэтому нам не нужно обновлять браузер каждый раз, когда мы меняем наш код.

Шаг 6 — index.html

Это просто обычный HTML. Мы устанавливаем div id = «app» в качестве корневого элемента для нашего приложения и добавляем скрипт index.js, который является вложенным файлом приложения.

<!DOCTYPE html>
<html lang = "en"> <head> <meta charset = "UTF-8"> <title>React App</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>

Шаг 7 — App.jsx и main.js

Это первый компонент React. Мы подробно объясним компоненты React в следующей главе. Этот компонент отображает «Hello World !!!».

App.jsx

import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!! </div> ); }
}
export default App;

Нам нужно импортировать этот компонент и отобразить его в корневом элементе приложения, чтобы его можно было просматривать в браузере.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'));

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

Шаг 8 — Запуск сервера

Настройка завершена, теперь мы можем запустить сервер, выполнив следующую команду.

C:\Users\username\Desktop\reactApp>npm start

В результате будет отображен порт, который нам нужно открыть в браузере. В нашем случае это http://localhost:8080/. Открыв его, мы получим следующий вывод.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.