Здесь вам понадобятся ингредиенты:

  1. Базовые знания JavaScript
  2. React.js
  3. Node.js
  4. Express.js
  5. Вавилон
  6. Webpack
  7. Сладкая улыбка на лице

Некоторые предварительные условия перед тем, как мы начнем:

Что такое React.js?

  1. React.js - это библиотека JavaScript для создания интерактивного пользовательского интерфейса и повторно используемых компонентов пользовательского интерфейса.
  2. React.js предоставляет концепцию Virtual DOM, которая помогает вносить только необходимые изменения в реальную DOM.

Что такое Node.js?

  1. Node.js - это фреймворк для программирования на стороне сервера, построенный на движке JavaScript Chrome, который обеспечивает управляемый событиями неблокирующий ввод-вывод.
  2. Node - это платформа, дающая отличный опыт написания кода JavaScript без использования браузера.

Что такое Express.js?

Прочтите здесь и вернитесь

Что такое Вавилон?

  1. Babel - это, по сути, транспилятор ECMAScript 6/7 в ECMAScript 5.
  2. Babel Транспилируйте свой код в поддерживаемую в настоящее время версию JavaScript.

Что такое веб-пакет?

  1. Webpack - это инструмент сборки, который помещает все ваши ресурсы, включая Javascript, изображения, шрифты и CSS, в граф зависимостей.
  2. Если вы создаете сложное UI-приложение со множеством статических ресурсов, не связанных с кодом, таких как CSS, изображения, шрифты и т. Д., Тогда да, Webpack даст вам большие преимущества.

Давай начнем

  1. Создайте папку своего проекта, скажем: my-react-app
  2. Запустите npm init -y в терминале проекта, он создаст package.json файл с конфигурациями по умолчанию.
  3. Установите 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.

Вы увидите, что ваш сервер запущен.

Это все о настройке вашего проекта с нуля с минимальными настройками.

Дайте мне знать ваши вопросы, отзывы и предложения. :)