从0搭建前端项目架构-第五篇-目录结构以上路由就配置好了。以上目录结构就配置好了。

目录结构

搭建目录结构

1.在client目录下创建config,store,views,components文件夹
2.将App.jsx文件放入views目录下

3.在views目录下创建topic-list和topic-detail两个文件夹，在文件夹中创建inedx.jsx，在index.jsx中先输入一点react代码

  import React from 'react'

  export default class TopicDetail extends React.Component{
      componentDidMount(){
          //todo 
      }
      render(){
          return (
              <div>this is topic detail</div>
          )
      }
  }

4.在stroe目录下创建store.js
5.在config目录下创建router.jsx

路由配置

1.安装react-router

    npm i react-router react-router-dom -S

2.在config/router.jsx中写入

    import React from 'react';
    import { Route, Redirect} from 'react-router-dom';
    import ToplicList from '../views/topic-list/index'
    import TopicDetail from '../views/topic-detail/index'
    
    
    export default () => [
        <Route path="/" render={()=><Redirect to='/list' />}  exact />,
        <Route path="/list" component={ToplicList} />,
        <Route path="/detail" component={TopicDetail}  />
    ]

3.在App.jsx中写入

    import React from 'react'
    import Routes from '../config/router'
    export default class App extends React.Component {
    
        componentDidMount(){
            //todo
        }
    
        render(){
            return [
            <div>
                <Link to='/'>
                    首页
                </Link>
                <br/>
                <Link to='/detail'>
                    详情页
                </Link>
           </div>,
                <Routes />,
            ]
        }
    }

4.在app.js中写入

    import { BrowserRouter } from 'react-router-dom';
    
    //...省略了
    //用BrowserRouter包裹起来，路由才会生效
    <BrowserRouter>
        <Component />
    </BrowserRouter>

以上路由就配置好了。

store配置

安装mobx

    cnpm i babel-plugin-transform-decorators-legacy babel-preset-stage-1 -D
    cnpm mobx mobx-react -S

在.babelrc里配置,transform-decorators-legacy一定要放在第一个

    {
        "presets": [
            ["es2015", {"loose":true}],
            "stage-1",
            "react"
        ],
        "plugins": ["transform-decorators-legacy","react-hot-loader/babel"]
    }

在store新建app-state.js，并输入

    import { observable,computed,autorun,action } from 'mobx'

    class AppState {
       @observable count = 0;
       @observable name = 'xiaofei'
       @computed get msg(){
           return `${this.name} say count is ${this.count}`
       }
       @action add(){
           this.count +=1
       }
    }
    
    
    const appState = new AppState()
    
    autorun(()=>{
        console.log(appState.msg)
    })
    
    setInterval(()=>{
        appState.add()
    },1000)

    export default appState;

在app.js中引入

    ...省略
    import { Provider } from 'mobx-react'
    import appState from './store/app-state';
    
    <Provider appState={appState}>
        <BrowserRouter>
            <Component />
        </BrowserRouter>
    </Provider>

以上目录结构就配置好了。