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节点 }

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

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

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

React Native 高质量学习资料汇总

去年我整理过一份《平安科技移动开发二队技术周报(特别版のReact Native专题)》,作为 React Native 入门的学习资料,半年多过去了,React Native 发布也已经一年多了,随...
  • u012992171
  • u012992171
  • 2016年07月11日 11:14
  • 2735

react-native 入门学习指南

本篇汇集了React从入门到精通的各种技术,是你学习RN的指南 。本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!同时...
  • snake_son
  • snake_son
  • 2017年01月10日 17:22
  • 746

[ReactNative入门到精通]React Native概述

2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。什么是R...
  • yzzst
  • yzzst
  • 2015年10月11日 01:15
  • 11365

React初学者教程(说明文档)--中文翻译

译者序言:笔者作为一个React爱好者(四级未过),精心审译,难免有错,望海纳!React初学者教程【react-0.13.0】 下载文章摘要:本文只是对于初学者关于React的简单讲解,如需更深学习...
  • xi_2130
  • xi_2130
  • 2016年01月23日 18:55
  • 1925

React中文入门教程 pdf 下载

  • 2017年03月19日 10:52
  • 20.59MB
  • 下载

React入门到精通(一)

React+Node的开发栈可以服务器端渲染,React使用的jsx语言可以支持在js中写HTML。 学习React也是这段时间的目标,所以打算写这么一个系列,供自己沉淀每天学的东西,很多都是网上的...
  • DOCALLEN
  • DOCALLEN
  • 2017年01月03日 13:54
  • 795

React从入门到精通系列之(14)refs和DOM元素

https://segmentfault.com/u/zhangyatao/articles在典型的React数据流中,props是父组件与其子组件交互的唯一方式。 要修改子组件,需要使用一个新的pr...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月16日 22:12
  • 231

Intellij IDEA 从入门到精通(一)

开心一笑【一位大学教授对学生讲道:“古代‘吕’是接吻的意思,口对口,很形象;”其中一学生问道:“如果‘吕’是接吻的意思,那么‘品’宇又怎么解释,三个人在一起接吻吗?”教授正待发怒,又一个同学起说:“我...
  • huangwenyi1010
  • huangwenyi1010
  • 2017年09月16日 08:50
  • 1386

ActiveMQ从入门到精通(三)

这是ActiveMQ系列的最后一篇文章,主要是关于ActiveMQ集群,这里采用的方式是:Zookeeper+LevelDB+ActiveMQ。前面2篇博客地址如下:《ActiveMQ从入门到精通(一...
  • jek123456
  • jek123456
  • 2017年05月19日 09:36
  • 643
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React入门到精通(一)
举报原因:
原因补充:

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