类似npm create vue@latest是脚手架工具，虽然很方便，但容易导致版本不一致。因此，有时创建文件，比如react，只需要创建html文件，然后在文件里导入,对应的js文件，即js库，然后直接写react代码即可。

antd可以用使用npm安装，

1	npm install antd --save

也可以使用“浏览器导入”。

React包管理

react默认使用yarn进行包管理，但也可用npm

yarn安装

1	npm i -g yarn

yarn测试

yarn -v

yarn初始化

1
2
3

yarn init -y
yarn add -D XXX #安装某个库，类似npm i 
npx create-react-app <项目名>

可以使用next.js等react框架结合ant组件，参照react+ant，但是这里不用它，而是使用简单的create-react-app:

Create React App是一个React官方提供的脚手架工具，用于快速创建React应用程序。

react学习

使用npx create-react-app antd-demo与create-react-app antd-demo命令在功能上没有区别，它们都用于创建一个新的React应用程序。具体分析如下：

npx create-react-app antd-demo：这个命令利用了npx，它是npm的一个包执行器，可以运行一个命令而无需先全局安装它。npx会临时下载create-react-app的最新版本并使用它来创建项目，然后删除它。这样做的好处是你不需要担心全局安装了不同版本的Create React App，每次运行时都能确保是最新的版本。

create-react-app antd-demo：这个命令假设create-react-app已经全局安装在你的系统上。如果create-react-app的全局版本不是最新的，那么创建的项目可能不会包含CRA的最新特性和改进。此外，如果你有多个版本的Create React App全局安装，可能会出现版本冲突的问题。
总结来说，使用npx create-react-app antd-demo是推荐的方式，因为它确保了每次创建的新项目都是使用Create React App的最新版本，并且避免了全局安装带来的问题。

开始编程

# 使用typescript语法模板创建一个react程序
npx create-react-app antd-demo --template typescript
cd antd-demo

# 安装antd组件
npm install antd --save

# 可选运行：
npm start #main used for dev.

npm run build

npm test

Antd理解

示例混合程序,app.tsx

import React, { useState } from 'react';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';//导入图标
import type { MenuProps } from 'antd';//导入菜单传递props
import { Menu } from 'antd';//导入菜单

//定义const常量，items常量名，：MenuProps['items'] 是变量类型，等号后面是列表，每个元素大致都类似{label，key，ico字典}
const items: MenuProps['items'] = [
  {
    label: '标签1',//展示的标签名
    key: 'mail',//？？
    icon: <MailOutlined />,//图标，由ant-design导入
  },
  {
    label: 'Navigation Two',
    key: 'app',
    icon: <AppstoreOutlined />,
    disabled: true,//表示不可点击
  },
  {
    label: 'Navigation Three - Submenu',
    key: 'SubMenu',
    icon: <SettingOutlined />,
    children: [
      {
        type: 'group',//类型：展开形式的列表
        label: 'Item 1',//标签名
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: (//label也可以是用括号包裹的标签元素，比如超链接
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        Navigation Four - Link
      </a>
    ),
    key: 'alipay',
  },
];
//其它参见https://ant.design/components/menu-cn#menuitemtype的api文档


// 一个菜单需要完成两个函数，第一个函数是当焦点在一个选项时，第二个函数是点击某个选项时。
const App: React.FC = () => {
  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };

  // menu类api，点击 MenuItem 调用onClick函数，selectedKeys是当前选中的菜单项 key数组
  return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
};

export default App;

周边learning

React 目录结构

这是一个典型的React项目的目录结构，下面是每个文件和文件夹的作用：

README.md: 项目的说明文档，通常包含项目介绍、安装和使用指南等信息。
package.json: 项目的配置文件，包含了项目的元数据、依赖关系以及各种配置信息。
public: 存放静态资源（如图片、图标等）的目录。
- favicon.ico: 网站在浏览器标签页上显示的小图标。
- index.html: 项目的入口HTML文件，用于渲染React应用程序。
src: 存放源代码的目录。
- App.css: 应用的主样式表文件。
- App.js: 应用的主要JavaScript文件，通常包含根组件和其他子组件的定义。
- App.test.js: 对App.js中的代码进行单元测试的文件。
- index.css: 全局样式表文件，应用于整个应用程序。
- index.js: 项目的入口JavaScript文件，通常包含根组件的渲染逻辑。
- logo.svg: 应用程序的Logo图标。
yarn.lock: Yarn包管理器生成的锁定文件，用于确保项目中使用的依赖包版本一致。

npm run eject

npm run eject 命令的主要作用是将 Create React App 项目的配置文件和依赖项暴露出来，使得开发者可以进行高度自定义的修改。具体如下：

暴露配置文件：执行 npm run eject 后，原本隐藏的配置文件如 webpack、Babel 等会被“弹出”到项目中，这样开发者就可以直接对这些文件进行编辑。
提供更大的灵活性：通过这个命令，项目的配置不再受到 Create React App 的限制，开发者可以根据自己的需求对项目进行更深层次的定制。
不可逆的操作：需要注意的是，npm run eject 是一个单向操作，一旦执行，就无法回到之前的状态。如果想要重置项目，只能重新创建一个新的 Create React App 项目。
适合有特定需求的场景：如果项目中需要使用除 sass 以外的预处理器，或者需要配置一些默认路径等，这时候就需要手动修改 webpack 的配置，npm run eject 就成为了一个必要的步骤。

总结来说，npm run eject 是为了让开发者能够完全控制项目的配置文件，进行个性化定制。然而，这也意味着失去了 Create React App 提供的便捷性和一致性，因此在执行此命令前应当仔细考虑。

react以及ant