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. REDGATE SQLPROMPT 6.0新功能

    原文:REDGATE SQLPROMPT 6.0新功能 REDGATE SQLPROMPT 6.0新功能 下载地址:http://files.cnblogs.com/lyhabc/SQLPrompt6 ...

  2. Java Tread多线程（0）一个简单的多线程实例

    作者 : 卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多 ...

  3. 新浪微博id的62进制转换

    某条微博链接 某条微博的链接如下,同样省略了后面的无关参数 http://weibo.com/2803301701/CeaOU15IT CeaOU15IT为这条微博的mid,与之相对应的还有一个id, ...

  4. oracle 12c 三学习 pdb 可插拔测试

    DECLARE l_result BOOLEAN; BEGIN l_result := DBMS_PDB.check_plug_compatibility( pdb_descr_file => ...

  5. Codeforces Round #256 (Div. 2) D. Multiplication Table 二分法

     D. Multiplication Table time limit per test 1 second memory limit per test 256 megabytes input st ...

  6. [LeetCode61]Rotate List

    题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...

  7. 【C语言探索之旅】 第二部分第九课： 实战"悬挂小人"游戏 答案

    内容简介 1.课程大纲 2.第二部分第九课: 实战"悬挂小人"游戏 答案 3.第二部分第十课预告: 安全的文本输入 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题, ...

  8. 【转】Directx11 HelloWorld之HLSL的Effect框架的使用

    最近尝试用了下Directx下的Effect框架,作为一初学者初学者,说下为什么我们要使用Effect框架及其好处吧. 首先Effect最大好处的就是简单,使得编写Shader绘制的程序工作量大大下降 ...

  9. SQL_substr功能测试

    原创作品.从 "深蓝blog" 博客,欢迎转载,请务必注明转载的来源.权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/articl ...

  10. 对SA权限的再突破 (对付xplog70.dll被删)转载

    原文:对SA权限的再突破 (对付xplog70.dll被删)转载 对SA权限的再突破 (对付xplog70.dll被删)转载 转载自:http://www.bitscn.com/plus/view.p ...