build/compile/deploy ReactJS 投入生产的最佳方式

Question

我是 reactJS 的新手，正在尝试了解将代码部署到生产环境的最佳方式。根据下面的 link，我正在使用 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')
);

Answer 1

我建议使用 Webpack 来捆绑您的代码。它会将你的整个应用程序整合到一个文件中（如果你对 webpack 进行更多优化，则可以将其整合到几个文件中）。然后你可以有一个非常基本的 index.html 文件，它只加载捆绑的 js 文件。以您喜欢的任何方式将其推送到您的生产服务器。

这里有一个很好的 Webpack 入门教程：Setting up React for ES6 with Webpack and Babel（如果你不喜欢这个，这里有很多教程）

React 目前面临的挑战之一是包大小大于最佳大小。对于复杂的应用程序，这可能开始成为初始页面加载的问题。输入同构渲染。 React 可以运行服务器端并呈现可快速下载的应用程序快照。然后，当您的实际应用程序包下载时，它会无缝地获取当前 DOM，从而在它们到达您的页面时提供更快捷的用户体验。

这里有一个用 React 做同构渲染的例子：Example on Github

去 "ReactJS isomorphic rendering" Google 了解更多信息。
祝你好运，玩得开心 - 这是很酷的东西:)

build/compile/deploy ReactJS 投入生产的最佳方式

Best way to build/compile/deploy ReactJS to production

jsx

reactjs

react-jsx

index.html

main.js