1. 什么是react？
    react的官方网站：https://facebook.github.io/react/
    下图这个就是就是react的标志，非常巧合的是他和我们的github的编辑器Atom非常相似。react是Facebook官方推出的一个javascript的库，现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢？原因就是 Facebook遇到了一些新的问题。Facebook需要解决的问题是构建数据不断变化的大型应用。大型应用是什么意思？数据不断变化带来什么问题呢？
         数据变化可以导致两个非常严重的问题，第一个问题是大量的dom操作;第二个问题就是逻辑会变得非常的复杂。数据要通过页面来进行展示，数据不断变化，就会导致dom不断变化，从而需要进行大量的dom操作，尽管我们已经了jQuery等操作dom的利器，但我们仍然需要编写许多手动的dom操作代码。数据和逻辑密切相关，数据变化的时候，逻辑也会发生变化，相信大家都会有这样的经历，当你去修改一个已有项目的时候，改动一个地方的代码，往往会产生许多意料之外的后果，这就是因为数据和逻辑之间的关系非常复杂，牵一发而动全身，所以数据变化会导致这样两种后果。
       那react如何来解决这两个问题呢？对于dom操作，react的操作是采用自动dom操作，在react中，你不需要手动进行dom操作，只需要告诉react要展示什么内容，react会自动来操作dom。针对第二个问题，react的方案吧状态和内容显示的对应起来，这样我们就可以一目了然的知道，状态变化，内容会如何变化，从而理清程序的逻辑。

  2. react有两个特点：第一个是简单，第二个是声明式。简单有两层意思，第一层意思是react学习简单，上手容易，第二层意思是是react写出的代码非常简单，容易阅读。声明式就是我们前面说的自动dom操作，你只需要声明给react显示什么内容，至于如何把这些内容显示到页面上，是由react来帮你完成的。
  3. 在react中，核心是组件，组件的设计目的是提高代码的复用率，降低测试难度和代码复杂度。
           组件提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。我们可以将通用的逻辑和数据封装起来，从而能提高代码的复用率。
           降低测试难度：组件高内聚，低耦合，很同意对单个组件进行测试，通过模拟他的输入，或者输出，来测试组件的功能是否完善。
           降低代码复杂度：直观的语法可以极大地提高可读性，降低代码的复杂度和维护难度。
  4. react的发展过程
    2013年6月，Facebook官方发布react--------》2013年9月，react热度上涨，越来越多的人开始关注react-------》2015年3月，React Native发布（就是用react来编写跨平台的移动端应用），简单说就是我们可以用react来编写iOS，Android和Windows phone的应用，在目前的前端领域，代码模块化和用js来编写跨平台的移动端应用，是两个主要的探索方向，在用js来编写跨平台的移动端应用中，已经有了很多的方案，但是这些方案或多或少都有一些缺陷.
  5. react的现状
    react是发布在github上面的开源项目。
    国外使用的公司：Facebook，Flipboard，Airbnb，BBC，Github，Instagram,Reddit,Uber,WhatApp,yahoo
    国内使用React的公司：支付宝，淘宝，大搜车，Teambition,豆瓣，豌豆荚
  6. 这个教程使用的是0.13.2,我们是学习，就不下载了，直接使用cdn服务器：http://www.bootcdn.cn/
     我们需要两个文件
       react.js://cdn.bootcss.com/react/0.13.2/react.js
       JSXTransformer.js://cdn.bootcss.com/react/0.13.2/JSXTransformer.js
    使用的时候，记得在前面加上http://
    可能这么说有点迷瞪，接着看下面的就懂了。
  7. react的程序结构
    react程序本质上就是一个html页面，html页面中可以编写Js代码和css代码，当然我们也可以将js和css单独存放，最后在引入到html文件中。
    这里需要注意的是，react程序非常特别的一点，就是使用了jsx，我们后面会详细说明jsx的用法，这里只要知道jsx是写在js里面的就行，下面我们放代码 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>hello world</title>
    
</head>
    
<body>
    
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
    
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    
    <script type="text/jsx">
    
       var HelloWorld=React.createClass({
    
           render:function(){
    
              return <p>Hello,world</p>
    
           }
    
       });
    
       React.render(<HelloWorld></HelloWorld>,document.body);
    
    </script>
    
</body>
    
</html>

    注意我们的第三个script的type类型为text/jsx,注意HelloWorld的首字母大写，我们后面会说。

React学习笔记-1-什么是react，react环境搭建以及第一个react实例的更多相关文章

  1. Python学习笔记 （1）Hello World(环境搭建+输出Hello World!)

    随想 高考发挥失常.科三遇火车发挥失常,各种不顺……突然发现假期都快没了,才想起高考前想象的这个假期要做的一堆事,现在来多完成一件吧. 这几篇博客仅只是我的学习笔记,凑合看吧.我这个python小白看 ...

  2. 《精通并发与Netty》学习笔记（01 - netty介绍及环境搭建）

    一.Netty介绍     Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序.     ...

  3. JavaSE 学习笔记01丨开发前言与环境搭建、基础语法

    本蒟蒻学习过C/C++的语法,故在学习Java的过程中,会关注于C++与Java的区别.开发前言部分,看了苏星河教程中的操作步骤.而后,主要阅读了<Java核心技术 卷1 基础知识>(第8 ...

  4. 【Spring学习笔记-1】Myeclipse下Spring环境搭建

    *.hl_mark_KMSmartTagPinkImg{background-color:#ffaaff;}*.hl_mark_KMSmartTagBlueImg{background-color:# ...

  5. maven -- 学习笔记（一）之maven环境搭建

    首先先感谢博主的分享http://www.cnblogs.com/yjmyzz/p/3495762.html 基本概念: Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建 ...

  6. Android学习笔记（一）——安卓开发环境搭建

    安装教程以及资源(2015.11.8最新版):链接:http://pan.baidu.com/s/1kTnOsMr 密码:0ogf

  7. .NET学习笔记（2） — IIS服务器环境搭建

    目录 一:开启Windows系统自带的IIS服务器方法 二:备注 三:常见问题     一:开启Windows系统自带的IIS服务器方法   第一步:安装IIS,控制面板->程序和功能-> ...

  8. 【JAVAWEB学习笔记】网上商城实战：环境搭建和完成用户模块

    网上商城实战 今日任务 完成用户模块的功能 1.1      网上商城的实战: 1.1.1    演示网上商城的功能: 1.1.2    制作目的: 灵活运用所学知识完成商城实战. 1.1.3    ...

  9. Go学习笔记：Win7+LiteIDE+Go+Beego 环境搭建

    安装过程比较简单 1.安装go语言环境: 2.安装git: 3.git bash      安装beego,输入“go get github.com/astaxie/beego”,等待一会儿,在D盘的 ...

随机推荐

  1. poj-3264-Balanced Lineup

    poj   3264  Balanced Lineup link: http://poj.org/problem?id=3264 Balanced Lineup Time Limit: 5000MS ...

  2. Prince2七大原则（4）

    我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第四个原则:按阶段管理. 阶段管理其实是给高层提供了项目生命周期中相对应的控 ...

  3. C#中中文编码的问题（StreamWriter和StreamReader默认编码）

    在使用StreamWriter和StreamReader时产生了这样的疑问,在不指定的情况下,他们使用什么编码方式? 查看MSDN,请看下图: 注意红色区域  这让我以为构造函数参数不同时使用不一样的 ...

  4. Python学习 过程中零散知识点的总结

    自学资料比较零碎,本文是对在Python学习过程中积累的零零散散的知识点的总结 ============================================================ ...

  5. BZOJ 3223: Tyvj 1729 文艺平衡树

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3628  Solved: 2052[Submit][Sta ...

  6. 【bzoj4517】 Sdoi2016—排列计数

    http://www.lydsy.com/JudgeOnline/problem.php?id=4517 (题目链接) 题意 求n个数中正好m个数位置不变的排列数. Solution $${错排公式: ...

  7. gulp删除文件和文件夹

    使用模块:del,npm install --save-dev gulp del var gulp = require('gulp'); var del = require('del'); gulp. ...

  8. Spring-----定时任务Quartz配置

    第一种,作业类继承自特定的基类:org.springframework.scheduling.quartz.QuartzJobBean. 第一步:定义作业类 import org.quartz.Job ...

  9. Apache与Tomcat服务器

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.在Apache基金会里面Apache S ...

  10. 错误 Metadata file 'C:\Common\bin\Debug\Common.dll' could not be found

    一个通用方法de类库/总是报这个错误/很明显就是没有成功生成程序集... 但是就是找不到哪里的错误!!!! 如果是代码写错的话,可能会直接提示在哪个文件中哪行代码写错了,然后dll生成不了,但是这个错 ...