使用React構建精簡版本掘金（一）

最近正在學習react，就想着能不能用react作一個項目，平時瀏覽掘金，就拿掘金練手吧！

是否是能夠以假亂真呢！😂😂😂

初始化

• 使用create-react-app初始化項目結構

yarn create react-app react-juejin
複製代碼

這個腳手架會自動幫助咱們搭建基礎工程，同時安裝React項目的各類必要依賴，若是在過程當中出現網絡問題，請嘗試配置代理或使用其餘 npm registry。
進入項目並啓動

cd react-juejin
yarn start
複製代碼

• 安裝ant-design

yarn add antd
複製代碼

• 配置UI庫懶加載樣式
  須要對整個項目從新配置，這裏使用了react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）。

yarn add react-app-rewired customize-cra
複製代碼

修改package.json 文件以下

在根目錄中建立config-overrides.js，用於重寫覆蓋默認的配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
複製代碼

• 使用 babel-plugin-import 該插件用於按需加載plugins和樣式

yarn add babel-plugin-import
複製代碼

修改上步建立的config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);
複製代碼

• 添加less-loader
  我的習慣使用less，看我的喜愛安裝便可，不過查閱上面社區方案react-app-rewired，並無提供好比sass的重寫方案，故若是須要使用sass，可採用別的方案引入。

yarn add less less-loader
複製代碼

修改config-overrides.js

//const { override, fixBabelImports } = require('customize-cra');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
    }),
);
複製代碼

以上詳細配置的話可參考ant-design官網

引入redux

• 安裝

yarn add redux react-redux --save
複製代碼

• 使用方式 考慮到以後可能會有多個reducer，開始就把結構弄好，作成往後能夠方便合併使用多個reducer的方式
  （1）建立一個reducer

// 建議使用這中結構

// 1.定義默認數據
let initialState = {
    notificationCount: 0
}

// 2.Reducer
const pageHeaderReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_COUNT':
            return { ...state, notificationCount: action.notificationCount }
        default:
            return state
    }
}
// 3.導出
export default pageHeaderReducer;
複製代碼

（2）建立index.js,做爲合併全部reducer的文件。

import {combineReducers} from 'redux';

import pageHeaderReducer from './pageHeader.js';

const appReducer = combineReducers({
    pageHeaderReducer
});
export default appReducer;
複製代碼

（3）App.js中使用定義好的reducer

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import appReducer from './reducers/index.js';
// 使用合併後的那個Reducer
const store = createStore(appReducer);
class App extends Component {
  constructor(props){
    super(props);
  }
  ...
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          ...
        </div>
      </Provider>
    );
  }
}
複製代碼

(4)在header/index.js中使用redux

import { connect } from 'react-redux';

class Header extends Component {
    ...
    render() {
        ...
        return (
            <Affix offsetTop={this.state.top}>
                ...
                <Badge count={this.props.count} overflowCount={10}>
                    <a href="/">
                        <Icon type="notification" />
                    </a>
                </Badge>
            </Affix>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        count: state.pageHeaderReducer.notificationCount
    }
}

Header=connect(mapStateToProps)(Header)

export default Header;
複製代碼

到目前爲止，就能夠在外部修改notificationCount的值，經過redux，組件內部就能夠正常獲取到對應的count值。
更詳細的redux配置能夠參考redux中文文檔

添加路由react-router

首頁導航中存在5個tab切換，分別對應這不一樣的頁面內容。接下來介紹如何經過react-router實現不一樣頁面內容的跳轉。

• 安裝react-router

yarn add react-router-dom --save
複製代碼

• 使用方式

import { Switch, Route } from 'react-router-dom';
...
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() {
        return (
            <div>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/timeline' component={Home}/>
                    <Route path='/dynamic' component={Dynamic}/>
                    <Route path='/topic' component={Topic}/>
                    <Route path='/brochure' component={Brochure}/>
                    <Route path='/activity' component={Activity}/>
                </Switch>
            </div>
        );
    }
}
複製代碼

上面的exact表示絕對匹配/,若是不註明exact,則/還會匹配/timeline等等上面代碼實現了一個相似tabbar切換的效果

• tab導航

render() {
        return (
            <ul>
                {this.state.navs.map((item,index)=>{
                    return <li key={item.path} className={item.isActived?'activeLi':''} onClick={this.handelClick.bind(this,index)}>
                                <Link to={item.path}>{item.text}</Link>
                            </li>
                })}
            </ul>
        );
    }
複製代碼

react-router中提供了Link和NavLik兩種方式，若是僅僅須要匹配路由,使用Link就能夠了,而NavLink的不一樣在於能夠給當前選中的路由添加樣式, 好比上面寫到的activeStyle和activeClassName
更詳細的react-router配置能夠參考React-router中文文檔

到目前爲止，基礎結構就算是完成了，後續的就須要往各個頁面添加實際內容了。

目前效果圖如上所示，後續不斷更新中。以上詳細代碼見github,歡迎點贊，您的點贊是個人動力。