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)的更多相关文章

  1. Web页面引入文档编辑器报风险

    Web页面引入文档编辑器会报风险,则需要以下操作: <system.web> <httpRuntime requestValidationMode="2.0" / ...

  2. eclipse导入maven时，html页面引入js的路径出现红色波浪线

    用eclipse导入一个springboot项目时,html页面引入js以及css时出现如下图所示情况,html页面用了 thymeleaf模板引擎.另外js文件与css文件路径也是正确无误的. 原来 ...

  3. 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  4. CSS——三种页面引入方法

    目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...

  5. 同一页面引入多个JS文件的编码问题

    原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...

  6. vue单页面引入CDN链接

    不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...

  7. 没有用到React，为什么我需要import引入React?

    没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...

  8. web页面引入字体

    一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...

  9. html页面引入vue组件

    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发 ...

随机推荐

  1. maven基础和基本使用

    maven介绍 Maven是基于项目对象模型(POM project object model)实现的,可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具. 具体作用: 项目 ...

  2. PAT(B) 1072 开学寄语（Java）统计

    题目链接:1072 开学寄语 (20 point(s)) 题目描述 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使 ...

  3. Linux or Mac 重启网络

    Mac sudo ifconfig en0 down sudo ifconfig en0 up Linux /etc/init.d/networking restart

  4. FFplay源代码分析：整体流程图（仅供参考）

  5. 题解-CSA Round#18 Randomly Permuted Costs

    Problem CSA Round 18 题意概要:给定一个有重边有自环 \(n\) 点 \(m\) 边的有向无环图(DAG),每条边有其权值,每当你走到一个点 \(x\) 时,所有从 \(x\) 连 ...

  6. VMWare linux虚拟机（centos没有GUI）联网（NAT模式）

    使用yum list命令查看是否能连上网. 不能联网,需要对centos进行网络配置.但在此之前,需要: 1. 虚拟机网络连接方式设置成NAT. 2. window系统下的两个服务VMwareDHCP ...

  7. 你不知道的JSON.stringify知识点

    1. 定义 stringify 函数的定义: JSON.stringify(value [, replacer [, space]]) 参数: value : 将要转为JSON字符串的javascri ...

  8. 简单使用auth认证实现登录注册

    1 添加路由 //注册 Route::get('/register',"RegisterController@index"); Route::post('/register',&q ...

  9. SDL -安全开发生命周期

    1.学习SDL https://www.cnblogs.com/whoami101/p/9914862.html 2.学习SDL https://blog.csdn.net/whatday/artic ...

  10. C#基础 - 定义变量，输入输出

    本节课主要讲解C#的发展历史及部分C#语言基础, 主要内容有:控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值       打印,两种数据类型,整形类型转换 本节重点难点:定义变量 ...