React 学习一 运行
最近项目准备使用React作为前端，主要第一比较火，第二比较小。抽空先来学习一下。
首先下载资源文件：压缩后不到50KB，是挺小的哦。
其中：react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，react-dom-server.js是服务端渲染dom的功能，react-with-addons是一些插件功能。
好，姑且不管server 和addons，用react和react-dom开始一个尝试一下,使用官方实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
运行成功不错：
再看看源代码：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>，React下载包里没有它， 这是啥？
browser.js是babel的浏览器版本，babel又是什么？
babel是一个javascript编译工具，要编译工具干什么？
再看源代码<h1>Hello, world!</h1>，这是React的jxs语法，js不认识它，所以要借助babel把它翻译成为js识别的代码。
在看<script type="text/babel"> 这里指名使用babel，所以要引用browser.js，不然程序无法执行。
好，不想用它怎么办？
那就使用原生的js或者编译过的js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react demo</title>
<script src="../src/react-0.14.3/build/react.js"></script>
<script src="../src/react-0.14.3/build/react-dom.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
</script>
</body>
</html>
去掉browser.js， 修改 <script type="text/javascript">。
补充一点：React之前使用 JSXTransformer 来翻译jsx，其类型为<script type="text/jsx">，从v0.14开始使用babel。babel 不仅可以翻译jsx，也可以编译ES，可能babel使用会给react带来更好的发展，让我们拭目以待。
React 学习一 运行的更多相关文章
- React学习系列一
系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记（一）- 环境搭建
最近在学习react相关的知识,刚刚起步,一路遇坑不断.自己做个笔记,方便日后总结,也供相同趣味的小伙伴一起交流探讨. 学习时主要参考官网的教程:https://facebook.github.io/ ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记一
我是通过script src的方式引入的react的相关文件,本次学习顺序按照<React快速上手开发>一书的顺序学习的, 本篇博客笔记地址:http://note.youdao.com/ ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
随机推荐
- 【ZJOI 2018】线图（树的枚举，hash，dp）
线图 题目描述 九条可怜是一个热爱出题的女孩子. 今天可怜想要出一道和图论相关的题.在一张无向图 $G$ 上,我们可以对它进行一些非常有趣的变换,比如说对偶,又或者说取补.这样的操作往往可以赋予一些传 ...
- 【poj2406】 Power Strings
http://poj.org/problem?id=2406 (题目链接) 题意 给定一个字符串 L,已知这个字符串是由某个字符串 S 重复 R 次而得到的, 求 R 的最大值. Solution 后 ...
- python之旅：常用模块
一.time与datetime模块 在Python中,通常有这几种方式来表示时间 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1号00:00:00开始按照秒计算的偏移量.我们 ...
- Redis学习基础二
回顾:上一基础中已了解 ( 什么是redis .redis 的三大特点.安装,和数据配置) 接下来浅尝Redis的数据类型,时间煮雨...... 一.Redis数据类型 redis支持五中数据类型(s ...
- Docker网络 Weave
当容器分布在多个不同的主机上时,这些容器之间的相互通信变得复杂起来.容器在不同主机之间都使用的是自己的私有IP地址,不同主机的容器之间进行通讯需要将主机的端口映射到容器的端口上,而且IP地址需要使用主 ...
- MetaBase
MetaBase是一个快速创建图表的Web站点,对于频繁上新项目,频繁提供数据报表,但人力不足的情况下,是一个不错的选择. 一. 安装部署 在windows环境下可以使用jar.docker的方式,本 ...
- linux下安装python和pip
注意:不要轻易去卸载原有的python环境,因为有些软件是依赖他的 一:安装前,先将依赖环境一并安装,避免后面重复编译 [root@redhat2 bin]# yum install gcc g++ ...
- 2017 清北济南考前刷题Day 2 afternoon
期望得分:100+60+70=230 实际得分:0+60+0=60 T1 可以证明如果一对括号原本就匹配,那么这对括号在最优解中一定不会被分开 所以用栈记录下没有匹配的括号 最后栈中一定是 一堆右括号 ...
- ML入门理论
http://www.mamicode.com/info-detail-1707941.html
- 深入分析tcp close与shutdown
关闭socket-close 我们知道,tcp是一种支持全双工(full-duplex)通信的的协议,也就是说建立连接的两端可以在同一个时刻发送.接受数据.在需要关闭套接字的时候,我们一般调用: in ...