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. MultiROM for the XIAOMI MI2S/2C/2! (Kexec HardBoot Enabled with Kexec HardBoot Patch!)

    Introduction This is a port of Tassadar's MultiROM, a multi-boot mod for XIAOMI MI2/2S/2C. The main ...

  2. 图像特效——摩尔纹 moir

    %%% Moir %%% 摩尔纹 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algo ...

  3. ubuntu下安装wine

    直接在终端里面输入“sudo apt-get install wine”不要引号,即可安装wine.至于使用它,终端命令就是“wine ....”举个例子,你现在要运行魔兽, 然后你的魔兽的文件夹的位 ...

  4. Nginx + Lua + redis （一）(转)

    使用 Lua 脚本语言操作 Redis. 由于大量的 Lua 代码写在 Nginx 中,会使配置文件显得很繁琐,所以这里使用 content_by_lua_file 来引入 Lua 脚本文件. 要使用 ...

  5. cookie在vs又一次run的时候丢失

    今天写个关于http cookie的demo,发现仅仅要vs又一次执行后cookie的值就会丢失,代码例如以下 protected void Page_Load(object sender, Even ...

  6. UVA - 12001 UVa Panel Discussion

    Description  UVa Panel Discussion  The UVa online judge team is arranging a panel discussion for the ...

  7. Android - 支持不同的设备 - 支持不同的平台版本

    在最新版本的Android为app提供很好的新API时,也应该继续支持旧版本的Android直到大部分设备已经更新了.这里将要介绍如何在使用最新API带来的优点的同时继续支持老版本. Dashboar ...

  8. 【Linux探索之旅】开宗明义+第一部分第一课：什么是Linux？

    内容简介 1.课程大纲 2.第一部分第一课:什么是Linux? 3.第一部分第二课预告:下载Linux,免费的噢!   开宗明义 我们总听到别人说:Linux挺复杂的,是给那些追求逼格的程序员用的.咱 ...

  9. 【j2ee spring】30、巴巴荆楚网-综合hibernate4+spring4(5)分页

    巴巴荆楚网-综合hibernate4+spring4(5)分页 1.图文项目 2.首先我们引入对应的jar包 3.我们配置一下数据库中对应的实体对象 ProductType.java /** * 功能 ...

  10. 如何设置ubuntu自己主动的睡眠时间

    我相信很多在学习linux的过程中.总会遇到,不时系统会冬眠自己主动,因此,即使再次输入password.么重要的内容怕别人看 另外假设你常常使用像Putty这样子的远程登录软件的话,假设你的linu ...