最近项目准备使用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. Mininet 系列实验（七）

    实验内容 本实验在基于 Mininet 脚本的不同拓扑环境下使用 OpenDaylight 控制交换机行为.任务一:一台交换机两台主机,从1端口进入的数据流转发到 2 端口,从 2 端口进入的数据流转 ...

  2. NetApp存储方案及巡检命令

    一.MCC概述 Clustered Metro Cluster(简称MCC)是Netapp Data Ontap提供的存储双活解决方案,当初的方案是把1个FAS/ V系列双控在数据中心之间拉远形成异地 ...

  3. 【bzoj4520】 Cqoi2016—K远点对

    http://www.lydsy.com/JudgeOnline/problem.php?id=4520 (题目链接) 题意 求平面内第K远点对的距离. Solution 左转题解:jump 细节 刚 ...

  4. Linux及安全实践四——ELF文件格式分析

    Linux及安全实践四——ELF文件格式分析 一.ELF文件格式概述 1. ELF:是一种对象文件的格式,用于定义不同类型的对象文件中都放了什么东西.以及都以什么样的格式去放这些东西. 二.分析一个E ...

  5. python的字符串截取

    str = ‘’ :] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 :] #截取第七个字符到结尾 ] #截取从头开始到倒数第三个字符之前 ] #截取第三个字符 ] # ...

  6. Linux6.x修改出eth0网卡的解决方法

    1. 编辑70-persistent-net配置文件: # -persistent-net.rules 如果没有就新建一个,添加如下内容: # PCI device 0x14e4:0x165f (tg ...

  7. Java写的数据库连接池

    原文地址: http://lgscofield.iteye.com/blog/1820521 import java.sql.*; import java.util.Enumeration; impo ...

  8. zookeeper图形工具——zkui

    虽然zookeeper安装包提供了客户端工具zkcli,但是命令特别少 ,每次想看看里面的节点信息特别费劲. 幸好有图形工具——zkui,https://github.com/echoma/zkui, ...

  9. [转载]查询json数据结构的8种方式

    http://wangxinghaoaccp.blog.163.com/blog/static/1158102362012111812255980/ 你有没有对“在复杂的JSON数据结构中查找匹配内容 ...

  10. soj1767.传纸条

    这道题目想了一会儿觉得不知道如何下手,上网看了下资料,原来这道是一道非常经典的题目. 设 f [ k ][ i ][ j ] 表示第 k 步,第 1 条路径走到第 i 行,第 2 条路径走到第 j 行 ...