ReactJS - Настройка среды

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

Sr.No.	Программное обеспечение и описание
1	NodeJS и NPM NodeJS — это платформа, необходимая для разработки ReactJS. Проверьте наши настройки среды NodeJS .

NodeJS и NPM

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

После успешной установки NodeJS мы можем начать установку React на него, используя npm. Вы можете установить NodeJS двумя способами

Использование webpack и babel.
С помощью команды create-реагировать-приложение .

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

С помощью команды create-реагировать-приложение .

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

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

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

Шаг 1 — Создайте корневую папку

Создайте на рабочем столе папку с именемactApp для установки всех необходимых файлов с помощью команды mkdir.

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
Wrote to 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 и прореагируйте dom

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

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

Или вы можете установить их все в одной команде как —

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

Шаг 3 — Установите веб-пакет

Поскольку мы используем 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-response и, 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 и добавьте следующий код. Мы устанавливаем точку входа в webpack как main.js. Выходной путь — это место, где будет обслуживаться связанное приложение. Мы также устанавливаем сервер разработки на порт 8001 . Вы можете выбрать любой порт, который вы хотите.

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: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Откройте package.json и удалите «test» «echo \» Ошибка: тест не указан \ «&& exit 1» внутри объекта «scripts» . Мы удаляем эту строку, так как мы не будем проводить никакого тестирования в этом руководстве. Давайте добавим команды 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;

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

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 — Генерация пакета

Наконец, для генерации пакета вам нужно запустить команду сборки в командной строке как —

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

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

Использование команды create-реагировать-приложение

Вместо использования webpack и babel вы можете установить ReactJS проще, установив приложение create-реагировать .

Шаг 1 — установить приложение create-реагировать

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

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

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

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

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

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

Шаг 3 — Добавить файлы

Добавьте файлы с именами index.css и index.js в папку src как —

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

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

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

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

Наконец, запустите проект с помощью команды запуска.

npm start

ReactJS — Настройка среды

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

Шаг 1 — Создайте корневую папку

Шаг 2 — установите React и прореагируйте dom

Шаг 3 — Установите веб-пакет

Шаг 4 — Установите Babel

Шаг 5 — Создайте файлы

Шаг 6 — Установите компилятор, сервер и загрузчики

Шаг 7 — index.html

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

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

Шаг 10 — Генерация пакета

Использование команды create-реагировать-приложение

Шаг 1 — установить приложение create-реагировать

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

Шаг 3 — Добавить файлы

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

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности