Предпосылки:

  1. Установить пряжу
  2. Установите Node v 9.2.0 на ubuntu или mac или windows.

Настраивать:

  1. Создать каталог проекта:
mkdir projectName && cd projectName

2. Инициализировать проект с помощью пряжи:

yarn init

вам будут предложены вопросы, вы можете нажать Enter для значения по умолчанию или ввести свой ответ для каждого вопроса до конца.

После этого он сгенерирует файл package.json в вашем корневом каталоге.

3. Чтобы использовать функции es6. Установите babel (как devDependencies):

yarn add babel-cli babel-loader babel-preset-env babel-preset-react -D

4. Создайте и настройте .babelrcfile:

touch .babelrc

с точкой (.) перед словом babelrc

сконфигурируйте наш .babelrc введите в него следующие коды.

// inside .babelrc
{
 "presets": ["env", "react"]
}

5. Установите React:

yarn add react react-dom

6. Установите Webpack:

Для сервера разработки и комплектации для производства. Устанавливаем webpack и его devServer (как devDependencies):

yarn add webpack webpack-dev-server webpack-cli -D

7. Добавьте следующую структуру в каталог вашего проекта:

- build/
- index.html
- src/
- index.js
- webpack.config.js

8. Настройте веб-пакет:

// inside webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = { 
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.bundle.js'
  },  
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './build',
    port: 3000
  },  
  module: {
    rules: [
      {test: /\.js$/, exclude: /node_modules/, use: 'babel-loader'}  
    ]   
  }
}

Точкой входа: будет index.js в каталоге / src /.

Вывод: это сгенерированный файл с именем i ndex.bundle.js, который будет создан в каталоге / build /.

9. Настройте index.html точки входа:

<!-- inside /build/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
    <title>Your Project Name</title>
  </head>
  
  <body>
    <div id='root'></div>
  </body>
  <script src="./index.bundle.js"></script>
</html>

10. Настройте точку входа (index.js):

// inside src/index.js
import React from 'react'
import {render} from 'react-dom'
const App = () => {
 return <div>
  <h1>React App Running!</h1>
 </div>
}
render(
 <App/>,
 document.getElementById('root')
)

11. Добавить скрипты:

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

Когда мы запускаем yarn initearlier, был создан файл с именем package.json. Мы добавим скрипты внутрь этого package.json:

Мы можем добавить позицию скрипта после лицензионной части или где угодно, как душе угодно

"license": "MIT",
"scripts": {
  "start": "webpack-dev-server --open",
  "build": "npm run clean && npm run compile",
  "clean": "rm -rf ./build/index.bundle.js",
  "compile": "NODE_ENV=production webpack --config ./webpack.config.js --progress"
},

start: запустит сервер разработчика webpack и автоматически откроет localhost: 3000 в вашем браузере.

clean: удалит созданный index.bundle.js в каталоге / build /.

compile: webpack скомпилирует и сгенерирует index.bundle.js в каталоге / build /.

сборка: запускает сценарий очистить, а затем скомпилировать.

Настройка завершена и готово! Далее идет разработка и производство.

Разработка

Мы используем webpack для нашего сервера разработки. Чтобы запустить dev-сервер, запустите:

yarn start

start - это один из скриптов, которые мы добавили в package.json ранее. Если вы вспомнили

Это автоматически откроет ваш браузер и перейдет к localhost: 3000. Вы должны увидеть запущенную страницу реакции.

Этот сервер разработки также поддерживает горячую перезагрузку, поэтому, когда мы что-то изменим в исходном коде, наш сервер разработки автоматически перезагрузит страницу для нас.

Производство

Мы используем webpack для объединения всех наших файлов javascript в один файл.

Чтобы запустить пакет веб-пакетов:

yarn build

build - это один из скриптов, которые мы добавили в package.json ранее.

Это создаст файл с именем index.bundle.jssaved в /build/directory, где также находится index.html.

Итак, если мы войдем в /builddirectory, мы должны увидеть такую ​​структуру.

- build
   
   - index.html
   - index.bundle.js

Эти 2 файла являются производственными файлами. index.bundle.jsсодержит все. Теперь нам нужно только openindex.html в браузере, и все должно работать.

Мы можем разместить это на бесплатном хостинге, таком как co.nf. Создайте бесплатный co.nfsubdomain и загрузите эти 2 файла. Перейдите по его URL-адресу, и у вас будет развернуто веб-приложение для реагирования!

Вот и все! Удачного строительства и взлома. Спасибо! \ м /