React引入,运行
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引入,运行的更多相关文章
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- React 引入import React 原理
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以我们如果使用了JSX,我们其实就是在使用React,所以我们就 ...
- React Native运行原理解析
Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端 ...
- 10分钟了解 react 引入的 Hooks
"大家好,我是谷阿莫,今天要将的是一个...",哈哈哈,看到这个题我就想到这个开头.最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-a ...
- react 引入 百度地图API
使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...
- 创建新react项目 运行npm start 报错踩过的坑
1.看react官网创建新的react项目 :npx create-react-app my-app cd到my-app npm start 遇见如下报错 这是因为电脑本地git的原因 ,不是 ...
- react引入图片不显示问题
在react 中引入图片的方式和正常不同,,很容易引入不显示 引入本地图片 1.(采用组件式引入方法) import Logo from "图片路径" <img src={L ...
- react引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
随机推荐
- [MFC] TabControl选项卡的使用
MFC中,因项目需要使用TabControl ,使用过程中发现,MFC中的TabControl与C#的TabControl不同,不能通过属性来创建选项页,只能代码生成绑定. 以下为具体的实现方法步骤: ...
- 标准C程序设计七---12
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- PHP提示Cannot modify header information - headers already sent by解决方法
PHP提示Cannot modify header information - headers already sent by解决方法 因为 header();发送头之前不能有任何输出,空格也不行, ...
- hdu3491最小割转最大流+拆点
题意:求最小割,即求最大流即可.此题之关键为拆点(限制在点),每条边都是双向边,注意一下. 未1A原因:在拆点之后添加边的过程中,要注意,出去的是i`,进来的是i,!!所以,写addegde函数时候 ...
- AC日记——NASA的食物计划 洛谷 P1507
题目背景 NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安 全技术问题一直大伤脑筋,因此在各方压力下终止了航天 飞机的历史,但是此类事情会不会在以后发生,谁也无法 保证,在遇到这类航天问题时,解 ...
- (8)C#连sqlserver
str="Data Source=ip; Network Library=DBMSSOCN; Initial Catalog=数据库; User ID=sa; Password=xx&quo ...
- Linux下二进制包、源代码包、rpm包
主要提供三种格式的mysql包:rpm格式.二进制格式.源码格式:(tar打包,gz压缩) rpm格式: libjpeg-devel-6b-33.x86_64.rpm #rpm格式很好区分 ...
- Linux出现cannot create temp file for here-document: No space left on device的问题解决
在终端输入:cd /ho 按tab键时,显示错误: bash: cannot create temp file for here-document: No space left on device 这 ...
- Word中将文本框、图形对象中的文本边距调整
在进行word的实际使用中,如下图制作流程图时,常常发现文字在图形对象中,老是显示不全,而且上部却空出很多距离.此时可以通过设置形状格式--文本框 --- 上.下编辑进行设置. 可以完美解决文本框中文 ...
- Setup and Teardown Thread Group in Jmeter
setup和teardown有点类似于每个测试用例开始和结束时要做的动作 A Thread Group is the starting point of any Jmeter Test Plan. A ...