【无,mi】React18+TS+Vite 从0到1自定义组件库 实战复杂项目

React18+TS+Vite 从0到1自定义组件库 实战复杂项目

核心代码，注释必读

// download: 3w ukoou com

一、准备工作

首先，确保电脑上已安装Node.js和npm包管理器，然后使用以下命令创建一个新的React项目：

npx create-react-app my-components --template=typescript

安装Vite：

npm install vite --save-dev

安装一些必要的依赖：

npm install react react-dom @types/react @types/react-dom --save

在根目录下创建src文件夹，接着在src文件夹下创建一个Button.tsx文件，用来作为自定义组件库的第一个组件。

二、开发自定义组件

使用以下代码开发一个Button组件：

import React, { FC } from 'react';

interface ButtonProps {
  onClick?: () => void;
}

export const Button: FC<ButtonProps> = ({
  onClick = () => alert('Default onClick'),
  children
}) => {
  return (
    <button onClick={onClick}>{children}</button>
  );
}

这个Button组件只有一个onClick方法，当它被触发时，它将弹出一个默认的警报框。

三、整合组件库

接下来，我们需要将组件库整合到Vite中。在项目根目录下，创建vite.config.ts文件，以下是文件内容：

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.tsx'),
      name: 'my-components',
      fileName: (format) => `my-components.${format}.js`,
    },
    rollupOptions: {
      // 使外部的库变成外部依赖
      external: ['react'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          react: 'React',
        },
      },
    },
  },
  plugins: [reactRefresh()],
});

这个配置告诉Vite它应该把库构建到哪里（my-components.umd.js），这个库叫什么（my-components），然后告诉rollup它不应该把React打包到我的库里面，而是让用户在使用库时自己提供React。

接着，为了能够正常运行和开发，我们还需要做一些调整。首先，创建一个index.tsx文件，以下是文件内容：

export { Button } from './Button';

这个文件负责将所有的组件暴露出来。然后更新App.tsx文件：

import { Button } from 'my-components';

function App() {
  return (
    <div className="App">
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

现在我们已经准备好完整的集成了，使用以下命令启动服务：

npm start

四、测试自定义组件

在浏览器中打开http://localhost:3000，您应该能够看到一个Click Me按钮。如果您单击该按钮，应该会弹出一个警报框。

五、应用自定义组件

接下来我们来思考一个更加实际的使用场景，实现一个登录页面。

首先，创建一个LoginForm.tsx文件，以下是文件内容：

import React, { FC } from 'react';
import { Button } from 'my-components';

interface LoginFormProps {
  doLogin: (name: string, password: string) => void;
}

export const LoginForm: FC<LoginFormProps> = ({ doLogin }) => {
  const [name, setName] = React.useState('');
  const [password, setPassword] = React.useState('');

  const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  const onPasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const onButtonClick = () => {
    doLogin(name, password);
  };

  return (
    <div>
      <input type="text" value={name} onChange={onNameChange} />
      <input type="password" value={password} onChange={onPasswordChange} />
      <Button onClick={onButtonClick}>Login</Button>
    </div>
  );
};

接着，修改App.tsx文件，以下是文件内容：

import { LoginForm } from './LoginForm';

function App() {
  const handleLogin = (name: string, password: string) => {
    alert(`User ${name} logged in with password ${password}`);
  };

  return (
    <div className="App">
      <LoginForm doLogin={handleLogin} />
    </div>
  );
}

export default App;

现在，在浏览器中打开http://localhost:3000，您应该能够看到一个登录表单，输入用户名和密码后单击Login按钮即可触发alert。

六、总结

本文介绍了如何使用React18+TS+Vite搭建自定义组件库以及如何在实战中应用复杂项目。通过学习本文，您应该了解如何开发React组件、整合Vite构建您的自定义组件库以及如何将自定义组件应用到实际项目中。此外，本文还介绍了如何使用TypeScript增强React的类型安全性。希望这些知识对您有帮助。