使用Vite创建React初始化项目

一、初始化最终目录如下

react-app/

├── node_modules #包文件

├── public/ # 静态资源

├── src/ # 源代码目录

│ ├── App.jsx

│ └── main.jsx # JS入口文件

├── index.html # Vite的入口文件

├── package.json

└── vite.config.js

二、操作步骤

1. 创建文件react-app

2. 切换到cd react-app目录并初始化npm init -y

3. 安装制定版本react：npm install react@18.2.0 react-dom@18.2.0

4. 安装依赖Vite：npm install --save-dev vite@4.4.0 @vitejs/plugin-react@4.0.0

5. 创建Vite配置文件：

   echo 'import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   
   export default defineConfig({
     plugins: [react()],
     server: {
       open: true,
       port: 3000
     }
   });' > vite.config.js

6. 创建index.html

   echo '<!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>React 学习环境</title>
     </head>
     <body>
       <div id="root"></div>
       <script type="module" src="/src/main.jsx"></script>
     </body>
   </html>' > /index.html

7. 创建scr目录、App组件和JS入口文件

   # - 创建 React 组件
   mkdir src
   echo 'function App() {
     return (
       <div>
         <h1>React {React.version} 学习环境</h1>
         <p>成功运行！现在可以开始学习 React。</p>
       </div>
     );
   }
   
   export default App;' > src/App.jsx
   
   # - 创建入口文件
   echo 'import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App.jsx";
   
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );' > src/main.jsx

8. 创建静态文件夹public

   mkdir public