转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 安装 Antd
Antd 在开发一些"后台管理工具"时用的非常多，我们可以用它很迅速地开发出一个很漂亮的后台页面。
💡考虑到后边的实战阶段为"用户端"项目，也因时间问题，本篇我们仅简单使用 Antd，在本篇的基础上，你完全可以自行拓展，熟练使用 Antd。
❗️为了便于讲解，我们先把之前的代码进行精简（ src 文件夹下只留一个 index.js "入口 文件"，其他全部删除掉！）： 
1️⃣正如上图看到的，"入口文件" index.js 里边引入了一个 TodoList 组件。故，我们去创建这个"组件"：
jsx
import React, {Component} from "react";
class TodoList extends Component {
render() {
return (
<div>
<div>
Hello, qdywxs.
</div>
</div>
)
}
}
export default TodoList;查看页面，页面没问题： 
2️⃣接着，安装 Antd 这个 UI 框架，对 TodoList 做一个页面布局： 
3️⃣安装完成后，在 TodoList.js 文件内引入"样式"： 
jsx
import React, {Component} from "react";
import 'antd/dist/antd.css';
class TodoList extends Component {
render() {
return (
<div>
<div>
Hello, qdywxs.
</div>
</div>
)
}
}
export default TodoList;2 使用 Antd
4️⃣接着，去写我们想要的样式。 由于 Antd 里集成了很多 input 框的样式，我们可以在 Antd 官网直接搜索 Input 输入框 ：
5️⃣按照官网提示，在代码中引入 Input 组件并使用（我们演示"基本使用"的效果）：
jsx
import React, {Component} from "react";
import 'antd/dist/antd.css';
import { Input } from 'antd'; // 5️⃣-①：从 antd 引入 Input 组件；
class TodoList extends Component {
render() {
return (
<div>
<div>
<Input placeholder="todo info" style={{width: "300px"}} />
{/*
5️⃣-②：然后在 JSX 中直接用 Input 组件，并设置一下它的样式（宽度）。
❗️注意 Input 的大小写！
*/}
</div>
</div>
)
}
}
export default TodoList;看看效果： 
6️⃣同理，引入 Button 组件： 
jsx
import React, {Component} from "react";
import 'antd/dist/antd.css';
import { Input, Button } from 'antd'; // 6️⃣-①：从 antd 引入 Button 组件；
class TodoList extends Component {
render() {
return (
<div>
<div>
<Input placeholder="todo info" style={{width: "300px"}} />
<Button type="primary">提交</Button>
{/* 6️⃣-②：然后在 JSX 中，复制官网的写法，使用 Button。 */}
</div>
</div>
)
}
}
export default TodoList;看看效果： 
让其显示的更好看点：
jsx
import React, {Component} from "react";
import 'antd/dist/antd.css';
import { Input, Button } from 'antd';
class TodoList extends Component {
render() {
return (
<div style={{marginTop: "10px", marginLeft: "10px"}}> {/* ❗️加点间距 */}
<div>
<Input placeholder="todo info" style={{width: "300px", marginRight: "10px"}} />
<Button type="primary">提交</Button>
</div>
</div>
)
}
}
export default TodoList;看看效果： 
7️⃣接下来，做出"列表项"的效果。 同理，在 Antd 官网搜索 List 列表 ，按照官网提示进行 LIst 组件的引入和使用：
jsx
import React, {Component} from "react";
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd'; // 7️⃣-①：首先引入 List 组件；
// 7️⃣-②：按官网写法，去声明 data 常量（即，要显示在列表项中的内容）；
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
class TodoList extends Component {
render() {
return (
<div style={{marginTop: "10px", marginLeft: "10px"}}>
<div>
<Input placeholder="todo info" style={{width: "300px", marginRight: "10px"}} />
<Button type="primary">提交</Button>
{/* 7️⃣-③：直接复制官网写法（把没用的去掉），使用 List 组件： */}
{/* 7️⃣-④：给 List 加点样式（间距、宽度），使其更好看些。 */}
<List style={{marginTop: "10px", width: "300px"}}
bordered
dataSource={data}
renderItem={item => <List.Item>{item}</List.Item>}
/>
{/*
❗️❗️❗️
borderd 表示：这个列表有一个"边框"；
dataSource 表示：这个列表到底要渲染什么内容（答：上边声明的 data 里的数据）；
renderItem 表示：如何渲染（答：会将每条数据渲染成 List.item 这样的小组件，
数据内容就是 data 里边每一项数据的内容）。
*/}
</div>
</div>
)
}
}
export default TodoList;看看最后的效果： 
下一篇，我们就在本篇样式的基础上，去创建 Redux 中的 store。
祝好，qdywxs ♥ you！