当前位置: 首页 > 面试题库 >

生成/编译/部署ReactJS到生产的最佳方法[关闭]

丁阳羽
2023-03-14
问题内容

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

问题答案:

我建议使用 Webpack
捆绑您的代码。它将整个应用程序汇总到一个文件中(如果要进一步优化Webpack,则将几个文件合并在一起)。然后,您可以拥有一个非常基本的index.html文件,该文件可以简单地加载捆绑的js文件。可以通过任何方式将其推送到生产服务器。

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

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

这是一个使用React进行同构渲染的示例:Github上的示例

在Google中抛出“ ReactJS同构渲染”以获取更多信息。



 类似资料:
  • 问题内容: 我正在创建一个Web API,需要一种很好的方法来非常快速地生成一些格式正确的xml。我找不到在python中执行此操作的任何好方法。 注意:一些库看起来很有前途,但要么缺少文档,要么仅输出到文件。 问题答案: 使用lxml: 输出: 有关更多信息,请参见教程。

  • 我正在测试REST API。每个API使用不同类型的JSON负载。我不想手动填写所有输入。因此,我希望动态生成JSON(例如,从文本文件读取值并填写JSON结构),然后将生成的JSON作为请求体在API中传递。 最好的方法是什么?对工具或插件有什么建议吗? 附言:嵌套的JSON结构非常复杂。

  • 问题内容: 我正在寻找一种工具,该工具将为我提供适当的生成源,包括AJAX请求对W3的验证器输入进行的DOM更改。我尝试了以下方法: Web开发人员工具栏 -根据doc类型生成无效的源(例如,它删除标记的自闭合部分)。丢失页面的doctype部分。 Firebug-修复源代码中的潜在缺陷(例如未关闭的标签)。也丢失标签的doctype部分,并注入本身是无效HTML的控制台。 IE开发者工具栏-根据

  • 我在Docker有个Jenkins集装箱。 当我成功构建某个东西时,我希望将其部署到一个glassfish docker容器中。 https://docs.oracle.com/cd/e19798-01/821-1757/ghgmi/index.html https://github.com/jenkinsci/postbuildscript-plugin

  • 我得到了一份0-100人的球员名单和一份拥有自己所有成员名单的球队名单。 现在我想把球员放在团队中,这样团队的大小基本相同(-1差异是可以的),并且技能的总和应该尽可能接近。 我目前的解决方案是一个简单的投票算法(团队在圆圈中投票球员,然后选出下一个最佳球员): 问题是,给出的不是最均匀的团队,控制台输出是: 球队1:球员4,技能75;玩家 3, 技能 50 第二队:球员2,技能50;球员1,技能

  • 本文向大家介绍asp.net mvc 动态编译生成Controller的方法,包括了asp.net mvc 动态编译生成Controller的方法的使用技巧和注意事项,需要的朋友参考一下 做网站后台管理系统的时候,有时我们需要根据用户的录入配置动态生成一些频道,这些频道需要用到独立的Controller,这时就需要用到运行时动态编译了。代码如下: 流程如下:   mvc启动的时候,只有HomeCo