最近正在學習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 檔案如下
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,歡迎點贊，您的點贊是我的動力。