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

相关推荐
qq_411671986 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app