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. 【bzoj4568】【Scoi2016】幸运数字 (线性基+树上倍增)

    Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市的象征.一 ...

  2. msp430入门学习43

    msp430的其他十一 msp430入门学习

  3. P3378 堆【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3378 题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 ...

  4. 解决本地调用office组件成功,但是发布到IIS中出现的错误(检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败)

    在C#操作word或者Excel,我们可能会用到微软内置的COM组件,会出现很多问题. 如:在本地调试导出Excel没有问题,发布到IIS就有问题了,检测到的异常: 我们会发现在iis上运行的程序,没 ...

  5. websocket笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6742746.html websocket -- 双向通信网 ...

  6. 高效的MySQL的批插入 BULK INSERT

    原文:http://www.open-open.com/code/view/1453702496573 MySQL的批插入 BULK INSERT和load data的速度差不多,并且可靠. 语法如下 ...

  7. uiimage缩放图片大小和属性UIViewContentModeScaleAspectFit

    UIImageView *tmp = [[UIImageView alloc]initWithFrame:CGRectMake(5.0f, 5.0f, 40.0f, 40.0f)];          ...

  8. iOS App 项目:会员卡管理系统设计方案

    1.需求描写叙述 店主须要管理自己的会员信息和充值卡信息以及消费纪录 店主觉得购买电脑和外设成本太高,并且店面没有地方容纳这些设备 店主希望通过手机来完毕这些功能.但尽量不产生流量.对网络要求较低 店 ...

  9. HDU1800 Flying to the Mars 【贪心】

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  10. Linux网络编程简单示例

    linux 网络编程是通过socket(套接字)接口实现,Socket是一种文件描述符,socket起源于UNIX,在Unix一切皆文件哲学的思想下,socket是一种"打开—读/写—关闭& ...