现在我们来进入项目基础搭建的环节。
本节代码对应 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 文件,
