最近项目准备使用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. 设置debian6源

    debian6真的太老了,个人喜欢追新,因为新版本用起来少很多乱七八糟的问题,不过线上有机器跑的这个版本,SO... 1.修改源文件,注释掉不可用的源,添加可用的源 # vim /etc/apt/so ...

  2. php版本的code review软件

    phabricator, http://www.oschina.net/p/phabricator

  3. android studio 怎么做屏幕适配?

    一.关于布局适配建议1.不要使用绝对布局2.尽量使用match_parent 而不是fill_parent .3.能够使用权重的地方尽量使用权重(android:layout_weight)4.如果是 ...

  4. Eclipse – Java.Lang.OutOfMemoryError: Java Heap Space(转)

    In Eclipse IDE, if your program is consuming a lot of memory (loading big data) like this : List< ...

  5. Python之旅：集合

    Python数据类型 #作用:去重,关系运算, #定义: 知识点回顾 可变类型是不可hash类型 不可变类型是可hash类型 #定义集合: 集合:可以包含多个元素,用逗号分割, 集合的元素遵循三个原则 ...

  6. 图像处理之CSC性能优化(源码)

    1 CSC基本实现 根据前一篇CSC转换的文档了解到,RGB与YUV的变换公式如下: YCbCr(256 级别) 可以从8位 RGB 直接计算,计算公式如下: Y = 0.299 R + 0.587 ...

  7. 时间序列HW

    https://www.cnblogs.com/sylvanas2012/p/4328861.html写得特别好,推荐阅读 Holt-Winters:  三阶指数平滑 Holt-Winters的思想是 ...

  8. day17 包装类、日期类

    包装类 作用:1.丰富了基本数据类型只能存放值的问题,还提供了大量的方法或常量. 2.包装类充当了基本数据类型和引用数据类型转换的桥梁. 应用层面:包装类.String.基本数据类型的互相转换. 1. ...

  9. day15 接口与异常

    接口 是一种独立于类的新机制,它关注的是行为. 接口的意义就体现在——让没有继承关系的类共享这些行为,各有各的具体实现. 设计上:当我们发现一个或多个类的方法相同,又没有继承关系,则考虑接口. 命名: ...

  10. Java并发编程原理与实战三：多线程与多进程的联系以及上下文切换所导致资源浪费问题

    一.进程 考虑一个场景:浏览器,网易云音乐以及notepad++ 三个软件只能顺序执行是怎样一种场景呢?另外,假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I/O操作),而 ...