React开发教程笔记
文章平均质量分 65
React是有facebook开发并维护,短短时间内,几乎颠覆了前端开发的技术架构,组件化的开发理念,越来越边的普及,作为一个前端开发者,是有必要了解React的相关知识!
天外野草
现任职移动研发部Team Leader, 高级咨询顾问、开发架构师,移动开发布道师, CSDN专家博主,CSDN讲师, 主修数学专业,曾获全国大学生数学建模大赛、东北三省大学生数据建模大赛一等奖,精通移动开发,熟悉 Angular、React、SAP FIORI等各种HTML5主流框架,对大数据开发,AI技术领域有一定的经验心得,同时拥有丰富的课程录制以及授课经验,也拥有多个大型企业级跨平台项目开发经验,乐观向上,乐于求知,不限领域!
展开
-
针对于WebStorm工具开发React工程详细配置
前言WebStorm作为目前最流流行的前端IDE, 无论从运行速度还是开发的便捷性,无形之中提高了工作效率,目前比较火爆的React也越来越被众多开发人员所采纳,但是WebStorm下的React工程经常会出现很多警告以及转换提示,下面我就对此做一些整理,方便更多同志使用。React Library支持点击下载按钮,下来所需要的react library:激活所选library, 应用即可支持JSX原创 2016-12-07 14:30:16 · 48097 阅读 · 3 评论 -
Redux中间件在React和React-Native项目架构中的应用实践
前言在MVVM框架模式独揽天下的今天,React凭借其独特的设计思想,深入的设计理念,开辟了一条崭新的康庄大道,实属是一个重大的突破,为什么这么说呢?因为React论其设计思想,充其量只是MVVM种的V而已,对于大量而且复杂的数据来讲,自身处理上显得有些力不从心,这时候,传统的Redux和Flux的设计思想起到了决定性的作用,对于Redux和Flux这里不多赘述,这个观念在这两年被炒的异常火热,网上原创 2017-01-13 16:12:32 · 4471 阅读 · 0 评论 -
Redux-Saga在React工程架构之的应用实践详解
前言React的作用View层次的前端框架,自然少不了很多中间件(Redux Middleware)做数据处理, 而redux-saga就是其中之一,目前这个中间件在网上的资料还是比较少,估计应用的不是很广泛,但是如果使用得当,将会事半功倍的效果,下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件,主要集中处理react架构中的异原创 2017-01-12 15:12:08 · 24949 阅读 · 0 评论 -
Onsen UI QUICK START FOR REACT
To use Onsen UI in React apps, Onsen UI Core and React Components should be installed to the project. These modules can be installed via NPM package: onsenui and react-onsenui.To quickly setup the pro转载 2016-11-17 17:50:22 · 2442 阅读 · 0 评论 -
WebPack在React项目架构中的应用实践
前言说起WebPack的发展历程,不由想起了一那句“千里马常有,而伯乐不成有的”的名言,相信很多人都听说过Grunt, Gulp 这样的架构工具,但是却很少有人涉及应用过Webpack, 但是由于React的技术框架的风靡一时,webpack的地位以及应用度得到了很大的提升,这不得不感谢Facebook的架构。对此,我也谈一下webpack在React项目中的应用实践,究竟为何要用这样一个技术架构。原创 2016-12-07 10:22:54 · 2797 阅读 · 1 评论 -
ReactJS学习系列课程1(ReactJS简介)
最近几年HTML5技术日新月异,各种框架更是层出不穷,如果说2016年最火爆的框架,当属ReactJS莫属。React起源是Facebook的内部项目,当时市场上已经有很多流行的框架了,比如Angular, KnockoutJs等等,但是Facebook公司都不是特别的满意,个人感觉大公司这方面都比较类似,你懂得,于是决定自己写一套框架,用来架设自己公司的Instagram网站,做成以后,发现这套框原创 2016-06-24 15:42:22 · 1243 阅读 · 0 评论 -
ReactJS学习系列课程附加(Flux应用架构)
React相对于传统HTML5框架来讲,不同点在于React使用了Flux架构。Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想,不需要太多新的代码你就可以马上使用Flux构建你的应用。Flux应用主要包括三部分:dispatcher(调度者)、store(仓库)和view翻译 2016-06-24 17:02:14 · 983 阅读 · 0 评论 -
ReactJS学习系列课程2(React环境搭建)
作为任何一款HTML5的框架,基础搭建都会相对简单,但是实际项目中我们都会基于业务进行相应架构,会做部分更改,但是为了入门,我们先从最开始的进行学习。首先我们要下载React的核心资源库,我们可以从官方网站下载,其中包括很多Demo实例,还有React几个核心文件库。官网: https://facebook.github.io/react/downloads.html下面我们开始创建一个html模板原创 2016-06-24 17:38:26 · 1206 阅读 · 0 评论 -
ReactJS学习系列课程3(React State状态)
对于React来讲,一切都已组件形式拼接,有组件就免不了要进行用户交互,用户交互就会有交互状态,react中设定了一个state进行状态管理。大家可以参考如下代码:var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: fun原创 2016-06-24 17:57:50 · 2464 阅读 · 0 评论 -
ReactJS学习系列课程(JSX语法)
JSX语法很多人也不是第一次遇见,类似的语法在Java 的Jsp, .net等平台中都有出现,那么到底什么才是JSX语法呢?其实,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:var names = ['red', 'yello原创 2016-06-24 20:35:29 · 1437 阅读 · 0 评论 -
ReactJS学习系列课程(组件的生命周期)
对于任何一个框架,或者组件而言,都有其生命周期的定义,比如从定义到销毁,会有一定的流程在其中控制,以前我们接触过IONIC, 不得不说这个框架对生命周期的定义是非常完美的,也为开发者提供了很多的便利。那么,对于React而言,是基于Component的一个框架,那么我们今天来谈谈Componet的生命周期是一个什么样的状态呢?组件的生命周期分成三个状态:Mounting:已插入真实 DOMUpd原创 2016-06-24 21:41:55 · 846 阅读 · 0 评论 -
ReactJS学习系列课程(React学习总结)
进来学习React, 下面来总结一下,主要有以下几点: 1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。 2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。 3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部原创 2016-06-24 21:52:46 · 1513 阅读 · 0 评论 -
ReactJS学习系列课程(React ES6语法使用)
自从ES6发布以来,越来越多的人开始追捧这一崭新的语法,丰富的语义化方法,简介的符号说明,吸引了很多人,虽然目前ES6的语法还不被广大浏览器支持,仍需要用babel转化使用,但是ES6仍是一个不错的选择。那么,如果我们就想用ES6的语法定义React该如何去编写呢?首先我们用ES6定义个React组件尝试一下,上代码:import React, { PropTypes, Component } fr原创 2016-06-25 11:41:51 · 1392 阅读 · 0 评论 -
ReactJS学习系列课程(React Http网络数据读取)
我学习过很多HTML5前端框架,比如AnguarJS, VUE.js Durandal, Avalon, Jquey, SAPUI5等等,对于任何一款框架都有自己的网络请求方案。Jquery: $.get()Anguar: $httpSAPUI5: 这个就更多了,比如XMLModel JSONModel ODataModel.那个React该如何去请求网络数据呢,在这里要说明一个,Reac原创 2016-06-25 13:26:47 · 10406 阅读 · 0 评论 -
ReactJS学习系列课程(React ref的使用)
在我学习React的过程当中,总会被一些名词搞得晕头转向,但是细想起来又非常简单,比如React定义的这个refs,其实就是用于获取dom的一种方式。在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然原创 2016-06-25 13:42:36 · 17848 阅读 · 0 评论 -
ReactJS学习系列课程(React 表单应用)
到目前为止,我们已经学习了很多react的特性,对于表单的使用其实也没有大的区别,下面我们为了更加熟悉React, 我们纯当练习:我们看看代码吧:我们创建一个简单form: //约束组件 var MyForm = React.createClass({ getInitialState: function () { return原创 2016-06-25 15:53:40 · 946 阅读 · 0 评论 -
ReactJS学习系列课程(React 动画使用)
常用Angular的开发者,一定熟悉angular的Animation的使用,其实React的动画效果原理和Angular是极其相似的。首先,我么需要导入一个额外的库(Angular也一样哦), <script src="../libs/react-with-addons.min.js"></script>下面我们引入Transition插件:// 引入react-with-addons中的C原创 2016-06-25 16:16:26 · 2642 阅读 · 0 评论 -
ReactJS学习系列课程(React webpack使用)
什么是webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。之前,我们肯定用过grunt, gulp 等等的工具,其实webpack的存在时间不亚于这两款工具,webpack的普及正是由于React的火爆而推广开发,因为Facebok官方就是用webpack打包编译的,比如原创 2016-06-25 17:54:31 · 1351 阅读 · 0 评论 -
ReactJS学习系列课程(React Redux使用)
React 数据流动的模式的Flux模式,也就是单向数据流,这也是官方推荐的方式,其实这也是React最难理解的一部分。为了更好的了解React-redux的使用,我们先来了解一下Redux的使用。Redux 介绍对于复杂的单页面应用,状态(state)管理非常重要。state 可能包括:服务端的响应数据、本地对响应数据的缓存、本地创建的数据(比如,表单数据)以及一些 UI 的状态原创 2016-06-28 12:29:08 · 1263 阅读 · 0 评论 -
ReactJS学习系列课程(React 整体流程使用案例)
对于一门语言的学习,少不了动手练习,今天我们就尝试一下,如何用React编写一个简单的程序,实现功能包括网络请求数据,绑定数据进行增删改查,并进行相应的路由操作。下面我们来年代码:package.json我们创建一个package.json, 里面包含一些开发库还有核心库:{ "name": "demo4", "version": "1.0.0", "description": "",原创 2016-06-27 16:06:28 · 6199 阅读 · 0 评论 -
ReactJS学习系列课程(React react常用架构分析)
最近学习React框架,与其说react是一个新的框架,不如过React是一个新的思想,新的尝试,做惯了前端框架的工程师都知道,MVC,MVVM一直被大家公认为一个非常不错的模式,但是Facebook的工程师确不以为然,推陈出现,创作了这个新的开始,对于一个新的模式,必然有新的架构出现,今天我们来看看React常用架构是什么样的呢?当然这并不是唯一,但是大同小异,万变不离其宗。我们看下面这张架构图:原创 2016-06-28 11:54:05 · 4864 阅读 · 0 评论 -
ReactJS学习系列课程(React 性能优化及immutable使用)
一个框架的性能,往往使我们比较关注的问题,对于React性能提升的问题,也做了相关研究,最近网络上最火爆的当属Immutable, 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明。这是一个Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现, 那么这个libr原创 2016-06-28 14:18:13 · 1030 阅读 · 0 评论 -
React-Native 学习系列课程笔记(React-Native开发环境搭建)
对于2016年最火爆的前端H5框架无疑是Facebook推出的React, React框架可以说是一个系列框架,可以分为web端,服务端,移动端,其核心思想都是自己组件化开发,这也是未来前端或者是移动领域一个不小的趋势所在。那么今天我们就来尝试一下React-Native,这个一个对于一个移动领域不小的突破, 目前其主要针对两个平台,IOS和Android, 我们先来搭建一个开发环境, 这里推荐大家原创 2016-08-11 02:37:52 · 1548 阅读 · 0 评论 -
React-Native 学习系列课程笔记(React-Native 开发从零开始)
React-Native 和React的原理大体相同,但是React-Native更多的是用Native组件替代web组件,为了能够更好的理解React-Native,大家最好先了解一下React的基本语法结构。我们先来看看一个简单的Hello world的实现方式:import React, { Component } from 'react';import { AppRegistry, Tex原创 2016-08-11 03:07:21 · 2325 阅读 · 0 评论 -
ReactJS学习系列课程(React Router 使用)
对于任何一个前端框架都有页面跳转,而这个跳转就一定需要路由的定义,比如Angular, Durandal等等,今天我们学习一下如果定义个路由在React中。为了便于理解,我们同样附上一段代码,看看究竟是如何实现的:import React from 'react'import { render, findDOMNode } from 'react-dom'import { browserHi原创 2016-06-25 13:19:19 · 4974 阅读 · 0 评论 -
ReactJS学习系列课程(React mixin的使用)
React是基于组件的,也就是整个项目是各个组件组合到一起的,这样往往会用到通用的一些特性,这就衍生了mixin的概念。其实,mixin,可以非常简单的理解,他就是把 一个 mixin 对象上的方法都混合到了另一个组件上,和 es6的extend极为类似。在mixin中写的生命周期相关的回调都会被合并,也就是他们都会执行,而不会互相覆盖掉。比如 你在mixin中可以定义 componentDidMo原创 2016-06-25 14:03:25 · 3568 阅读 · 0 评论 -
ReactJS学习系列课程(React 组件的组合使用)
React是基于组件的,整个项目就是各个组件拼接而成,这也是目前最主流的架构方案,组件化,react的这一个特性十分鲜明,那么react组件的组合使用也是非常简单,说多无用,我们看代码:var Child = React.createClass({ render: function(){ return( <div> <s原创 2016-06-25 15:29:35 · 2243 阅读 · 0 评论 -
ReactJS学习系列课程(props 组件属性)
对于React而言,组件的属性在程序中,我们多用this.props获取,讲到这里,可能有些人还不清楚什么是组件的属性呢,下面我们来看段代码:var Greet = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } })原创 2016-06-24 21:07:13 · 994 阅读 · 0 评论 -
ReactJS学习系列课程(React 调试工具集)
学习React过程中,我们一定知道,React有两个视图,一个虚拟机DOM,也就是我们创建的Component, 另一个就是渲染到页面中的view,这也就导致我们调试过程中会有一定的障碍,所以我们尝试一下:这是一个全新的调试工具,名字是New React Devtools, 下面我们来看一下效果吧!这个插件工具可以做哪些工作呢:Tree view,树形结构,可以看到和编辑所有的props, sta原创 2016-06-25 17:20:28 · 17824 阅读 · 0 评论 -
ReactJS学习系列课程
总揽:(http://blog.csdn.net/jiangbo_phd/article/category/6284963)React简介特点 (http://blog.csdn.net/jiangbo_phd/article/details/51753279)React 环境搭建 ( http://blog.csdn.net/jiangbo_phd/article/details原创 2016-06-28 15:54:51 · 1790 阅读 · 0 评论