普通页面引入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转发 ...
随机推荐
- Request部分知识点小结
HTTP: * 概念:Hyper Text Transfer Protocol 超文本传输协议 * 传输协议:定义了,客户端和服务器端通信时,发送数据的格式 * 特点: 1. 基于TCP/IP的高级协 ...
- mysql数据库语言分类
MySQL的sql语言分类DML.DQL.DDL.DCL. MySQL的sql语言分类DML.DQL.DDL.DCL. SQL语言一共分为4大类:数据定义语言DDL,数据操纵语言DML,数据查询语 ...
- Git和Github的介绍、简单操作、冲突（上）
目的: 1.git与github简介 2.Git与SVN区别 3.Github 的简单使用 4.下载安装Git-20-64-bit.exe 5.Git常用命令 5.1Git命令使用场景 5. ...
- 从C++到Qt（舍弃IDE或qmake、cmake等工具的束缚，尝试通过几个例子）
Qt 是 C++ 的库,Qt 在 ansi C++ 的基础上进行了一点扩展. 但国内似乎比较浮躁,学Qt的很多连基本的C++如何编译似乎都不太清楚.本文舍弃IDE或qmake.cmake等工具的束缚, ...
- JNI创建共享内存导致JVM terminated的问题解决（segfault，shared memory，内存越界，内存泄漏，共享内存）
此问题研究了将近一个月,最终发现由于JNI不支持C中创建共享内存而导致虚拟机无法识别这块共享内存,造成内存冲突,最终虚拟机崩溃. 注意:JNI的C部分所使用的内存也是由JVM创建并管理的,所以C创建了 ...
- 怎样输出Hello World
方法一: 进入python交互模式, 然后使用: print()函数输出 方法二: 新建一个.py文件, 然后写入print()函数, 再使用python命令执行输出:
- HTML标签认识一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- nginx的proxy模块详解以及参数
文章来源 运维公会:nginx的proxy模块详解以及参数 使用nginx配置代理的时候,肯定是要用到http_proxy模块.这个模块也是在安装nginx的时候默认安装.它的作用就是将请求转发到相应 ...
- Java 函数调用是传值还是传引用？ 从字节码角度来看看！
原文地址:点击打开
- SQL注入是什么？如何防止？
SQL注入是什么?如何防止? SQL注入是一种注入攻击,可以执行恶意SQL语句.下面本篇文章就来带大家了解一下SQL注入,简单介绍一下防止SQL注入攻击的方法,希望对大家有所帮助. 什么是SQL注入? ...