(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!

相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫7 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript