普通页面引入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转发 ...
随机推荐
- 修改织梦DedeCMS投票漏洞
织梦/dedecms系统我们都知道是有很多漏洞的,我在调试投票功能的时候正好要用到投票功能,这不就出现了漏洞,下面我就给大家展示如何修复这个织梦投票漏洞 首先我们打开//dedevote.class. ...
- Python-01-编程语言简介
一.编程与编程语言 1. 编程的目的 计算机的发明,是为了用机器取代/解放人力,而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑/电脑一样自动 ...
- 从零开始学Flask框架-003
index.py from flask import Flask,render_template from flask_bootstrap import Bootstrap #初始化 app = Fl ...
- PAT(B) 1043 输出PATest（Java）统计
题目链接:1043 输出PATest (20 point(s)) 题目描述 给定一个长度不超过 104 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest- 这样的 ...
- golang 单元测试(一)
单元测试函数类型 Test(功能测试) 函数规则: 函数名: TestXxxx , 以Test为前缀.Xxxx以大写字母开头 参数类型: *testing.T func TestXxxx(t *tes ...
- 血小板 live2d web使用
关于此插件 看到一个很多网站都有动态的小人,目前除了即将废弃的flash就是canvas和h5动画了,h5动画能力有限,不能画出复杂的效果 那么canvas就是首选,全部手画也不可能,大部分使用库和工 ...
- Spring全框架讲解
Day 01: https://blog.csdn.net/sinat_29211659/article/details/81335229
- SQL Server2008 查找用户登录日志
select loginname,accdate from sys.syslogins
- springboot之手动控制事务
一.事务的重要性,相信在实际开发过程中,都有很深的了解了.但是存在一个问题我们经常在开发的时候一般情况下都是用的注解的方式来进行事务的控制,说白了基于spring的7种事务控制方式来进行事务的之间的协 ...
- win10 总是很快自动关机 无人参与系统睡眠超时设置
解决WIN10隔几分钟就自动黑屏睡眠的方法!_Win10之家原文是卸载了电源驱动,下面是在评论里看到的方法: 这是系统无人值守时睡眠时间的设定,默认是两分钟.解决方法:1.运行注册表管理器,win+r ...