react中jsx的使用时html中需要引用啥文件吗
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中jsx的使用时html中需要引用啥文件吗相关的知识,希望对你有一定的参考价值。
需要,正常使用react需要引用三个文件,可从官网下载,引用如下:
<script src="react.js"></script><script src="react-dom.js"></script>
<script src="browser.min.js"></script>
react.js 是 React 的核心库
react-dom.js 是提供与 DOM 相关的功能,你以后创建的组件都是用它创建
Browser.js 的作用是将 JSX 语法转为 javascript 语法
<script type="text/javascript" src="react.js" ></script>
然后把js格式设置为jsx.
<script type="text/jsx" >
....这里就可以调用react的api了
</script> 参考技术B 跟一般的react做的网页一样 react.js , JSXTransformer.js 。然后type改为 text/jsx
在我的 html 文件中需要 React 组件
【中文标题】在我的 html 文件中需要 React 组件【英文标题】:Requiring React components in my html files 【发布时间】:2017-01-03 03:35:01 【问题描述】:我已经使用 express 设置了一个 node.js 服务器,并且我正在渲染一个带有 jsx 代码的 html 页面。一切正常,除了我不知道如何在我的 html 文件中导入其他 jsx 组件以在我的主脚本中使用它们。
我尝试过类似的东西
<script type="text/babel" src="./Modulo.jsx" />
但我收到一个错误GET http://localhost:5000/Modulo.jsx
这是我的 Modulo.jsx 的内容
var Modulo = React.createClass(
render: function()
return(
<h1>Hello</h1>
)
);
这是我的主要模块index.js
var express = require('express');
var React = require('react');
var app = express();
var server = require('http').Server(app);
var swig = require('swig');
var path = require('path');
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
server.listen(5000);
app.get('/', function (req, res)
res.render('ModuleScreen');
);
ModuleScreen 是一个简单的 html 文件,我尝试在其中导入我的 Modulo.jsx
【问题讨论】:
错误码是什么? 你确定路径是对的吗? 我没有关于该错误的更多信息(已更新为屏幕)。是的,我确信这条路是正确的。 是 404 还是 500 错误?它是从公共文件夹提供服务还是在发送时在服务器上转译? 提供你的静态中间件初始化代码和你的Modulo.jsx
在服务器上的路径
【参考方案1】:
听起来您还没有设置 express 来提供静态文件,您的设置中应该有如下内容:
app.use(express.static(path.join(__dirname, 'public')));
这会将public
目录中的所有内容作为静态资源提供,这正是您的script
标签所需要的。
但是,您通常不会将其他 jsx 模块直接导入 HTML,而应使用以下方式将其导入主包:
var Modulo = require('./Modulo.jsx');
但您还需要将以下行放在 Modulo.jsx 文件的底部:
module.exports = Modulo
还有其他方法可以导入/需要模块,但这可能是要走的路。如果您需要更多帮助,请使用您的主模块和更多 HTML 和构建过程(包括如果您在浏览器中构建它)更新您的答案。
【讨论】:
【参考方案2】:首先:jsx 不是浏览器可以理解的。您需要使用带有 react 预设的 babel 或 webpack 等工具将其转换为 javascript。
第二:即使你在你的 html 中包含了相同的转译为 js 的代码,它也不会做任何事情。您需要使用 reactDOM 将其安装到 DOM 元素。比如:
ReactDOM.render('<Modulo/>', document.querySelector('#root'))
【讨论】:
谢谢!这显然是一个好方法。但是现在我设置了 Webpack 和 Babel,我不能再用 express 运行我的服务器了。我将入口点配置为我的 index.js 文件,但在端口 5000 上看不到任何内容以上是关于react中jsx的使用时html中需要引用啥文件吗的主要内容,如果未能解决你的问题,请参考以下文章
使用 .js 和 .jsx 作为 Reactjs 的文件结尾有啥区别? [复制]