最近项目准备使用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. Hplsql报错：...HiveSQLExpection:Error while compiling statement:No privilege 'Select' found for inputs {.....}

    实践hplsql时,遇到的问题总结一下,若有不对的地方,欢迎交流. 一.Hplsql简介 hplsql的介绍详见:http://lxw1234.com/archives/2015/09/492.htm ...

  2. nginx 配置 phpmyadmin

    server { listen 8092; server_name *.xxx.com; root /home/users/cuijian04/odp302/app/phpmyadmin; set $ ...

  3. Android Layout_weight 属性

    Android 对Layout_weight属性完全解析以及使用ListView来实现表格http://blog.csdn.net/xiaanming/article/details/13630837 ...

  4. codeforces div1 & div2 参与人员分数统计

    Analysis helps to see the nature of things.

  5. web项目中日志管理工具的使用

    在web项目中,很多时候会用到日志管理工具,常见的日志管理用具有:JDK logging(配置文件:logging.properties) 和log4j(配置文件:log4j.properties) ...

  6. 【题解】Arpa's letter-marked tree and Mehrdad's Dokhtar-kosh paths Codeforces 741D DSU on Tree

    Prelude 很好的模板题. 传送到Codeforces:(*￣3￣)╭ Solution 首先要会DSU on Tree,不会的看这里:(❤ ω ❤). 众所周知DSU on Tree是可以用来处 ...

  7. Selenium geckodriver异常

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  8. 秋色园QBlog技术原理解析：性能优化篇：缓存总有失效时，构造持续的缓存方案(十四)

    转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...

  9. 解决spring中不同配置文件中存在name或者id相同的bean可能引起的问题

    小总结: 如果启用组件扫描,bean名称不同时,Spring将尝试创建一个bean,即使该类的bean已经在spring-config.xml中定义了. 但是,如果在spring配置文件中定义的bea ...

  10. Spring MVC原理介绍

    1.Spring Web MVC是什么 spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解 ...