【学习打卡】第4天 实战旅游项目

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 项目初始化 /

主讲老师：阿莱克斯

课程内容：

1. 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>

截图