Rumah > Artikel > hujung hadapan web > Memahami Aliran dan Struktur Vite dalam Projek Reaksi

Memahami Aliran dan Struktur Vite dalam Projek Reaksi

王林asal: 2024-07-18 20:00:32445semak imbas

Understanding Vite Flow and Structure in a React Project

Apabila bekerja dengan React, Vite menawarkan pengalaman pembangunan yang diperkemas dengan beberapa perbezaan utama daripada persediaan Apl Buat React tradisional. Catatan blog ini akan meneroka struktur projek Vite biasa, memfokuskan pada fail utama seperti index.html, main.jsx dan App.jsx.

1. index.html

Dalam aplikasi React berkuasa Vite, index.html berfungsi sebagai titik permulaan yang kritikal. Tidak seperti Create React App, di mana skrip disuntik secara automatik, Vite memerlukan anda untuk menentukan fail skrip secara terus. Kemasukan eksplisit ini memudahkan pemahaman titik masuk dan kebergantungan aplikasi anda.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- The root div where your React app will be mounted -->
    <script type="module" src="/src/main.jsx"></script>
    <!-- The script tag importing your main JavaScript module -->
  </body>
</html>

Dalam contoh ini, anda boleh melihat teg skrip memuatkan terus main.jsx. Kemasukan langsung ini merupakan perbezaan utama daripada Apl Buat Reaksi, meningkatkan kejelasan dan kawalan ke atas titik masuk projek.

1.1 Kebergantungan

Untuk memastikan fail skrip anda dimuatkan dengan betul, Vite memanfaatkan import modul ES moden. Pastikan package.json anda termasuk kebergantungan yang diperlukan:

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

Memasukkan skrip secara eksplisit dalam fail HTML memastikan susunan pemuatan dan pelaksanaan aplikasi anda yang betul, mengurangkan potensi isu dengan pemuatan skrip.

2. utama.jsx

Fail main.jsx berfungsi sebagai titik masuk untuk aplikasi React anda. Fail ini bertanggungjawab untuk memaparkan komponen akar ke dalam DOM. Ia biasanya fail yang dinyatakan dalam atribut src bagi teg skrip dalam index.html anda.

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Dalam fail ini, ReactDOM.createRoot digunakan untuk menjadikan komponen Apl ke dalam elemen HTML dengan akar id. Pendekatan pemaparan langsung ini, tanpa memegang sebarang elemen akar buat sementara waktu, memperkemaskan proses, menjelaskan tempat aplikasi bermula dan komponen yang terlibat.

3. App.jsx

Fail App.jsx mengandungi takrifan komponen Apl utama anda. Komponen ini berfungsi sebagai akar pokok komponen React anda.

import React from 'react';

const App = () => {
  return (
    <div className="App">
      <h1>Hello, Vite and React!</h1>
    </div>
  );
};

export default App;

Dalam fail ini, anda mentakrifkan struktur dan gelagat utama aplikasi anda. Komponen Apl ialah tempat anda akan membina UI dan fungsi utama, sama seperti yang anda lakukan dalam mana-mana projek React yang lain.

Bahan Tambahan dan Amalan Terbaik

4. Menggunakan CSS Tailwind dengan Vite

CSS Tailwind boleh disepadukan dengan mudah ke dalam projek Vite untuk penggayaan yang mengutamakan utiliti.

Pasang Tailwind CSS:

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

Konfigurasikan Tailwind:

Kemas kini tailwind.config.js dengan laluan khusus projek anda:

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

Sertakan Tailwind dalam CSS anda:

Kemas kini index.css untuk memasukkan pangkalan Tailwind, komponen dan utiliti:

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

5. Penggantian Modul Panas (HMR)

Vite menawarkan HMR di luar kotak, membolehkan anda melihat perubahan dalam masa nyata tanpa memuat semula halaman.

6. Pembolehubah Persekitaran

Vite menggunakan fail .env untuk mengurus pembolehubah persekitaran. Cipta fail .env pada akar projek anda dan tentukan pembolehubah anda:

VITE_API_URL=https://api.example.com

Akses pembolehubah ini dalam aplikasi anda menggunakan import.meta.env:

const apiUrl = import.meta.env.VITE_API_URL;

7. Proses Binaan Dioptimumkan

Arahan bina Vite (vite build) menggunakan Rollup di bawah hud untuk menghasilkan aset statik yang sangat dioptimumkan untuk pengeluaran. Ini memastikan permohonan anda pantas dan cekap.

Kesimpulan

Bekerja dengan Vite dalam projek React menawarkan pengalaman pembangunan yang diperkemas dan cekap. Memahami aliran dan struktur fail utama seperti index.html, main.jsx dan App.jsx boleh meningkatkan proses pembangunan anda dengan ketara. Dengan faedah tambahan penyepaduan CSS Tailwind, HMR dan binaan yang dioptimumkan, Vite menonjol sebagai alat moden yang berkuasa untuk pembangun React.

Dengan memanfaatkan ciri dan amalan terbaik ini, anda boleh mencipta aplikasi berprestasi tinggi, berskala dan boleh diselenggara dengan mudah.

Atas ialah kandungan terperinci Memahami Aliran dan Struktur Vite dalam Projek Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json css html Static define for include using Attribute JS dom this ui Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Produk MCA atau SAAS menjelang 5 febArtikel seterusnya：Produk MCA atau SAAS menjelang 5 feb

Artikel berkaitan

Lihat lagi