Настройка окружения ReactJS

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

После успешной установки NodeJS мы можем начать устанавливать React-on с помощью npm. Вы можете установить ReactJS двумя способами

• Использование webpack и babel.

• Использованиеcreate-react-appКоманды.

Установка ReactJS с помощью webpack и babel

WebpackЭто модульный捆绑щик (управление и загрузка независимых модулей). Он принимает соответствующие модули и компилирует их в один (файл)捆绑ку. Вы можете использовать этот捆绑щик для разработки приложений, используя командную строку или конфигурацию файла webpack.config.

Babel - это компилятор JavaScript и компилятор. Он используется для преобразования одного исходного кода в другой. Используя эту функцию, вы сможете использовать новые функции ES6 в коде, и Babel преобразует их в обычный ES5, который может работать во всех браузерах.

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

Используйте команду mkdir, чтобы создать папку reactApp на рабочем столе для установки всех необходимых файлов.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Для создания любого модуля необходимо создать файл package.json. Поэтому после создания папки нужно создать файл package.json. Для этого вам нужно запустить команду npm init из командной строки.

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

Эта команда запрашивает информацию о модуле, например, имя пакета, описание, автор и т.д. Вы можете пропустить эту информацию, используя опцию –y.

C:\Users\username\Desktop\reactApp>npm init -y
Написано в C:\reactApp\package.json:
{
　　　"name": "reactApp",
　　　"version": "1.0.0",
　　　"description": ","
　　　"main": "index.js",
　　　"scripts": {
　　　　　　"test": "echo \"Error: no test specified\" && exit 1"
　　　},
　　　"keywords": [],
　　　"author": ","
　　　"license": "ISC"
}

Шаг 2 - Установка React и React dom

Поскольку нашей основной задачей является установка ReactJS, установите его и его пакет dom, используя команды npm install react и react-dom. Вы можете использовать опцию --save, чтобы добавить установленные нами пакеты в файл package.json.

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

Или, вы можете установить их все в одной команде, как показано ниже:

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

Шаг 3 - Установка Webpack

Поскольку мы используем webpack для создания бандлов, пожалуйста, установите webpack, webpack-dev-server и webpack-cli.

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

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

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

Шаг 4 - Установка Babel

Установите Babel и его плагины babel-core, babel-loader, babel-preset-env, babel-preset-react и html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Или вы можете установить все эти программы в одной команде, например, -

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env　
　　　babel-preset-react html-webpack-plugin --save-dev

Шаг 5 - Создание файлов

Чтобы завершить установку, нам нужно создать некоторые файлы, то есть index.html, App.js, main.js, webpack.config.js и .babelrcЭти файлы можно создать вручную, или использовать командную строку для их создания.

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

Шаг 6 - Настройка компилятора, сервера и плагинов

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
　　　entry: './main.js',
　　　output: {
　　　　　　path: path.join(__dirname, '/bundle'),
　　　　　　filename: 'index_bundle.js'
　　　},
　　　devServer: {
　　　　　　inline: true,
　　　　　　port: 8001
　　　},
　　　module: {
　　　　　　rules: [
　　　　　　　　　{
　　　　　　　　　　　　test: /\.jsx?$/
　　　　　　　　　　　　exclude: /node_modules/,
　　　　　　　　　　　　loader: 'babel-loader',
　　　　　　　　　　　　query: {
　　　　　　　　　　　　　　　presets: ['es2015', 'react']
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　]
　　　},
　　　plugins:[
　　　　　　new HtmlWebpackPlugin({
　　　　　　　　　template: './index.html'
　　　　　　)
　　　]
}

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

"start": "webpack-dev-server --mode development --open --hot","build": "webpack --mode production"

Шаг 7 - index.html

Это обычный HTML. Мы будем устанавливатьdiv id = "app"Будет корневым элементом приложения, и добавимindex_bundle.jsСценарий (скомпилированный файл приложения).

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

Шаг 8 - App.jsx и main.js

Это первый React компонент. Мы深入解释им React компоненты в следующей главе. Этот компонент будет отобразитьHello World。

App.js

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

Нам нужно импортировать этот компонент и отобразить его в是我们的 корневомAppэлементы, чтобы мы могли видеть их в браузере.

main.js

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

Создайте файл с именем.babelrcи скопируйте следующее содержимое в этот файл.

{
　　　"presets":["env", "react"]}

Шаг 9-Запуск сервера

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

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

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

Шаг 10-Создание пакета

В конце концов, чтобы создать捆绑 пакет, вам нужно запустить команду build в командной строке, как показано ниже:

C:\Users\w3codebox\Desktop\reactApp>npm run build

Это создаст распределенный пакет в текущей папке, как показано ниже.

Использование команды create-react-app

Кроме использования webpack и babel, вы также можете установитьcreate-react-appчтобы установить ReactJS проще.

Шаг 1-Установка create-react-app

Просмотрите рабочий стол и установите Create React App с помощью командной строки, как показано ниже-

C:\Users\w3codebox>cd C:\Users\w3codebox\Desktop\
C:\Users\w3codebox\Desktop>npx create-react-app my-app

Это создаст папку my-app на рабочем столе и установит все необходимые файлы.

Шаг 2 - Удаление всех исходных файлов

Перейдите в папку src в созданном папке my-app и удалите все файлы, как показано ниже -

C:\Users\w3codebox\Desktop>cd my-app/src
C:\Users\w3codebox\Desktop\my-app\src>del *
C:\Users\w3codebox\Desktop\my-app\src\*, Are you sure (Y/N)? y

Шаг 3 - Добавление файла

Добавьте файл с именем в папке srcindex.cssиindex.jsФайл файла -

C:\Users\w3codebox\Desktop\my-app\src>type nul > index.css
C:\Users\w3codebox\Desktop\my-app\src>type nul > index.js

Добавьте следующий код в файл index.js

import React from 'react';import ReactDOM from 'react-dom';import './index.css';

Шаг 4 - Запуск проекта

В конце концов, выполните команду start для запуска проекта.

npm start