普通页面引入React(使用和不使用JSX)
1. 不使用JSX
优点: 不用配置有关JSX的编译。
依赖语法：
React.createElement(component/type, props, ...chilidren);
//第一个参数可以是字符串，表示原始标签；
//也可以是React.Component的子类
html页面示例：
使用React的前提是引入react和react-dom文件;生产环境要使用production版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./like_button.js"></script>
</body>
</html>
like_button.js
const e = React.createElement; // 简化代码
// LikeButton是一个React类组件
class LikeButton extends React.Component{
constructor(props) {
super(props);
this.state = {
liked: false
}
}
render() {
return e('button', {
onClick: () => {
this.setState({
liked: true
})
}
}, this.state.liked ? this.props.name : 'UnLike')
}
} const domContainer1 = document.querySelector('#like_button_container');
// e(LikeButton)相当于e(LikeButton, undefined, undefined);
// type=Class, props={name: '1'}, children=undefined
ReactDOM.render(e(LikeButton, {name: '1'}), domContainer1);
2. 快速使用JSX
JSX元素本质上调用React.createElement方法。
注意： 该方法不适用于生产环境
html页面修改部分：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="./like_button.js" type="text/babel"></script>
首先，添加了babel文件，用于编译JSX语法；
其次， like_button.js文件必须添加类型type: "text/babel", 因为script标签默认"text/javascript"
修改类型后，文件请求默认修改成CORS请求。此时本地访问报跨域错误。因为CORS不支持FILE协议。
like_button.js修改
class LikeButton extends React.Component{
constructor(props) {
super(props);
this.state = {
liked: false
}
}
render() {
return (
<button onClick={() => { this.setState({ liked: true }) }}>
{this.state.liked ? this.props.name : 'UnLike'}
</button>
)
}
}
const domContainer1 = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton name="1" />, domContainer1);
3. 将JSX加入项目
可以用于生产环境的JSX配置环境。不需要手动引入babel。
html文件同1中html文件；js文件同2中js代码。
1. 安装JSX预处理器
1. 初始化项目
npm init -y
2. 安装babel和react预处理器
npm install babel-cli@6 babel-preset-react-app@3
2. 运行JSX预处理器
建一个文件夹，命名src; 将使用了JSX语法的like_button文件放入其中
运行下面的命令，启动一个JSX自动监听器，编辑源文件，会自动转化
npx babel --watch src --out-dir . --presets react-app/prod
运行后，会在外面生成一个预处理过后的js文件，该文件处理后的文件也适用于旧浏览器。
普通页面引入React(使用和不使用JSX)的更多相关文章
- Web页面引入文档编辑器报风险
Web页面引入文档编辑器会报风险,则需要以下操作: <system.web> <httpRuntime requestValidationMode="2.0" / ...
- eclipse导入maven时，html页面引入js的路径出现红色波浪线
用eclipse导入一个springboot项目时,html页面引入js以及css时出现如下图所示情况,html页面用了 thymeleaf模板引擎.另外js文件与css文件路径也是正确无误的. 原来 ...
- 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径
使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...
- CSS——三种页面引入方法
目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...
- 同一页面引入多个JS文件的编码问题
原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...
- vue单页面引入CDN链接
不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...
- 没有用到React，为什么我需要import引入React?
没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...
- web页面引入字体
一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...
- html页面引入vue组件
html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发 ...
随机推荐
- STM32之复用功能
复用功能分复用输入,复用输出,STM32芯片内部集成多种模块,如GPIO.串口.i2c等,为使IO端口支持这些模块,厂家对IO端口进行扩展,同一个端口通过设置寄存器会有不同的功能.如下图IO结构图: ...
- 如何将本地的项目添加到github上
参考链接:http://note.youdao.com/noteshare?id=d0b7990a83b024b0172b6d5c5617a8d0&sub=659F216B9046420991 ...
- Linux和Windows系统目录结构区别
Windows目录结构图 Linux目录结构图 我们所有的操作尽量都要在/home/username目录下进行. 快捷进入家目录方式是cd ~.
- PB在已经存在的datawindow中添加数据列的方法
打开数据窗口,点击Data按钮 进入到数据源定义画板,选择要新增的列后,不要保存文件,直接点关闭,在提示框选是就可以了 新增的列值存不到数据库中,如果需要更新数据库中的值则:需要在数据窗口画板下,点击 ...
- Shiro身份认证、盐加密
目的: Shiro认证 盐加密工具类 Shiro认证 1.导入pom依赖 <dependency> <groupId>org.apache.shiro</groupId& ...
- [二叉树算法]关于判断是否为BST的算法
//判断是否为BST 搜索树==二叉排序树 1.递归知最大最小值.2.先中序判是否单调 bool IsValidBST(BTNode *p,int low,int high){ if(p==NULL) ...
- CentOS7安装firewall防火墙
CentOS7之后 , 系统已经推荐了firewall防火墙 , 而不是iptables 主要 : firewall 和 iptables冲突 , 需要禁用其中一个. #停止iptables服务 sy ...
- Python TypeError: __init__() got multiple values for argument 'master'（转）
转自:https://stackoverflow.com/questions/33153404/python-typeerror-init-got-multiple-values-for-argume ...
- 使用其他身份运行计算机（DOS命令）
runas/user:administrator cmd d: cd esop sfispri.ini
- .net SHA-256 SHA-1
Framework 4.5 uses SHA-256 algorithm for the signature, and 4.0 uses SHA-1.