gpt4 book ai didi

reactjs - HTML 中的 React JS

转载 作者:行者123 更新时间:2023-12-03 13:30:59 25 4
gpt4 key购买 nike

我对 React JS 或任何给定的服务器端技术完全陌生。现在,我想学习如何使用 React JS 进行开发。

简介

我从 React JS 开始 tutorials在官方网站上。现在,我正在尝试导入 React toolbox或任何其他第三方组件到我的 JSX 代码中。但是,我面临着uncaught exception error: require not defined的问题.

当我搜索它时,我开始了解各种构建机制(browserify、webpack、gulp),我(再次)对它们完全陌生。阅读完这些内容并看到 some examples ,我能够让我的浏览器编译 require()写在我的.jsx中的声明文件。

问题

我想做的是:

  • 写一个.html文件。
  • 通过我的 server.js 启动它文件。
  • 添加<script>标签,这将注入(inject)我的 .jsx代码输入我的 .html文件。

到目前为止我看到的示例( 12 和其他一些...)加载 .js文件开头并写入 .html代码 .jsx文件( render() 函数)。

问题

是否可以加载.html文件来自server.js并使用.jsx来自<script>标签 .html文件?像这样的事情:

<html>
.
.
<body>
<div id="container"></div>
<script src="path_to_reactjs_file"></script>
</body>
</html>

如果这听起来像是完全愚蠢的问题,我很抱歉,但由于对这项技术完全陌生,我无法理解应该如何解决它。

如有任何帮助,我们将不胜感激。

最佳答案

听起来文件扩展名可能存在问题,Browserify 只能识别 .js.json 扩展名,除非您另有说明。

$ browserify --extension jsx src/main.js > bundle.js

具有正确转换的 Babel 将在其模块转译过程中自动为您执行此操作。

$ browserify src/main.js -t [ babelify --presets [ es2015 React ] ] > bundle.js

请注意,这假设您的入口点具有 .js 文件扩展名,如果是 .jsx,则必须设置扩展名类型。

可以通过将配置添加到 package.json 来简化此配置

{
babel: {
presets: [ 'es2015', 'react' ]
}
},
{
browserify: {
transform: 'babelify'
}
}

关于reactjs - HTML 中的 React JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35796436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com