(20)Redux 入门——② 使用 Antd 实现 TodoList 页面布局 | React 基础理论实操

复制代码
转载请注明出处,未经同意,不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题",已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。

1 安装 Antd

🔗Antd Design

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!

相关推荐
shellvon9 分钟前
前端攻防:揭秘 Chrome DevTools 与反调试的博弈
前端·逆向
β添砖java14 分钟前
案例二:登高千古第一绝句
前端·javascript·css
却尘14 分钟前
Server Actions 深度剖析:这就是个披着 React 外衣的 RPC
前端·rpc·next.js
TNTLWT20 分钟前
单例模式(C++)
javascript·c++·单例模式
南雨北斗38 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪38 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss1 小时前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海1 小时前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手1 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪1 小时前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端