Предпосылки:
- Установить пряжу
- Установите Node v 9.2.0 на ubuntu или mac или windows.
Настраивать:
- Создать каталог проекта:
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. Создайте и настройте .babelrc
file:
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 init
earlier, был создан файл с именем 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.js
saved в /build/
directory, где также находится index.html
.
Итак, если мы войдем в /build
directory, мы должны увидеть такую структуру.
- build - index.html - index.bundle.js
Эти 2 файла являются производственными файлами. index.bundle.js
содержит все. Теперь нам нужно только openindex.html
в браузере, и все должно работать.
Мы можем разместить это на бесплатном хостинге, таком как co.nf. Создайте бесплатный co.nf
subdomain и загрузите эти 2 файла. Перейдите по его URL-адресу, и у вас будет развернуто веб-приложение для реагирования!
Вот и все! Удачного строительства и взлома. Спасибо! \ м /