Здесь вам понадобятся ингредиенты:
- Базовые знания JavaScript
- React.js
- Node.js
- Express.js
- Вавилон
- Webpack
- Сладкая улыбка на лице
Некоторые предварительные условия перед тем, как мы начнем:
Что такое React.js?
- React.js - это библиотека JavaScript для создания интерактивного пользовательского интерфейса и повторно используемых компонентов пользовательского интерфейса.
- React.js предоставляет концепцию Virtual DOM, которая помогает вносить только необходимые изменения в реальную DOM.
Что такое Node.js?
- Node.js - это фреймворк для программирования на стороне сервера, построенный на движке JavaScript Chrome, который обеспечивает управляемый событиями неблокирующий ввод-вывод.
- Node - это платформа, дающая отличный опыт написания кода JavaScript без использования браузера.
Что такое Express.js?
Что такое Вавилон?
- Babel - это, по сути, транспилятор ECMAScript 6/7 в ECMAScript 5.
- Babel Транспилируйте свой код в поддерживаемую в настоящее время версию JavaScript.
Что такое веб-пакет?
- Webpack - это инструмент сборки, который помещает все ваши ресурсы, включая Javascript, изображения, шрифты и CSS, в граф зависимостей.
- Если вы создаете сложное UI-приложение со множеством статических ресурсов, не связанных с кодом, таких как CSS, изображения, шрифты и т. Д., Тогда да, Webpack даст вам большие преимущества.
Давай начнем
- Создайте папку своего проекта, скажем:
my-react-app
- Запустите
npm init -y
в терминале проекта, он создастpackage.json
файл с конфигурациями по умолчанию. - Установите
babel
. Babel преобразует наш код ES6 в ES5 JavaScript, чтобы текущие браузеры могли его понять. Babel особенно важны, потому что мы часто используем JXS для написания макета в наших компонентах React.
Запустите эти команды в своем проекте:
npm install --save babel-core babel-preset-latest babel-preset-react
4. Создайте .babelrc
файл в папке вашего проекта. Это файл конфигурации для Babel, в котором используются только что установленные нами предустановки.
//.babelrc { "presets": [ ["latest", { "modules": false }], "react" ] }
5. Теперь очередь за Webpack
. Webpack объединяет все ваши файлы JavaScript и npm
пакеты в один .js
файл.
Обычно проще работать с одним файлом, чем с несколькими небольшими файлами. Webpack также минимизирует пакет для производственной среды.
Выполните следующую команду в своем проекте:
npm install --save babel-loader webpack
babel-loader
помогает запускать Babel из Webpack.
6. Теперь создайте webpack.config.js
и скопируйте / вставьте конфигурацию, как показано ниже:
const path = require('path'); module.exports = { context: path.join(__dirname, 'src'), entry: [ './index.js', ], output: { path: path.join(__dirname, 'www'), filename: 'bundle.js', }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: [ 'babel-loader', ], }, ], }, resolve: { modules: [ path.join(__dirname, 'node_modules'), ], }, };
Давайте разберемся с приведенной выше конфигурацией.
context: указывает каталог, в который мы пишем наш код JavaScript.
loaders (module.rules): здесь мы указываем, как каждый файл должен обрабатываться, прежде чем Babel объединит нашу логику в один файл пакета.
запись: основной или начальный файл вашего проекта.
решить: где Webpack должен искать ссылку на ваше import
или require
заявление. Таким образом, вы можете легко импортировать модули из node_modules
.
Вместе с webpack.config.js
создайте файл index.js
внутри папки src
.
//src/index.js console.log('Hi...');
Вернитесь к своему package.json
и обновите часть script
, как указано ниже:
"scripts": { "compile":"webpack", "test": "echo \"Error: no test specified\" && exit 1", },
Перейдите в свой проект в терминале и нажмите npm run compile
. Вы увидите динамически сгенерированную сборку в www/bundle.js
.
Вы закончили с самой простой настройкой вашего приложения.
7. Код реакции:
Теперь пришло время написать некоторый react
код, чтобы вы могли видеть наш результат на экране.
Установить react
зависимости: npm install --save react react-dom
Измените свой index.js
файл в папке src
с помощью кода, приведенного ниже:
import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <h1>Welcome to React Application</h1> ) } ReactDOM.render(<App/>, document.getElementById('app'))
Создайте файл index.html
в каталоге www
, чтобы вы могли видеть результат в браузере.
<html> <head> <script src="bundle.js"></script> </head> <body> <div id="app"></div> </body> </html>
Снова запустите npm run compile
и откройте index.html
в браузере.
Вы закончили базовую настройку вашего реагирующего приложения.
8. Живая перезагрузка:
В среде разработки мы не хотим снова и снова перекомпилировать наше приложение и обновлять html файл. Следовательно, нам нужен сервер, который обслуживает ваши изменения в браузере. Здесь вы настроите свой экспресс сервер.
Начните с установки этих зависимостей:
npm install --save express webpack-dev-middleware
Удалите файл bundle.js
из каталога www
, обновите package.json
, как показано ниже:
"scripts": { "compile": "webpack", "start": "node server.js", "test": "echo \"Error: no test specified\" && exit 1" },
Создайте server.js
в папке вашего проекта и вставьте приведенный ниже код:
const express = require('express'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpack = require('webpack'); const webpackConfig = require('./webpack.config.js'); const app = express(); const compiler = webpack(webpackConfig); app.use(express.static(__dirname + '/www')); app.use(webpackDevMiddleware(compiler, { hot: true, filename: 'bundle.js', publicPath: '/', stats: { colors: true, }, historyApiFallback: true, })); const server = app.listen(3000, function() { console.log('App running on port 3000!'); });
Запустите сервер, набрав npm start
, goto http: // localhost: 3000.
Вы увидите, что ваш сервер запущен.
Это все о настройке вашего проекта с нуля с минимальными настройками.
Дайте мне знать ваши вопросы, отзывы и предложения. :)