- 什么是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的方案吧状态和内容显示的对应起来,这样我们就可以一目了然的知道,状态变化,内容会如何变化,从而理清程序的逻辑。 - react有两个特点:第一个是简单,第二个是声明式。简单有两层意思,第一层意思是react学习简单,上手容易,第二层意思是是react写出的代码非常简单,容易阅读。声明式就是我们前面说的自动dom操作,你只需要声明给react显示什么内容,至于如何把这些内容显示到页面上,是由react来帮你完成的。
- 在react中,核心是组件,组件的设计目的是提高代码的复用率,降低测试难度和代码复杂度。
组件提高代码复用率:组件将数据和逻辑封装,类似面向对象中的类。我们可以将通用的逻辑和数据封装起来,从而能提高代码的复用率。
降低测试难度:组件高内聚,低耦合,很同意对单个组件进行测试,通过模拟他的输入,或者输出,来测试组件的功能是否完善。
降低代码复杂度:直观的语法可以极大地提高可读性,降低代码的复杂度和维护难度。 - react的发展过程
2013年6月,Facebook官方发布react--------》2013年9月,react热度上涨,越来越多的人开始关注react-------》2015年3月,React Native发布(就是用react来编写跨平台的移动端应用),简单说就是我们可以用react来编写iOS,Android和Windows phone的应用,在目前的前端领域,代码模块化和用js来编写跨平台的移动端应用,是两个主要的探索方向,在用js来编写跨平台的移动端应用中,已经有了很多的方案,但是这些方案或多或少都有一些缺陷. - react的现状
react是发布在github上面的开源项目。
国外使用的公司:Facebook,Flipboard,Airbnb,BBC,Github,Instagram,Reddit,Uber,WhatApp,yahoo
国内使用React的公司:支付宝,淘宝,大搜车,Teambition,豆瓣,豌豆荚 - 这个教程使用的是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://
可能这么说有点迷瞪,接着看下面的就懂了。 - 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的首字母大写,我们后面会说。
时间: 2024-08-25 00:31:45