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 语法

参考技术A html先得引用react.js。
<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中需要引用啥文件吗的主要内容,如果未能解决你的问题,请参考以下文章

在我的 html 文件中需要 React 组件

我啥时候应该特别使用 .jsx 和 .js?

如何在html中引入jsx文件

使用 .js 和 .jsx 作为 Reactjs 的文件结尾有啥区别? [复制]

在 React 和 JSX 中使用 <pre> 标记格式化代码

React的JSX语言