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


我是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')
);

6866
2018-05-11 03:48


起源

生产中的React应该是服务器端呈现的,包含JS文件,用于动态组件的客户端呈现。你基本上没有一个 index.html 文件已经存在,因为它将全部通过React组件完成并在发送到客户端之前呈现为字符串。在我的团队决定选择另一个平台之前,我在这个非常好的回购中成功地在我们的环境中实现了这个 github.com/mhart/react-server-example - Deryck


答案:


我推荐使用 的WebPack 捆绑你的代码。它会将您的整个应用程序整合到一个文件中(如果您进一步优化webpack,可以将其整合到一个文件中)。然后,您可以拥有一个非常基本的index.html文件,它只是加载捆绑的js文件。以您喜欢的方式将其推送到您的生产服务器。

这是一个很好的教程,可以帮助您开始使用Webpack: 使用Webpack和Babel为ES6设置React (如果你不喜欢这个,那里有很多这些)

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

以下是使用React进行同构渲染的示例: Github上的示例

在Google中抛出“ReactJS isomorphic rendering”以获取更多信息。
祝你好运,玩得开心 - 这很酷的东西:)


16
2018-05-11 19:03