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应用的最小单位. 元素是普通的对象. 元素是构成 ...
随机推荐
- phpredis pipeline
通过pipeline方式将client端命令一起发出,redis server会处理完多条命令后,将结果一起打包返回client,从而节省大量的网络延迟开销.
- MYSQL指定用户访问指定数据库
1.使用navicat 1)首先使用root用户新建连接 2)新建mysql用户 3)点击权限,选择添加权限,出现MySQL中已存在的数据库列表,选择你要为该新建用户开放的数据库,此处选择“maiba ...
- 从function的定义看JavaScript的预加载
在JavaScript中定义一个函数,有两种写法: function ftn(){} // 第一种 var ftn = function(){} // 第二种 有人说,这两种写法是完全等价的.但是在解 ...
- 计数排序与桶排序(bucket sort)
Bucket Sort is a sorting method that subdivides the given data into various buckets depending on cer ...
- 【Asp.net入门11】第一个ASP.NET 应用程序-创建摘要视图
目前已经完成了应用程序的基本结构单元,受邀者也能够做出回复.这一节将添加一个支持组件,以显示收到的回复摘要,以便用户的朋友了解谁会参加晚会,并做出适当安排.在Solution Explorer中右键单 ...
- Pymongo--极简使用指南
1.简介及安装 pymongo是Python中用来操作MongoDB的一个库.而MongoDB是一个基于分布式文件存储的数据库,旨在为WEB应用提供可扩展的高性能数据存储解决方案.其文件存储格式类似于 ...
- (转)Python中的generator详解
本文转自:http://www.cnblogs.com/xybaby/p/6322376.html 作者:xybaby 注:本文在原文基础上做了一点点修改,仅仅作为个人理解与记忆,建议直接查看原文. ...
- unicode utf8 学习记录
显示器- unicode -系统- utf8 -存储设备 Unicode是一套复杂的字符编码标准,简单来说就是将人类使用的每个所谓字符与一个非负整数对应,并且保证不同的字符对应的整数一定不同.UTF- ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- np.repeat函数
np.repeat用法 觉得有用的话,欢迎一起讨论相互学习~Follow Me np.repeat用于将numpy数组重复 一维数组重复三次 import numpy as np # 随机生成[0,5 ...