React開發筆記

項目環境搭建

　　使用create-react-app

CSS使用styled-components

　　yarn add styled-components

引入reset.css樣式

　　import { createGlobalStyle } from 'styled-components'

　　export const GlobalStyle = createGlobalStyle ` `

　　而後在App.js中引入GlibalStyle組件

引入iconfont

　　配置跟reset.css同樣

引入react-transition-group

 　　實現組件動畫效果

引入redux  react-redux

　　如何配置 首先建立store 文件夾   index.js   reducer.js只一個純函數

　　而後App.js引入Provider  store

　　接着在組件中使用connect作鏈接    connect（mapStateToProps, mapDispathcToProps）(Header)

使用redux-devtool-extension插件

　　https://github.com/zalmoxisus/redux-devtools-extension

　　如何使用　

  import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

使用combineReducer對reducer拆分

　　修改store下的reducer.js代碼

import { combineReducers } from 'redux'
import { reducer as headerReducer} from '../components/header/store'

export default combineReducers({
  header: headerReducer
})

使用actionCreators.js和actionTypes.js對store代碼優化

使用immutable.js和redux-immutable

　　yarn add redux-immutable

　　生成的immutable對象，改對象不可改變

　　yarn add immutable

　　如何使用

import {fromJS} from 'immutable'

const defaultState = fromJS({
  focused: false
})

const mapStateToProps = state => {
  return {
    focused:state.header.get('focused')
  }
}

export default (state = defaultState, action) => {
  if (action.type === actionTypes.SEARCH_BLUR) {
    return state.set('focused', false)
  }
  if (action.type === actionTypes.SEARCH_FOCUS) {
    return state.set('focused', true)
  }
  return state
}

使用redux-thunk

　　異步操做不在componentDidMount中操做

　　放到action

　　yarn add redux-thunk

後端使用koa koa-router  koa-cors mock

　　模擬後端服務器

前端使用axios

　　跨域配置  "proxy": "http://localhost:8080"

安裝react-router-dom　　

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

　　<BrowserRouter>
　　　　<div>
　　　　　　<Header/>
　　　　　　<Route path="/" exact component={Home}/>
　　　　　　<Route path="/detail/:id" exact component={Detail}/>
　　　　</div>
　　</BrowserRouter>

　　得到pathname

　　　　const {pathname} = this.props.location

　　頁面跳轉

　　　　this.props.history.push('/')

　　頁面重定向

　　　　<Redirect from='/...' to='/...' />