写在前面：
工作一年多了，一直想有个自己的博客，因为懒，所以一直拖着。今天开个篇，用React+TypeScript（野生学的，勿喷😀）搭建一个自己的博客系统，博客会持续完善，所以文章也会一直更新✈✈✈
创建项目
官网搭建地址：https://create-react-app.dev/docs/adding-typescript/
yarn create react-app my-app --template typescript
项目目录结构
这里为了方便后续开发，修改下目录结构（删减个人喜好）
启动项目，这里我修改了启动配置（之前项目都是这个）
yarn serve
启动完成之后会默认打开localhost:3000端口，能看到下面的界面说明项目搭建好了
接下来开始写一些基本需要的配置，为了快乐的写代码，全面使用hooks+函数式编程，快乐最重要😀😀😀
下载配置路由
yarn add react-router-dom
契合一下typescript，不然编译器没提示
yarn add @types/react-router-dom
基本配置
import React from 'react'
import { Route, HashRouter, Switch } from 'react-router-dom'
import App from './../views/App'
import Home from './../views/Home'
import Set from './../views/Set'
const Router: React.FC = () => {
return (
<HashRouter>
<Route path='/' component={App}></Route>
<Switch>
<Route path='/home' component={Home}></Route>
<Route path='/set' component={Set}></Route>
</Switch>
</HashRouter>
)}
export default Router;
下载Ant Design
yarn add antd
页面直接引入相应组件即可
import React from 'react';
import './../styles/App.css';
import { NavLink } from 'react-router-dom'
import { Button } from 'antd'
const App: React.FC = () => {
return (
<div className="App">
<NavLink to='/home'><Button>home</Button></NavLink>
<NavLink to='/set'><Button>set</Button></NavLink>
</div>
);
}
export default App;
注意：需要在index.css文件中引入样式antd文件方可生效
@import '~antd/dist/antd.css';
为了使我们博客的主题色更加具有个性，我们使用antd官方推荐的插件，这里不细说了
配置链接：https://ant.design/docs/react/use-with-create-react-app-cn
配置好路由的页面效果
配置redux
请移步本人写的另一篇文章 ：React系列（三），直面Redux
这里就不再过多的写了
结语：
- 至此，环境搭建准备工作已完成
- 接下来就要开始完成博客前端开发了，下一篇文章很快就能和大家见面了
- 需要源码的小伙伴们可以去我的git上下载：github.com/YYDBBA/reac…，喜欢的小伙伴记得点个star😀😀😀
