使用 React 時，Vite 提供了簡化的開發體驗，與傳統的 Create React App 設定有一些關鍵差異。本篇部落格文章將探討典型Vite專案的結構，重點在於index.html、main.jsx、App.jsx等關鍵檔案。

1.index.html

在 Vite 支援的 React 應用程式中，index.html 是一個關鍵的起點。與 Create React App 自動注入腳本不同，Vite 要求您直接指定腳本檔案。這種顯式包含簡化了對應用程式的入口點和依賴項的理解。

在這個例子中，你可以看到script標籤直接載入main.jsx。這種直接包含是與 Create React App 的主要區別，增強了對專案入口點的清晰度和控制。

1.1 依賴關係

為了確保您的腳本檔案正確加載，Vite 利用現代 ES 模組導入。確保您的 package.json 包含必要的依賴：

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

在 HTML 檔案中明確包含腳本可確保應用程式的正確載入和執行順序，從而減輕腳本載入的潛在問題。

2.main.jsx

main.jsx 檔案充當 React 應用程式的入口點。該檔案負責將根元件渲染到 DOM 中。它通常是在index.html 中腳本標記的src 屬性中指定的檔案。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

在此文件中，ReactDOM.createRoot 用於將 App 元件渲染到具有 id root 的 HTML 元素中。這種直接渲染方法無需臨時保留任何根元素，從而簡化了流程，使應用程式從何處啟動以及涉及哪些元件變得清晰可見。

3.應用程式.jsx

App.jsx 檔案包含主應用程式元件的定義。該元件作為 React 元件樹的根。

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

在此文件中，您定義應用程式的主要結構和行為。 App 元件是您建立主要 UI 和功能的地方，就像在任何其他 React 專案中一樣。

附加資料和最佳實踐

4. 將 Tailwind CSS 與 Vite 結合使用

Tailwind CSS 可以輕鬆整合到 Vite 專案中，實現實用優先的樣式。

1. 安裝 Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. 配置 Tailwind:

使用專案的特定路徑更新 tailwind.config.js：

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. 在 CSS 中包含 Tailwind：

更新index.css以包含Tailwind的基礎、元件和實用程式：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 模組熱更換（HMR）

Vite提供開箱即用的HMR，讓您無需刷新頁面即可即時看到變化。

6. 環境變數

Vite使用.env檔來管理環境變數。在專案的根目錄中建立一個 .env 檔案並定義變數：

VITE_API_URL=https://api.example.com

使用 import.meta.env:
在應用程式中存取這些變量

const apiUrl = import.meta.env.VITE_API_URL;

7. 優化建置流程

Vite 的建置命令（vite build）在底層使用 Rollup 來產生高度最佳化的靜態資產以用於生產。這可確保您的應用程式快速且有效率。

結論

在React專案中使用Vite可以提供精簡且有效率的開發體驗。了解 index.html、main.jsx 和 App.jsx 等關鍵檔案的流程和結構可以顯著增強您的開發過程。憑藉 Tailwind CSS 整合、HMR 和優化建置的附加優勢，Vite 成為 React 開發人員的現代、強大工具。

透過利用這些功能和最佳實踐，您可以輕鬆建立高效能、可擴展且可維護的應用程式。