ant designx 学习第一天

2025年5月5日

一、开发工具

ant design x是用于实现智能问答界面开发的工具

链接地址：

https://ant-design-x.antgroup.com/index-cn

二、实践过程

1、创建项目

npx create-react-app my-antd-x-app

cd my-antd-x-app

npm install @ant-design/x

2、npm start 启动程序

3、app.txs 和index.tsx的区别

在使用 Ant Design 开发项目时，app.tsx 和 index.tsx 是两个常见且重要的文件，它们在项目中扮演着不同的角色：

index.tsx

index.tsx 通常是项目的入口文件，主要负责初始化整个应用程序，创建 React 根节点，并将 React 应用挂载到 HTML 页面上。以下是 index.tsx 常见的作用：

1. 引入必要的依赖：导入 React、ReactDOM 以及应用程序所需的全局样式文件。
2. 渲染根组件：将根组件渲染到 HTML 页面的特定 DOM 节点上。
3. 初始化全局设置：例如配置全局状态管理库（如 Redux、MobX 等）、初始化路由

fdsaf 

useState状态，initialState是初始状态，state是当前状态，setState是设定的状态。

const [state, setState] = useState(initialState);

4、程序改动

学习了布局方式

布局使用这个网站的组件

表格 Table - Ant Design 

对程序antdx-demo程序中增加了助手式的编程

https://ant-design-x.antgroup.com/docs/playground/copilot-cn

布局代码

import React from 'react';
import { Flex, Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 48,
  lineHeight: '64px',
  backgroundColor: '#4096ff',
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#0958d9',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#1677ff',
};

const footerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#4096ff',
};

const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: 'calc(50% - 8px)',
  maxWidth: 'calc(50% - 8px)',
};

const App: React.FC = () => (
  <Flex gap="middle" wrap>
    <Layout style={layoutStyle}>
      <Header style={headerStyle}>Header</Header>
      <Content style={contentStyle}>Content</Content>
      <Footer style={footerStyle}>Footer</Footer>
    </Layout>

    <Layout style={layoutStyle}>
      <Header style={headerStyle}>Header</Header>
      <Layout>
        <Sider width="25%" style={siderStyle}>
          Sider
        </Sider>
        <Content style={contentStyle}>Content</Content>
      </Layout>
      <Footer style={footerStyle}>Footer</Footer>
    </Layout>

    <Layout style={layoutStyle}>
      <Header style={headerStyle}>Header</Header>
      <Layout>
        <Content style={contentStyle}>Content</Content>
        <Sider width="25%" style={siderStyle}>
          Sider
        </Sider>
      </Layout>
      <Footer style={footerStyle}>Footer</Footer>
    </Layout>

    <Layout style={layoutStyle}>
      <Sider width="25%" style={siderStyle}>
        Sider
      </Sider>
      <Layout>
        <Header style={headerStyle}>Header</Header>
        <Content style={contentStyle}>Content</Content>
        <Footer style={footerStyle}>Footer</Footer>
      </Layout>
    </Layout>
  </Flex>
);

export default App;