Как вручную настроить минимальную настройку для React без приложения create-react-app?

Я не хочу использовать create-react-app. Итак, как я могу настроить минимальную рабочую среду разработки для простого реагирующего приложения?

Примечание. Я знаю, что могу просто включить все, во время выполнения как JS (что хорошо документировано), но я не хочу этого, так как мне все еще нужна версия, которую можно использовать для производства!

Я не хочу:

  • для минимизации (см. соответствующий вопрос здесь)
  • иметь какое-либо объединение (или, если это проще сделать, у меня может быть весь JS, например, объединенный в файл)
  • любая более старая поддержка браузера, чем то, что я пишу как JS (так что никакой транспиляции, которая делает это)
  • любой dev-сервер (могу перезагрузить вручную.)
  • любые функции live-reload или расширенные возможности разработчика

Я хочу:

  • использовать компоненты React
  • (необязательно) включить JSX (Я знаю, что React можно использовать без него, но скажем, это минимальное преимущество, которое я хочу получить от React. Пожалуйста, сообщите мне, однако, какие дополнительные шаги для установки / конфигурации это будет "стоить", поэтому этот ответ применим к тем, кто хочет JSX, и тем, кто это делает. нет.)

По сути, я просто хочу использовать React. Без всякой причудливой ерунды! *

Я просто спрашиваю об этом, потому что официальные документы React не упоминают такую ​​возможность.

Внимание: рассуждения для тех, кто задается вопросом, зачем мне это нужно.

* На самом деле, это звучит безумно, если отказаться от этих удобных функций разработчика и т. Д. Но я утверждаю, что для этого есть законные причины / варианты использования. Мой, например, что все это просто непригодно для меня / ломает вещи, как Я пытаюсь создать расширение для браузера с помощью React.

Да, Я видел очень похожий вопрос, но, к сожалению, пользователь на шаг впереди меня, и ответы на них очень специфичны для их проблемы. Сначала я хочу узнать общие вещи, то есть что мне нужно и как настроить?


reactjs node.js npm create-react-app react-scripts
person rugk    schedule 14.03.2019    source источник
comment
Верно, я знаю, что ссылки не являются хорошим примером, но на самом деле я следил за этим вопросом некоторое время назад: medium.freecodecamp.org/. Кроме того, мне потребовалось 2 секунды, чтобы найти, как создать расширение для браузера с помощью response: medium.com/@gilfink/ и, наконец, взгляните на свой вопрос, разбейте его на небольшие проблемы и решайте их по частям.   -  person squeekyDave    schedule 14.03.2019
comment
вы можете посмотреть htm ... и случайное сообщение в блоге .. htm-2-for-javascript   -  person lecstor    schedule 15.03.2019

Ответы (2)


arrow_upward
16
arrow_downward

Предварительные условия:

  • Node.js (npm) или yarn, установленный на вашем компьютере или как исполняемый файл

Итак, для довольно минимальной настройки вам нужно ...

  1. Инициализировать папку
  • cd path/to/my/folder
  • npm init
  1. Создайте index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>
  1. Тогда вы захотите npm install --save-dev ...
  • реагировать
  • React-dom
  • веб-пакет
  • webpack-cli
  • @ babel / core
  • вавилонский погрузчик
  • @ babel / preset-реагировать
  1. Создать .babelrc
{
  "presets": ["@babel/preset-react"]
}
  1. Создайте webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
  1. Отредактируйте package.json скрипты для сборки
"scripts": {
    "build": "webpack --mode development"
  },
  1. Напишите свой корневой компонент

Создайте папку src/components, а затем создайте свой src/components/app.jsx:

import * as React from "react";

export class App extends React.Component {

  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}
  1. Напишите свой модуль рендеринга ReactDOM в src/index.js (обратите внимание на .js, а не jsx - иначе webpack не найдет файл без дополнительных настроек):
import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
  1. Сборка: npm run build
  2. Откройте свой path/to/my/folder/index.html в современном браузере

И вы сделали! Теперь вы можете добавлять любые удобные дополнения без нежелательного раздувания. Я рекомендую TypeScript.

Для тех, кто читает, и которым требуется поддержка старых браузеров, просто выполните следующие два шага:

  1. npm install @babel/preset-env
  2. Отредактируйте .babelrc и добавьте @ babel / preset-env в свои пресеты:
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
person Fredrik Schön    schedule 14.03.2019
comment
Спасибо, вы просто не совсем объясняете, могу ли я сохранить некоторые сложные / JS-файлы, если я не использую JSX. Или он всегда включен в React, и поэтому я даже не могу использовать его без React? - person rugk; 15.03.2019

arrow_upward
0
arrow_downward

Если вы хотите быстро создать прототип, вы можете попробовать https://codesandbox.io/

person Jafar Karuthedath    schedule 29.09.2020