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应用的最小单位. 元素是普通的对象. 元素是构成 ...
随机推荐
- 【Cf Edu #47 F】Dominant Indices（长链剖分）
要求每个点子树中节点最多的层数,一个通常的思路是树上启发式合并,对于每一个点,保留它的重儿子的贡献,暴力扫轻儿子将他们的贡献合并到重儿子里来. 参考重链剖分,由于一个点向上最多只有$log$条轻边,故 ...
- POJ.1330 Nearest Common Ancestors (LCA 倍增)
POJ.1330 Nearest Common Ancestors (LCA 倍增) 题意分析 给出一棵树,树上有n个点(n-1)条边,n-1个父子的边的关系a-b.接下来给出xy,求出xy的lca节 ...
- CJOJ 2482 【POI2000】促销活动（STL优先队列，大根堆，小根堆）
CJOJ 2482 [POI2000]促销活动(STL优先队列,大根堆,小根堆) Description 促销活动遵守以下规则: 一个消费者 -- 想参加促销活动的消费者,在账单下记下他自己所付的费用 ...
- CSS3 grayscale滤镜+SVG使图片变黑白实例页面
CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...
- 【python】python安装lxml报错【2】
cl : Command line warning D9025 : overriding '/W3' with '/w' lxml.etree.c c:\docume~\admini~.chi\loc ...
- T48566 【zzy】yyy点餐
T48566 [zzy]yyy点餐 题目描述 yyy去麦肯士吃垃圾食品. 麦肯士有n种单点餐品(汉堡薯条鸡翅之类的).每次选择一种或者以上的餐点,且每种餐点不多于一个的话,可以认为是购买套餐.购买一个 ...
- 动态规划：树形DP-选课（树形背包）
学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修了这M门课并考核通过就能获得相应的学分.在选修课程中,有些课程可以直接选修,有些课程需要一定的基础知识,必须在选 ...
- 2016/1/2 Python中的多线程(1)：线程初探
---恢复内容开始--- 新年第一篇,继续Python. 先来简单介绍线程和进程. 计算机刚开始发展的时候,程序都是从头到尾独占式地使用所有的内存和硬件资源,每个计算机只能同时跑一个程序.后来引进了一 ...
- [hadoop]hadoop2.6完全分布式环境搭建
在经过几天的环境搭建,终于搭建成功,其中对于hadoop的具体设置倒是没有碰到很多问题,反而在hadoop各节点之间的通信遇到了问题,而且还反复了很多遍,光虚拟机就重新安装了4.5次,但是当明白了问题 ...
- 20155325 2016-2017-2 《Java程序设计》第5周学习总结
教材学习内容总结 Java中把正常流程放try块中,错误(异常)处理放catch块中. Error及其子类写程序不用处理,最多留个日志.因为这种错误Java应用程序本身是无力回复的. 在使用throw ...