我是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 --> <!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>
var First = React.createClass({ render: function() { return ( <div className="First"> Hello, world! </div> ); } }); ReactDOM.render( <First />, document.getElementById('content') );
我建议使用 Webpack 捆绑您的代码。它将整个应用程序汇总到一个文件中(如果要进一步优化Webpack,则将几个文件合并在一起)。然后,您可以拥有一个非常基本的index.html文件,该文件可以简单地加载捆绑的js文件。可以通过任何方式将其推送到生产服务器。
这是一个很好的教程,可以帮助您开始使用Webpack:使用Webpack和Babel设置React for ES6(如果您不喜欢这一点,那么这里有很多)
React目前面临的挑战之一是大于最佳的捆绑包大小。对于复杂的应用程序,这可能会成为初始页面加载的问题。输入 同构渲染 。React可以在服务器端运行并呈现可快速下载的应用程序快照。然后,当您实际的应用程序捆绑包下载时,它将无缝地与当前DOM配合使用,从而使用户到达页面时获得更加轻松的用户体验。
这是一个使用React进行同构渲染的示例:Github上的示例
在Google中抛出“ ReactJS同构渲染”以获取更多信息。