React生态圈

1. create-react-app

使用create-react-app创建项目

create-react-app my-react-app

启动项目

cd my-react-app 
yarn start

注释：也可以使用npm start启动项目。

mock数据

① 创建mock数据文件

// /public/api/data.json
{
  "success": true,
  "data": [1, 2, 3]
}

② 请求数据

fetch('/api/data.json')
  .then(res => res.json())
  .then(data => console.log(data))
 // {data: [1, 2, 3], success: true}

2. react-transition-group

文档地址
安装react-transition-group

➜  my-react-app git:(master) ✗ yarn add react-transition-group

CSSTransition组件的简单使用

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
import './style.css'

class App extends Component {

  constructor(props, context){
    super(props, context)
    this.state = {
      show: true
    }
  }

  render() {
    
    return (
      <div>
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          appear={true} //第一次展示时也添加动画效果
          unmountOnExit //出场之后将元素移除
          onEntered={   //入场动画结束钩子函数 
            el => console.log(el) //el表示内部元素
          }  
        >
          <div>Hello</div>
        </CSSTransition>
        <button onClick={this._toggleShow}>Toggle</button>
      </div>
    );
  }

  _toggleShow = () => {
    this.setState({
      show: !this.state.show
    })
  }
}

export default App;

/* 定义class为fade的
CSSTransition元素第一次展示时动画 */
.fade-appear {
  opacity: 0;
}

.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in
}

/* 定义class为fade的
CSSTransition元素入场动画 */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 1s ease-in
}

.fade-enter-done {
  opacity: 1;
}

/* 定义class为fade的
CSSTransition元素出场动画 */
.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in
}

.fade-exit-done {
  opacity: 0;
}

CSSTransition组件的其它钩子函数
onEnter：入场动画执行第一帧时钩子函数
onEntering：入场动画执行第二帧时钩子函数
onEntered：入场动画执行最后一帧钩子函数
onExit：出场动画执行第一帧时钩子函数
onExiting：出场动画执行第二帧时钩子函数
onExited：出场动画执行最后一帧钩子函数
Transition是更底层组件，CSSTransition组件是根据Transition组件实现的。

3. styled-components

js文件中引入css文件的弊端
引入的css文件在整个html中生效。
安装styled-components

➜  my-react-app git:(master) ✗ yarn add styled-components

全局样式

① 创建全局样式组件

//src/style.js
import { createGlobalStyle } from 'styled-components'

export const Globalstyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
  }
`

② 使用全局样式组件

import { Globalstyle } from './style.js'

ReactDOM.render(
  <Provider store={store}>
    <TodoList/>
    <Globalstyle />
  </Provider>,
  document.getElementById('root')
);

创建带样式的元素

(1) 创建组件

//src/components/TodoList/style.js
import styled from 'styled-components'
import icon from '../../statics/weixin.jpg'

export const HeaderWrapper  = styled.div.attrs({
  //属性
})`
  height: 56px;
  background: url(${icon});
  &.right {
    float: right
  }
  .text {
     font-size: 20px;
     color: ${props => props.textColor}
  }
`

注释：①&.right表示class为right的HeaderWrapper组件的样式。②.text表示HeaderWrapper内class为text的元素的样式。③支持props传值。
(2) 使用组件

import { HeaderWraper } from './style'
const TodoList = (props) => {
  return (
    <HeaderWraper textColor='red'>
     //...
    </HeaderWraper>
  )
}

注释：该组件是一个有样式的div元素包裹层。

4. Iconfont阿里云图标

进入阿里云图标网站
创建项目并添加图标
下载Unicode至本地并解压
拷贝文件
将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff文件拷贝到项目中。项目路径如下：
./src/statics/iconfonts/iconfont.XXX
使用styled-components导入CSS文件
① 重命名iconfont.css为iconfont.js
② 编辑iconfont.js文件

import { createGlobalStyle } from 'styled-components'

export const IconFontGlobalComponent = createGlobalStyle`
@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1550907977882'); /* IE9 */
  src: url('./iconfont.eot?t=1550907977882#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,dfA2nmlc/BurCg==') format('woff2'),
  url('./iconfont.woff?t=1550907977882') format('woff'),
  url('./iconfont.ttf?t=1550907977882') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1550907977882#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconstar_blue:before {
  content: "\e625";
}
`

引入全局组件

import { IconFontGlobalComponent } from './statics/iconfonts/iconfont'

ReactDOM.render(
  <Provider store={store}>
    <TodoList/>
    <IconFontGlobalComponent />
  </Provider>,
  document.getElementById('root')
);

使用字体图标

 <span className="iconfont">&#xe625;</span>

5. Immutable的用法

5.1 immutable使用

安装immutable.js

➜  my-react-app git:(master) ✗ yarn add immutable

改写reducer.js

// ./src/components/TodoList/store/reducer.js
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from '../../../store/actionTypes'
import { fromJS } from 'immutable'


const defaultState = fromJS({
  inputValue: '',
  list: []
})

export default (state = defaultState, action) => {
  switch(action.type){
    case  CHANGE_INPUT_VALUE:
      return state
        .set('inputValue', action.value)
    case ADD_TODO_ITEM:
      return state
        .merge({
           list: state.get('list').push(state.get('inputValue')),
           inputValue: ''
        })
    case DELETE_TODO_ITEM:
      return state
        .set('list', state.get('list').filter((item, index) => index !== action.value))
  }
  return state
}

注意：state为immutable对象，其内部list值也为immutable对象。为保持数据类型统一，当action类型为ADD_TODO_ITEM或DELETE_TODO_ITEM时，需要设置list值仍为immutable对象。

改写TodoList组件

// src/components/TodoList/TodoList.js
//......
const mapStateToProps = (state) => {
  return {
    inputValue: state.todoList.get('inputValue'),
    list: state.todoList.get('list')
  }
}
//......

5.2 redux-immutable使用

安装redux-immutable

➜  my-react-app git:(master) ✗ yarn add redux-immutable

改写reducer

//src/store/reducer.js
import todoListReducer from '../components/TodoList/store/reducer'
import { combineReducers } from 'redux-immutable'

export default combineReducers({
  todoList: todoListReducer
})

注释：combineReducers从redux-immutable中引入，使该函数生成immutable对象。

改写TodoList组件

// src/components/TodoList/TodoList.js
//......
const mapStateToProps = (state) => {
  return {
    inputValue: state.getIn(['todoList', 'inputValue']),
    list: state.getIn(['todoList','list'])
  }
}
//......

6. react-router

6.1 路由实现

安装

 yarn add react-router-dom

使用

//src/pages/home/home.js
import { Link } from 'react-router-dom'
import React from 'react'

const Home = () => (
  <div>
    <Link to="/detail">to Detail</Link>
    <Link to="/param/1">to Param</Link>
    <Link to="/query?query=1">to Query</Link>
  </div>
);

export default Home

//src/pages/detail/detail.js
import { Link } from 'react-router-dom'
import React from 'react';

const Detail = () => (
  <Link to="/"><h1>Detail</h1></Link>
)

export default Detail

//src/pages/param/param.js
import { Link, Redirect, withRouter } from 'react-router-dom'
import React from 'react'

const Param = (props) => {
  return props.match.params.id === '1'
    ? (<Link to="/">{props.match.params.id}</Link>)
    : <Redirect to='/'/>
}

//使用witchRouter装饰，则该组件可以拿到match值
export default withRouter(Param)

//src/pages/query/query.js
import { Link } from 'react-router-dom'
import React from 'react'

const Query = () => (
  <Link to="/">
    <h2>Detail</h2>
  </Link>
)

export default Query

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'

ReactDOM.render(
  <div>
    <BrowserRouter>
      <div>
        <Route path='/' exact component={Home}/>
        <Route path='/detail' exact component={Detail}/>
        <Route path='/param/:id' exact component={Param}/>
        <Route path='/query' exact component={Query}/>
      </div>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);

注释：①如果不添加exact属性，则进入/detail路径时，Home和Detail都会显示出来。②Redirect为重定向组件，渲染该组件时，路由会重定向到to属性对应的路由。

6.2 问题分析

6.2.1 webpack-dev-server单页面路由问题

使用webpack-dev-server开启服务
问题描述
点击link可以实现路由跳转跳转，但是直接访问http://localhost:9000/detail无法访问。
问题分析
在访问/detail路径时，webpack-dev-server以为你想要打开的是http://localhost:9000/detail.html。因为没有此页面，所以报错。
解决方案
配置devServer.historyApiFallback
webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};

7. react-loadable异步组件

安装react-loadable

npm i react-loadable --save

使用react-loadable

import Loadable from 'react-loadable';
import React from 'react'

const LoadableComponent = Loadable({
  loader: () => import('./detail'),
  loading: () => <div>正在加载</div>,
});

export default () => <LoadableComponent/>

注释：/detail对应组件被react-loadable封装之后会异步加载。

参考资料

React 16.4 开发简书项目从零基础入门到实战

最后编辑于：2019.04.17 22:00:22

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343