React 是什么？

网络上的解释很多。。。我这里把他定义为 通过javascript 的形式组件化 html的框架。。。

React 仅仅是 VIEW 层。

React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染。这就是 React 全部的输出——HTML。你把 HTML / JavaScript 合到一起，被称为“组件”，允许把它们自己内部的状态存到内存中（比如在一个选项卡中哪个被选中），不过最后你只是吐出 HTML。

React 的安装？

首先是下载 reactjs的文件包。。http://www.reactjs.cn/react/downloads.html 下载react 使用需要的文件包。。

下载完成后 我们打开压缩包里面的bulid文件夹

JSXTransformer.js这个文件主要用来解析 react 自定义的jsx 语法解析器。

react.js和react.min.js 这2个文件就是react 的核心文件。其中一个是压缩过的。

react-with-addons.js 和 react-with-addons.min.js 这2个文件里存放了一些react 的插件。

第一个React 的示例

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>

    <title>holle,world</title>

    <link rel="stylesheet" href="../shared/css/base.css" />

  </head>

  <body>

    <div id="container">

    </div>

    <script src="../../build/react.js"></script>

    <script src="../../build/JSXTransformer.js"></script>

    <script type="text/jsx">

      var HolleWorld = React.createClass({

        render: function() {

          return <p>holle  world</p>;

        }

      });

        React.render(

          <HolleWorld  />,

          container

        );

    </script>

  </body>

</html>

总结

总体来说 起步还是挺顺利的。。我们下节再见吧

react.js 从零开始（一）的更多相关文章

  1. react.js 从零开始（四）React 属性和状态详解

    属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? ...

  2. react.js 从零开始（三）JSX 语法及特点介绍

    什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...

  3. react.js 从零开始（七）React （虚拟）DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  4. react.js 从零开始（六）Reconciliation

    Reconciliation   React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样.这就极大地简化了应用的编写,但是同时使 React 易于驾驭,也是一 ...

  5. react.js 从零开始（五）React 中事件的用法

    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...

  6. react.js 从零开始（二）组件的生命周期

    什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...

  7. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  8. 28个漂亮的React.js后台管理模板

    React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...

  9. 13个精选的React JS框架

    如果你正在使用 React.js 或 React Native 创建用户界面,可以试一试本文推荐的这些框架. React.js 和 React Native 是流行的用户界面(UI)开发平台,且都是开 ...

随机推荐

  1. Effective C++：规定20： 宁pass-by-reference-to-const更换pass-by-value

    (一) 假设传递参数当函数被调用pass-by-value,然后函数的参数是基于实际参数的副本最初值,调用,也得到该函数返回的结束值复印件. 请看下面的代码: class Person { publi ...

  2. ios01

    http://code4app.com/ 0.全部Swift http://numbbbbb.gitbooks.io/-the-swift-programming-language-/content/ ...

  3. Please read “Security” section of the manual to find out how to run mysqld as root!错误解决（转）

    2016-03-12T15:40:45.717762Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please ...

  4. POJ 2586：Y2K Accounting Bug（贪心）

    Y2K Accounting Bug Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10024 Accepted: 4990 D ...

  5. Duanxx的STM32学习： 启动模式，BOOT0和BOOT1具体解释

    在画STM32的电路图的时候,关于STM32的启动方式纠结了一下,现有的參考设计都是在STM32的启动选择引脚BOOT0和BOOT1上使用了跳帽,用以人工选择STM32的启动方式,可是在实际应用中这样 ...

  6. 新手学Unity3d的一些网站及相应学习路线

    一.unity3d有什么优势 如果您对开发游戏感兴趣,而又没有决定选择哪一个游戏引擎,别犹豫了 unity3d是一个很好的选择! 就我来看unity3d优势主要有以下几方面:首先部署简单,自带了一个I ...

  7. OCP-1Z0-051-题目解析-第14题

    14. Using the CUSTOMERS table,  you need to generate a report that shows 50% of each credit        a ...

  8. NYOJ 118 路方案(第二小的跨越)

    修路方案 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军率领着很多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N.因为交通不太便利,南将军准备修 ...

  9. Android尽量避免使用开发jpg图片

    因为jpgeasy失真,因此,Android尽量避免使用开发.jpg图片,相反,使用.png图片,它使用LZ77衍生无损数据压缩算法. 事实上在这一点上,Google他已经暗示我们: 发现了没有,在r ...

  10. 鸟哥Linux私房菜知识汇总8至9章

    一看最近<鸟哥Linux私房菜>. 这是一个基本的书,万丈高楼平地起,学. 这是我整理的一些知识点.尽管非常基础. 希望和大家共同交流. 第8章 Linux磁盘与文件系统管理 一.Linu ...