Автор оригинала: Rajjeet Phull.

Не было времени? Клонировать репо и пойти!

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/react-basic
npm install
npm start

Создание очень простого приложения React App может быть очень полезным, когда вам нужно попробовать определенную функцию или библиотеку. Наличие этого навыка является обязательным для изучения и освоения реагирования. Я пойду на шаги для создания минималистичной настройки реагирования в посте. Конечный результат доступен на Github репо.

Шаг 1: Инициализировать NPM (управляющий узел пакета)

mkdir new-react-app
cd new-react-app
npm init --y

Мы можем использовать - Вы Чтобы получить базовую конфигурацию и леса для вашего узла проекта.

Шаг 2: Установить React, WebPack и Babel

npm install react react-dom 
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react

Вот что делает каждый пакет: реагировать : Библиотека UI для создания модульных компонентов React-Dom : позволяет нам сделать реакцию в браузере DOM WebPack : Bundler, который преобразует ваш исходный код на вывод для производства WebPack-Cli : позволяет WebPack работать с командами CLI WebPack-Dev-Server : Преобразует наш исходный код и обслуживает его на веб-сервере, когда мы разрабатываем его непрерывно. Это помогает использовать вывод вашего кода в браузере. html-webpack-plugin : расширение в WebPack, который добавляет базовый индекс HTML-файл @ Babel/Core : JavaScript транспортер для преобразования современного JavaScript в версию для производства, которая совместима со всеми браузерами. Babel-Loader : Подключает BABEL к процессу сборки WebPack @ babel/preset-env : Группа обычно используемых плагинов Babel в комплекте в предустановку, которая преобразует современные функции JavaScript в широко совместимый синтаксис @ Babel/Preset-React : Plugins, специфичные RACE Babel, которые преобразуют синтаксис JSX в простой старый JavaScript, который могут понять браузеры, которые могут понять

Быстрое примечание: --save-dev Флаг предназначен для разделения зависимостей в зависимости от разработки зависимостей, так что они не включены в добычу в производстве JavaScript

Шаг 3: Создайте файлы

Давайте создадим файлы сейчас.

touch webpack.config.js
mkdir src
cd src
touch index.js
touch index.html

Скопируйте и вставьте следующий код в каждый файл:

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

webpack.config.js.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // the output bundle won't be optimized for production but suitable for development
  mode: 'development',
  // the app entry point is /src/index.js
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
  	// the output of the webpack build will be in /dist directory
    path: path.resolve(__dirname, 'dist'),
    // the filename of the JS bundle will be bundle.js
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
      	// for any file with a suffix of js or jsx
        test: /\.jsx?$/,
        // ignore transpiling JavaScript from node_modules as it should be that state
        exclude: /node_modules/,
        // use the babel-loader for transpiling JavaScript to a suitable format
        loader: 'babel-loader',
        options: {
          // attach the presets to the loader (most projects use .babelrc file instead)
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      }
    ]
  },
  // add a custom index.html as the template
  plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') })]
};

Я рекомендую прочитать WebPack Документация Когда вам нужно развивать этот файл.

SRC/index.js.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
Helloworld React!
, document.getElementById('root'));

Это точка входа приложения. Он использует React-Dom Библиотека для рендеринга заголовка внутри div с идентификатором корень Отказ Всякий раз, когда мы используем JSX, мы должны импортировать библиотеку RACT. Кроме того, благодаря Babel и пресетам, этот код преобразуется в простой старый JavaScript в файловом файле Bundle, чтобы все браузеры могли понять код.

SRC/index.html.

Наш пользовательский HTML-файл с Div Тег для инъекционного реагирования и Сценарий Тег для загрузки пакета JS.

Шаг 4: Создание сценариев RUN NPM

Модифицировать Package.json Скрипты свойства включают следующие сценарии NPM:

  // package.json
    ...
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  ...

Для производства вы должны создать отдельный конфиг, который расширяется и изменяет версию разработки.

Заключение

Вот и все сейчас. Даже после нескольких лет развития реагирования я все еще возвращаюсь к этому базовому проекту, чтобы проверить мои идеи. Фрезы, как Create-React-App и Nextjs Приятно для проектов, но мне нравится работать с нуля для песочницы.

Вот …| Github репо. Наслаждаться!