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. Android 高仿微信即时聊天 百度云为基础的推

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天最终有幸利用百 ...

  2. Cocos2d-x学习笔记（19）（TestCpp源代码分析-3）

    本章主要介绍testBasic.h/cpp,这两个文件主要用于返回主场景界面. //testBasic.h #ifndef _TEST_BASIC_H_ #define _TEST_BASIC_H_ ...

  3. 得知Android小遴选程序第七头（他们定义对话框、Gallery、ImageSwitcher）

    效果如下面的:            一共一个activity和两个xml. ******当我们须要使用的组件不在setContentView()设置的布局文件里,那我们就须要使用inflate()方 ...

  4. unity3d简单的相机跟随及视野旋转缩放

    1.实现相机跟随主角运动 一种简单的方法是把Camera直接拖到Player下面作为Player的子物体,另一种方法是取得Camera与Player的偏移向量,并据此设置Camera位置,便能实现简单 ...

  5. sql pivot、unpivot和partition by用法

    原文:sql pivot.unpivot和partition by用法 演示脚本 from sys.sysobjects where name = 'Student' AND type = 'U') ...

  6. Java中Integer类的方法

    java.lang 类 Integer java.lang.Object java.lang.Number java.lang.Integer 全部已实现的接口: Serializable, Comp ...

  7. Android利用网络编程HttpClient批量上传（一个）

    请尊重他人的劳动成果.转载请注明出处:Android网络编程之使用HttpClient批量上传文件 我曾在<Android网络编程之使用HTTP訪问网络资源>一文中介绍过HttpCient ...

  8. zoj 1738 - Lagrange&#39;s Four-Square Theorem

    称号:四方形定理.输出可以表示为一个数目不超过四个平方和表示的数. 分析:dp,完全背包.背包分割整数.可用一维分数计算,它也可以被写为一个二维团结. 状态:设f(i,j,k)为前i个数字,取j个数字 ...

  9. HDU 4067 Random Maze

    意甲冠军: 一个"随机图"它被定义为具有以下性质如: 一个入口和一个出口 有向图 对于入口  出度比入度大1 对于出口  入度比出度大1 对于其它点  入度等于出度 现给出一幅有向 ...

  10. JVM Input Arguments Lookup (JMX)(转)

    JVM Input Arguments Lookup (JMX) Maps JVM input arguments -- but not main arguments -- using JMX to ...