普通页面引入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转发 ...
随机推荐
- 将springboot项目移到内网出现的问题!
报找不到Jay包错误,在pom.xml文件中加这段 <repositories> <repository> <id>central</id> <u ...
- 封装函数（累计和、K型、金字塔）
// 假设有个函数,只要传参数进去,就能统计累加的结果 function test($n){ if($n==1){ return 1; } return $n+test($n-1);}echo tes ...
- java 线程实现、线程暂停和终止 、线程联合join、线程基本信息获取和设置、线程优先级
转载地址:速学堂 https://www.sxt.cn/Java_jQuery_in_action/eleven-inheritthread.html 1. 通过继承Thread类实现多线程 继承Th ...
- SaltStack实现动态文件分发，支持脚本换行，中文乱码
场景:将动态脚本分发到各个机器的指定目录下 说明:使用SaltStack的 file.managed file.managed 里面可以定义内容的几种方式 - source: - contents: ...
- js 遍历树的层级关系的实现
1.遍历树的层级关系 1)先整理数据 2)找到id和数据的映射关系 3)然后找到父节点的数据,进行存储 test() { const list = [ { id: ", parentId: ...
- metasploit情报收集
1.msf连接数据库 service postgresql start(postgresql默认用户名scott,密码tiger) msf > db_connect 用户名:密码@127.0.0 ...
- K2 BPM_康熙别烦恼（上篇）——分级授权_工作流引擎
- iOS自动布局学习（UIView+AutoLayout）
自动布局虽然在iOS6的时候已经推出,不过由于各个原因并没有被开发组广泛使用.一方面是大家的app支持版本都是低于iOS6的,另一方面来说是Xcode支持木有现在这么好.以前由于iPhone设备相对固 ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- SQLSEVER 同台服务器下不同表 触发器实现数据实时同步
触发器的使用: 1.首先建立两个相同结构的表,两个表明的列的名称不同. student_01 字段 name ; 字段 age ; 字段 class ; student_02 字段 ...