【学习打卡】第4天 实战旅游项目
课程名称:[React 17/18 系统精讲 结合TS打造旅游电商平台]
课程章节: 项目初始化 /
主讲老师:阿莱克斯
课程内容:
- State Props 概念
课程收获:
初始化
npx create-react-app react-traval --template typescript
使用模块化module.css修改原有的css名称
安装UI组件库
npm install antd @ant-design/icons
注入antdCSS样式
import 'antd/dist/antd.min.css';
使用antd基础编写一个页面
import React from "react";
import style from "./App.module.css";
import logo from "./logo.svg";
import "antd/dist/antd.min.css";
import { Layout, Typography, Input } from "antd";
const { Header } = Layout;
const { Title } = Typography;
const { Search } = Input;
function App() {
return (
<div className={style.App}>
<div>
<Header>
<img src={logo} alt="" />
<Title level={3}>React 旅游网</Title>
<Search placeholder={"请输入旅游目的地"}></Search>
</Header>
</div>
</div>
);
}
export default App;
为logo添加上样式
<img src={logo} className={styles['App-logo']} alt="" />
// 此处应采用的css in js App-logo无法使用对象链式起来
使用行内样式定义下拉菜单的BUTTON组件 并定义下拉菜单的样式
<DropdownB style={{ marginLeft: 15 }}></DropdownB>
<DropdownB
overlay={
<Menu
items={[
{ key: "1", label: "中文" },
{ key: "2", label: "English" },
]}
/>
}
style={{ marginLeft: 15 }}
>
语言
</DropdownB>
截图
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦