Auj*_*ara 8 jsx reactjs react-jsx
我是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')
);
Ian*_*Ian 16
我建议使用Webpack捆绑您的代码.它会将您的整个应用程序整合到一个文件中(如果您进一步优化webpack,可以将其整合到一个文件中).然后,您可以拥有一个非常基本的index.html文件,只需加载捆绑的js文件即可.以您喜欢的任何方式将其推送到您的生产服务器.
这是一个很好的教程,可以帮助您开始使用Webpack:使用Webpack和Babel为ES6设置React(如果你不喜欢这个,有很多这些)
React当前面临的挑战之一是大于最佳的束大小.对于复杂的应用程序,这可能开始成为初始页面加载的问题.输入同构渲染.React可以在服务器端运行并呈现快速下载的应用程序快照.然后,当您的实际应用程序包下载时,它会无缝地接收当前的DOM,从而在到达您的页面时获得更加快捷的用户体验.
下面是使用React进行同构渲染的示例:Github上的示例
在Google中抛出"ReactJS isomorphic rendering"以获取更多信息.
祝你好运,玩得开心 - 这很酷的东西:)
| 归档时间： |
|
| 查看次数： |
25200 次 |
| 最近记录： |