最近项目准备使用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 学习一 运行的更多相关文章

  1. React学习系列一

    系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...

  2. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  3. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  4. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  5. React学习笔记（一）- 环境搭建

    最近在学习react相关的知识,刚刚起步,一路遇坑不断.自己做个笔记,方便日后总结,也供相同趣味的小伙伴一起交流探讨. 学习时主要参考官网的教程:https://facebook.github.io/ ...

  6. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  7. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  8. React学习笔记一

    我是通过script src的方式引入的react的相关文件,本次学习顺序按照<React快速上手开发>一书的顺序学习的, 本篇博客笔记地址:http://note.youdao.com/ ...

  9. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

随机推荐

  1. BZOJ2436 [Noi2011]Noi嘉年华 【dp】

    题目链接 BZOJ2436 题解 看这\(O(n^3)\)的数据范围,可以想到区间\(dp\) 发现同一个会场的活动可以重叠,所以暴力求出\(num[l][r]\)表示离散化后\([l,r]\)的完整 ...

  2. Linux内核分析第八周——进程的切换和系统的一般执行过程

    Linux内核分析第八周--进程的切换和系统的一般执行过程 李雪琦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/cou ...

  3. java多线程 --ConcurrentLinkedQueue 非阻塞 线程安全队列

    ConcurrentLinkedQueue是一个基于链接节点的无界线程安全队列,它采用先进先出的规则对节点进行排序,当我们添加一个元素的时候,它会添加到队列的尾部:当我们获取一个元素时,它会返回队列头 ...

  4. 解题：TJOI 2015 组合数学

    题面 通过这个题理解了一下反链的概念,更新在图论知识点里了 每个点向右和下连边可以建出一张图,这个题事实上是让我们求图的最小链覆盖.Dilworth定理告诉我们,最小链覆盖等于最长反链(反链:DAG中 ...

  5. mysql 统计 group by 之后的 group 的个数

    如果将 count(*) 和 group by 一起使用,count(*) 统计的将会是每个 group 里面的行数,而不是 group 的个数. 如果你想统计 group 的个数,需要将 group ...

  6. Docker图形界面管理之DockerUI

    DockerUI DockerrUI是一个基于Docker API提供图形化页面简单的容器管理系统,支持容器管理.镜像管理. 1.1 下载镜像 docker pull abh1nav/dockerui ...

  7. 彻底搞懂 SQLAlchemy中的 backref

    教程源码截取: class User(Base): __tablename__ = 'user' id = Column(Integer, primary_key=True) name = Colum ...

  8. [大数据]-hadoop2.8和spark2.1完全分布式搭建

    一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...

  9. P1564 膜拜

    P1564 膜拜 题目描述 神牛有很多-当然-每个同学都有自己衷心膜拜的神牛. 某学校有两位神牛,神牛甲和神牛乙.新入学的N 位同学们早已耳闻他们的神话. 所以,已经衷心地膜拜其中一位了.现在,老师要 ...

  10. Java基础-IO流对象之数据流（DataOutputStream与DataInputStream）

    Java基础-IO流对象之数据流(DataOutputStream与DataInputStream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据流特点 操作基本数据类型 ...