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. Python--对list、tuple、dict的操作

    一.List(列表) 首先,创建一个简单的list: animal = ['cat','dog','lion','tiger'] (1) 用索引的方式访问list中的元素:animal[0] 当索引从 ...

  2. List集合转换为数组类型方法

    list集合转换为数组可以使用list集合的toArray(T[] a)方法, topicDetailsVo.setUrl(urls.toArray(new String[]{})); url是个数组 ...

  3. springboot 的启动流程

    1.我们springboot 项目的启动类如下. 方式1 @SpringBootApplicationpublic class SpringbootZkLockApplication { public ...

  4. Python之（matplotlib、numpy、pandas）数据分析

    一.Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形. 它主要用来回事图形,用来展现一些数据,更加直观的展示,让你第一眼就只要数 ...

  5. Go 操作 Mysql（二）

    查询数据方法回顾整理 上一篇博客中,主要是快速过了一遍 demo 代码和 DB 类型对象中方法的使用 在整理查询数据方法的时候,使用了 Query() 方法,其实 sqlx 还提供了 QueryRow ...

  6. Java 之 File类（文件操作）

    一.概述 java.io.File 类是文件和目录路径名册抽象表示,主要用于文件和目录的创建.查找和删除等操作. File类是一个与系统无关的类,任何的操作系统都可以使用这个类中的方法. 路径问题: ...

  7. Python 使用gevent下载图片案例

    import urllib.request import gevent from gevent import monkey monkey.patch_all() def downloader(img_ ...

  8. 处理request接收参数的中文乱码的问题:

    Ø POST的解决方案: * POST的参数在请求体中,直接到达后台的Servlet.数据封装到Servlet中的request中.request也有一个缓冲区.request的缓冲区也是ISO-88 ...

  9. node.js 微信开发2-消息回复、token获取、自定义菜单

    项目结构 >config/wechat.json 微信公众号的配置文件 >controllers/oauth.js 微信网页授权接口(下一篇再细讲讲) >controllers/we ...

  10. Redis for C#

    ServiceStack.Redis 初识Redis时接触到的.Net-Redis组件是 ServiceStack.Redis,其V3系列的最新版本是:ServiceStack.Redis.3.9.2 ...