Подтвердить что ты не робот

Лучший способ создания/компиляции/развертывания ReactJS для производства

Я новичок в реакцииJS, и я пытаюсь понять, что является лучшим способом развернуть код для производства. В соответствии с приведенной ниже ссылкой, я строю с использованием babel в качестве кода ниже, но мне было интересно , если это хорошо, или есть ли другие лучшие практики вокруг развертывания ReactJS для производства:

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

babel --presets es2015,react --watch src/ --out-dir dist

http://www.sitepoint.com/getting-started-react-jsx/

Вот мои файлы index.html и main.js:

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resources prototype</title>
    <!-- React / Babel / Jquery Libraries -->
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>

  </body>
</html>

main.js

var First = React.createClass({
  render: function() {
    return (
      <div className="First">
        Hello, world!
      </div>
    );
  }
});
ReactDOM.render(
  <First />,
  document.getElementById('content')
);
4b9b3361

Ответ 1

Я рекомендую использовать Webpack для связывания вашего кода. Он объединит все ваше приложение в один файл (или несколько, если вы захотите еще больше оптимизировать веб-пакет). После этого вы можете получить очень простой файл index.html, который просто загружает связанный js файл. Переместите это на свой производственный сервер так, как вам нравится.

Вот хорошее руководство для начала работы с Webpack: Настройка React для ES6 с Webpack и Babel (их много, если вам не нравится этот)

Одной из актуальных проблем с React является размер пакета, превышающий оптимальный. Для сложных приложений это может стать проблемой при начальной загрузке страницы. Введите изоморфный рендеринг. React может запускать на стороне сервера и быстро создавать моментальный снимок вашего приложения. Затем, когда ваш фактический пакет приложений загружается, он плавно переходит в текущую версию DOM, что значительно ускоряет работу пользователей, когда они появляются на вашей странице.

Вот пример выполнения изоморфного рендеринга с помощью React: Пример на Github

Пойдите, бросьте "ReactJS изоморфный рендеринг" в Google для большего количества информации
Удачи и веселья - это классная штука :)

Ответ 2

Также рассмотрите pkg для упаковки всего приложения в один исполняемый файл.

https://www.npmjs.com/package/pkg