React入门到精通(一)

原创 2017年01月03日 13:54:46

这里写图片描述
React+Node的开发栈可以服务器端渲染,React使用的jsx语言可以支持在js中写HTML。
学习React也是这段时间的目标,所以打算写这么一个系列,供自己沉淀每天学的东西,很多都是网上的教程方法,自己组织一下语言和思路。
Hello-React
GitHub上开源项目:https://github.com/facebook/react
1、什么是React?

React is a JavaScript library for building user interfaces.

React是一个JavaScript库,用来构建用户界面,为数据渲染视图

特点:
声明式设计
高效:React虚拟DOM,最大限度的减少与DOM的交互
灵活:方便与其它库搭配起来
组件:构建组件
JSX:js语法的扩展,允许在js中写HTML
状态:内容与状态对应起来

copy一下阮一峰大神的React入门实例中的原话来介绍以下React:

React 起源于 Facebook的内部项目,由于不满意市面上的JavaScript MVC 框架,决定自己开发一套来架设Instaram网站,然后在2013年5月开源了。

由于React的设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单,可能认为将是Web开发的主流工具。

试想一下如果用Web App的方式去写Native App。那将会颠覆整个互联网行业
2、核心思想

分装组件、各个组件维护自己的状态和UI,当状态改变,自动更新组件,适合功能复杂的应用:组件驱动的开发。
3、核心概念

组件
JSX(用jsx语法取代HTML,在js中描述UI)jsx浏览器不识别,需要转换为js代码(babel将jsx转换为js)

虚拟DOM

diff算法:当更新组件的时候,会通过diff算法寻找到需要更新的DOM 节点,虚拟DOM是存在内存的js数据结构 性能比原生DOM好
数据流:单向数据流(状态与内容)

4、搭建React开发环境

引入三个js文件

react.js(React的核心库)
react-dom.js(提供与DOM相关的功能)
browser.js(将JSX语法转换为JavaScript语法)

5、JSX

基本语法:

遇到HTML标签,使用HTML来解析

遇到代码块({}),使用js解析
6、组件
6.1、创建组件

var HelloMsg = React.createClass();
6.2、使用组件

注意事项:

1、组件的命名:首字母必须大写。

2、在渲染组件,返回要求只有一个标签,但是这个标签可以包含多个子元素。
6.3、复合组件

将其他的组件整合在一起 创建一个新的组件

例子:使用复合组件实现登录窗口
7、ref

如果从组件获得真实的DOM的节点,ref属性
//通过指定ref=’ref名字’–>this.refs.ref名字
function(){ this.refs.inputTxt–>拿到真实的DOM节点 }

版权声明:本文为博主原创文章,未经博主允许不得转载。

React入门到精通(三)——定义组件和css样式

所谓组件:即分装起来的具有独立功能的UI部件,React希望我们能够将UI组件化,一个功能一个组件,最后通过组合或者嵌套的方式组成一个大的组件,完成UI搭建。 组件 ...

前端框架Vue(2)——Vue-Router 路由跳转

1、最简单:html+js全在一个文件中 动态路由匹配

前端框架Vue(1)——vue(脚手架) 推荐开发环境(转)

首先我认为你已经安装并且会使用node.js 和 npm1、安装淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org2...

[ReactNative入门到精通]React Native 第一个程序 Hello Word

人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的。 React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有...
  • yzzst
  • yzzst
  • 2015年10月12日 01:35
  • 5027

React+Native入门与实战pdf

  • 2017年11月17日 17:48
  • 68.18MB
  • 下载

【React Native从入门到精通】React Native的组件构成及生命周期分析

刚开始接触React Native开发的程序猿可能会拿着网上的例子和文档一头雾水,毕竟不是像C语言有个main、Android有个OnCreate,iOS有个ViewDidLoad那样,加上JavaS...
  • ourpush
  • ourpush
  • 2016年09月02日 11:11
  • 144

react-demo入门教程

  • 2017年02月14日 18:38
  • 1.04MB
  • 下载

React Native入门与实战

  • 2017年03月23日 15:34
  • 76.43MB
  • 下载

【React Native】开源一个自己入门学习的小项目

本篇是React Native开源小项目,目前完成了初始版本,至于后续会不会增加其他知识点,待定吧,数据来自gankio,页面跳转使用的react-navigation,一边学习一边写,下面是总体的效...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React入门到精通(一)
举报原因:
原因补充:

(最多只允许输入30个字)