Question

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

在Google中抛出“ReactJS isomorphic rendering”以获取更多信息祝你好运，玩得开心 - 这很酷！：

构建/编译/部署ReactJS到生产的最佳方法

的index.html

main.js

1 个答案: