使用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,欢迎点赞，您的点赞是个人动力。