Реагировать без Webpack

Я начал изучать ReactJS. Похоже, что Facebook только что выпустил версию 15.0.1. Я изучил эту структуру в прошлом году, в версии 0.12.x, когда использовал JSXTransformer, и теперь кажется, что он ушел от него.

Теперь кажется, что почти каждый учебник предлагает использовать новейший React с Webpack. Есть ли способ не использовать webpack? Я пытаюсь найти хороший действительный пример с задачей grunt для React 15.xx

Любая помощь будет оценена по достоинству.

ОТВЕТЫ

Ответ 1

Jsx трансформатор устарел, кажется.

Обновление 04/08/2019: используйте https://github.com/developit/htm для минималистской настройки реагирования.

Если вы не хотите использовать веб-пакет, вам нужно подумать о том, без каких функций вы можете жить.

Благодаря расширению поддержки браузерами функций ES6 теперь вы можете использовать синтаксис ES6, а также использовать модули (при активации флагов эксперимента) без использования Webpack.

Если вы хотите использовать JSX, вам всегда нужно будет перенести его в JS, потому что в обозримом будущем нет встроенной поддержки для него. Самый простой способ сделать это - добавить промежуточное программное обеспечение Babel с предустановкой "React" на свой сервер разработки.

Управление зависимостями также будет сложным, потому что npm предоставляет пакеты в CommonJS, которые не могут работать как в браузере...

Если вы хотите поэкспериментировать с этим, вы можете проверить экспериментальный стартовый набор React, который я поставил на GitHub React Without Webpack, который пытается реплицировать большинство функций веб-пакетов с использованием встроенных функций браузера и http2.

Ответ 2

Самый простой способ:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">  
</head>

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

      class Hello extends React.Component{
        render() {
          return <p>Hello {this.props.name}</p>;
        };
      }

      ReactDOM.render(
        <Hello name='World'/>,
        document.getElementById('root'),
      );
  </script>
</body>

</html>

Ответ 3

Самый простой способ не использовать webpack - просто использовать babel.

В настоящий момент самая минимальная настройка, которую я могу выяснить, - использовать пакеты babel-cli и babel-preset-react.

Если у вас есть файл package.json, вам просто нужно ввести:

npm install babel-cli babel-preset-env --save-dev

Тогда вам понадобится файл.babelrc с по крайней мере следующим содержимым: {"presets": ["react"]}.

Если, например, ваши источники javascript находятся в папке js, вы можете скомпилировать их в папку lib, добавив в свой файл package.json поле сценариев:

"scripts": {
  "build": "babel js --out-dir lib"
},

Таким образом, запуск npm run build компилирует ваши файлы javascript в папку lib.

Тогда вам просто нужно связать скомпилированный файл в html, например:

<script src="lib/script.js"></script>

Минимальный код для использования реакции:

const HelloWorld = function HelloWorld(props, context) {
  return <p>Hello <strong>React</strong>!</p>;
};

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root'),
);

Обратите внимание, что при таком подходе вы не переставляете es6 на es5, поэтому, если вы хотите поддерживать старые браузеры, вам все равно нужно добавить пакет babel-preset-env и изменить файл.babelrc, как этот

{
  "presets": ["env", "react"]
}

Ответ 5

Вам просто нужно включить автономную версию babel, как это объясняется в документации: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx

Quickly Try JSX

Самый быстрый способ попробовать JSX в своем проекте - добавить этот тег на свою страницу:

 В настоящее время Вы можете использовать JSX в любом теге, добавив type = "text/babel" приписать ему. Вот пример HTML файла с JSX, который вы можете скачать и играть с.

Этот подход хорош для изучения и создания простых демонстраций. Тем не мение, это делает ваш сайт медленным и не подходит для производства. когда Вы готовы двигаться вперед, удалите этот новый тег и Атрибуты type = "text/babel" добавлены. Вместо этого в следующем раздел вы настроите препроцессор JSX для преобразования всех ваших  теги автоматически.

Вот пример:

index.html

<body>

    <div id="root"></div>

    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">

        function Hello(props) {
            const [name, setName] = React.useState(props.name);
            return (
                <h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
                    Hello {name}
                </h1>
            );
        }

        ReactDOM.render(
            <Hello name='World'/>,
            document.getElementById('root'),
        );

    </script>

</body>