前端开发：避免重复造轮子，选用成熟组件库

分析与总结：这种手动编写方式就像在重复造轮子，每个组件都要单独处理样式，效率低且难以维护。

正确姿势

1. Ant Design

// 安装依赖
// npm install antd

// 基本使用
import React from 'react';
import { Button, Input, Card, Form, Table, Modal, notification } from 'antd';
import 'antd/dist/reset.css';

function App() {
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const showModal = () => setIsModalVisible(true);
  const handleOk = () => {
    setIsModalVisible(false);
    notification.success({ message: '成功', description: '操作成功' });
  };
  const handleCancel = () => setIsModalVisible(false);

  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
    { title: '操作', key: 'action', render: () => <Button type="primary">编辑</Button> },
  ];

  const data = [
    { key: '1', name: '张三', age: 32 },
    { key: '2', name: '李四', age: 42 },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card title="用户管理">
        <Button type="primary" onClick={showModal} style={{ marginBottom: '20px' }}>添加用户</Button>
        <Table columns={columns} dataSource={data} />
      </Card>
      <Modal title="添加用户" open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form>
          <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item = = =  ,  '' }]}>
            
          
        
      
    
  );
}
export default App;

2. Material UI

// 安装依赖
// npm install @mui/material @emotion/react @emotion/styled

// 基本使用
import React from 'react';
import { Button, TextField, Card, CardContent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Modal, Box } from '@mui/material';

function App() {
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState('');

  const showModal = () => setIsModalVisible(true);
  const handleClose = () => setIsModalVisible(false);
  const handleSubmit = () => {
    console.log('提交:', { name, age });
    setIsModalVisible(false);
  };

  const rows = [
    { id: 1, name: '张三', age: 32 },
    { id: 2, name: '李四', age: 42 },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Button variant="contained" color="primary" onClick={showModal} sx={{ mb: 2 }}>添加用户</Button>
          <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>姓名</TableCell>
                  <TableCell>年龄</TableCell>
                  <TableCell>操作</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    {row.name}
                    {row.age}
                    
                      编辑
                    
                  
                ))}
              
            
          
        
      
      
        
          添加用户
           setName(e.target.value)} />
           setAge(e.target.value)} />
          
            取消
            提交
          
        
      
    
  );
}
export default App;

3. Tailwind CSS + Shadcn UI

// 安装依赖
// npm install -D tailwindcss postcss autoprefixer
// npx tailwindcss init -p
// npx shadcn@latest init

// 配置 Tailwind CSS (tailwind.config.js)
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

// 基本使用
import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@/components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';

function App() {
  const rows = [
    { id: 1, name: '张三', age: 32 },
    { id: 2, name: '李四', age: 42 },
  ];

  return (
    <div className="p-4">
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>用户管理</CardTitle>
        </CardHeader>
        <CardContent>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="mb-4">添加用户</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>添加用户</DialogTitle>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">姓名</Label>
                  <Input placeholder= />
                
                
                  年龄
                  
                
              
              
                取消
                提交
              
            
          
          
            
              
                
                  姓名
                  年龄
                  操作
                
              
              
                {rows.map((row) => (
                  
                    {row.name}
                    {row.age}
                    
                      编辑
                    
                  
                ))}
              
            
          
        
      
    
  );
}
export default App;

分析与总结：这才是前端组件库的正确用法，统一的样式，丰富的组件，开发效率高，再也不用担心重复造轮子的问题了。