1.引入

<script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.min.js"></script>

2.内容

<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, 简单教程!</h1>,
document.getElementById('app')
);
</script>

实例中我们引入了三个库: wreact.min.js 、react-dom.min.js 和 babel.min.js:

react.min.js React 的核心库

react-dom.min.js 提供操作 DOM 相关的功能

babel.min.js Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

注意:

如果我们需要使用 JSX,则 标签的 type 属性需要设置为 text/babel。

React引入,运行的更多相关文章

  1. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  2. React 引入import React 原理

    本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以我们如果使用了JSX,我们其实就是在使用React,所以我们就 ...

  3. React Native运行原理解析

    Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端 ...

  4. 10分钟了解 react 引入的 Hooks

    "大家好,我是谷阿莫,今天要将的是一个...",哈哈哈,看到这个题我就想到这个开头.最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-a ...

  5. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  6. 创建新react项目 运行npm start 报错踩过的坑

    1.看react官网创建新的react项目 :npx create-react-app my-app    cd到my-app  npm start 遇见如下报错 这是因为电脑本地git的原因 ,不是 ...

  7. react引入图片不显示问题

    在react 中引入图片的方式和正常不同,,很容易引入不显示 引入本地图片 1.(采用组件式引入方法) import Logo from "图片路径" <img src={L ...

  8. react引入方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

随机推荐

  1. android悬浮窗口的一些说明

    1.xml文件里的权限申请 <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" ...

  2. 济南学习 Day 5 T3 am

    [题目描述] 众所不知,rly现在不会玩国际象棋.但是,作为一个OIer,rly当然做过八皇后问题.在这里再啰嗦几句,皇后可以攻击到同行同列同对角线,在 n*n的棋盘中,摆放n个皇后使它们互相不能攻击 ...

  3. 如何让Gridview在没有数据的时候显示表头[没有使用SqlDataSource控件时]

    原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 要看全文请点击http://blog.csdn.net/windok2004/archive/2007/10/28 ...

  4. Redis命令行之Set

    一.Redis之Set简介 1. Set是String类型的无序集合(元素成员唯一). 2. Set是通过hash表实现的,添加.删除.查找的复杂度都是O(1). 3. 每个集合最大成员数为232-1 ...

  5. android本地存储SharedPreferences

    SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的就是一个key-value(键值对)SharedPreferences常用来 ...

  6. T1046 旅行家的预算 codevs

    http://codevs.cn/problem/1046/ 题目描述 Description 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D ...

  7. CODEVS 1245 最小的N个和 堆+排序

    原题链接 http://codevs.cn/problem/1245/ 题目描述 Description 有两个长度为 N 的序列 A 和 B,在 A 和 B 中各任取一个数可以得到 N^2 个和,求 ...

  8. Ajax向前后台传递json和转换

    学生管理系统MVC模式设计心得: jquery .ajax提交data数据格式 jquery 的Ajax方法提交数据,但是是多个参数,具体data的格式如下: data提交的数据类型为:Object  ...

  9. 6.JAVA语言基础部分--数据库操作

    操作数据数据流程:得到Connecnt->获取Statement对象->执行sql语句返回ResultSet 1.通过DriverManager.getConnection("j ...

  10. 优秀的数据序列和还原类----TSimpleMsgPack

    优秀的数据序列和还原类----TSimpleMsgPack TSimpleMsgPack是D10天地弦的作品. 优点:至简,就一个单元文件实现,不需要引用其他单元. 缺点:不是标准的MSGPACK实现 ...