React进阶篇

本系列第一篇文章我们说基础知识,主要是让大家对react能够直接上手使用,做出东西来,但是对于一些相对复杂逻辑的业务,我们就需要科学的规划和系统的使用react.

而react,毋庸置疑,和使用a2(angular2)一样,涉及到一些简单的常用的ES6的知识,当然是非常简单的,我们遇到总结到下面的第一部分就好。

一、ES6基础速查

这里的ES6知识并不是告诉你准确的东西,而是让你在一分钟之内了解ES6,让你顺利的学习react,而不是耗费精力在细枝末节上,当然ES6绝对是重中之重,理解react的必备,但是这个教程是让你迅速上手出活,而不是教你原理。

直接上ES6对比ES6

const ->var 当时不能改,常量

import 相当于 src

class ES5里面的 对象

arr.map函数

箭头函数直接说

([param] [, param]) => {

statements

}

param => expression

() => { ... } //零个参数用()表示;

x => { ... } //一个参数可以省略();

(x, y) => { ... } //多参数不能省略();

好,我们继续回到正题,模块化的使用react,前面我们使用过引用react库的方式,而实际项目中更常见的方式是我们通过NPM/yarn等,管理项目功能和模块,不多说我们还是从一个最简单的hello world开始。

二、react的常用子

直接上安装react和相关环境,

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

注意,很多教程是从webpack,BabelandESLint等配置开始的,其实不用,上面的工作其实就是帮你配置这些,当然了,你如果能够了解如何配置更好,但是现在是学react所以我尽量不引人新知识,想让大家会用。

注意这个是开发过程,如果是上线使用命令

npm run build最后会将上线文件放到build文件夹下

大部分时间我们是和app.js打交道,请看以下内容:

1.先看看app.js里面写的啥?

class App extends Component{

render(){

return (

hello word

);

}

}

我们对比一下之前函数的写法

ReactDOM.render(

Hello, world!,

document.getElementById('root')

);

注意:推荐大家使用第一种写法,为什么?因为第一种写法有状态,函数的写法没有。后面我们会说为什么。

我们继续折腾app.js

2.下面我们说下,在react中的属性使用

class App extends Component{

render(){

return (

);

}

}

ReactDOM.render(

//注意自封闭,txt就是属性

document.getElementById('div1');

);

3.下面说一下个对应第一个第一篇文章的状态管理。先看代码

class App extends Component{

constructor(){

super();//不用你理解,你只要记住一件事super调用父类的构造器,使用this的话必须先执行它。

this.state = {

name:'尼古拉斯·屌·大彬哥'

};

}

update(e){

this.setState({

name:e.target.value

});

}

render(){

return (

);

}

}

4.多个组件嵌套 App 这个组件里面嵌套着 Widget

import React, { Component } from 'react';

class App extends Component{

constructor(){

super();//不用你理解,你只要记住一件事super调用父类的构造器,使用this的话必须先执行它。

this.state = {

txt:''

};

this.update = this.update.bind(this);

}

update(e){

this.setState({

txt:e.target.value

});

}

render(){

return (

);

}

}

const Widget = (props) => {

return (

onChange= />

);

}

export default App;

5.作为例子肯定少不了列表循环

class App extends Component{

constructor(){

super();//不用你理解,你只要记住一件事super调用父类的构造器,使用this的话必须先执行它。

this.state = {

data:[

,

,

,

]

};

}

render(){

let rows = this.state.data.map(person=>{

return

});

return (

rows

);

}

}

const PersonRow = (props)=>{

return (

-----

);

}

关于react的简易和总结

react 功能简单,技术链条很短只是一个mvc的v,相比angular2更实用,当然技术栈也不完整是个弊端,总体来说可以采用

先讲ES6->react ->angular2的思路,这里要重点讲ES6,因为是目前大部分库都是基于ES6构建的。

单纯使用react的例子可以讲:

任务列表

留言板

五子棋

如果想更加实战化,推荐详细讲。

react、webpack、bebel 和redux。

react开发 组件化是个好的发展方向,相比angular2断崖式的更新,更稳定,推荐重点使用。

讲完这篇基本上大家了解ES6和写一些日程安排,留言板在之类的没问题了,有同学可能会问为啥没有数据交互,已经强调过了,它是展示层,跟ajax无关。

接下来我们会加餐说一下未来可能会大火的React for Native,敬请期待!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180131G1H5BL00?refer=cp_1026

同媒体快讯

扫码关注云+社区