搭建项目基本骨架|云音乐项目 | 前端进阶之旅

现在我们来进入项目基础搭建的环节。

本节代码对应 GitHub 分支: chapter2

仓库传送门

初始项目的搭建主要分为三个部分进行:

路由的配置和应用部分
公共组件的开发
redux 的 store 创建和引入

现在让我们开始吧。

# 一、路由配置

# 路由文件编写

要开发一个复杂应用的时候，首先要做的并不是上来就开始写具体功能，要想清楚整个应用的结构，从路由开始入手编写是一个比较好的方式，也建议大家拿到别人的项目的时候从路由开始着手，可以很好的整理我们的思路。

应用的骨架其实非常简单，顶部有固定的内容及 tab 栏，下面对应不同的功能组件。

首先安装依赖。

npm install react-router react-router-dom react-router-config --save

@前端进阶之旅: 代码已经复制到剪贴板

现在我们在 routes 目录下新建 index.js 文件，利用 react-router-config 来对路由进行配置。

//routes/index.js
import React from 'react';
import { Redirect } from "react-router-dom";
import Home from '../application/Home';
import Recommend from '../application/Recommend';
import Singers from '../application/Singers';
import Rank from '../application/Rank';

export default [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        exact: true,
        render: () => (
          <Redirect to={"/recommend"}/>
        )
      },
      {
        path: "/recommend",
        component: Recommend
      },
      {
        path: "/singers",
        component: Singers
      },
      {
        path: "/rank",
        component: Rank
      }
    ]
  }
]

@前端进阶之旅: 代码已经复制到剪贴板

Home 组件对应公共组件，下面的推荐组件、歌手列表组件和排行榜组件为具体的功能组件。

为了让路由文件生效，必须在 App 根组件下面导入路由配置，现在在 App.js 中:

import React from 'react';
import { GlobalStyle } from  './style';
import { renderRoutes } from 'react-router-config';//renderRoutes 读取路由配置转化为 Route 标签
import { IconStyle } from './assets/iconfont/iconfont';
import routes from './routes/index.js';
import { HashRouter } from 'react-router-dom';

function App () {
  return (
    <HashRouter>
      <GlobalStyle></GlobalStyle>
      <IconStyle></IconStyle>
      { renderRoutes (routes) }
    </HashRouter>
  )
}

export default App;

@前端进阶之旅: 代码已经复制到剪贴板

# 新建组件文件

现在你的项目应该是无法启动的，因为这些组件你都没有定义和引入。

现在，在 application 目录下，新建 Home 文件夹，然后新建 index.js 文件，

//src/appliction/Home/index.js
import React from 'react';

function Home (props) {
  return (
    <div>Home</div>
  )
}

export default React.memo (Home);