Cara Membuat Aplikasi React Selepas Penamatan CRA

Hai, rakan pembangun! ?

Baru-baru ini saya sedang mengusahakan projek dan mengetahui bahawa pasukan React telah menamatkan aplikasi create-react-app (CRA) dua tahun lalu. ? Sememangnya, ini membuatkan saya berfikir tentang cara alternatif untuk menyediakan aplikasi React berasaskan JavaScript.

Apabila saya menyemak dokumentasi React rasmi, saya mendapati mereka kini menumpukan pada rangka kerja tindanan penuh seperti Next.js dan Gatsby. Ini adalah hebat jika anda membina aplikasi hujung ke hujung, tetapi ia boleh berlebihan jika anda hanya mahukan projek berasaskan JSX yang mudah. ?️

Sebelum bermula - Apakah yang CRA lakukan? - Create React App (CRA) ialah pakej berkuasa yang mengautomasikan persediaan projek React baharu. Ia mengendalikan semua konfigurasi yang diperlukan dan memasang kebergantungan yang diperlukan, menyediakan pengikat konfigurasi sifar. Ini membolehkan pembangun mula membina aplikasi mereka tanpa perlu risau tentang persediaan alat dan konfigurasi yang kompleks.

Jadi, kini CRA telah ditamatkan, kemudian bagaimana untuk menyediakan Apl JSX tulen? ?
Di sini saya akan berkongsi Dua pilihan popular(Vite dan Webpack) untuk mencipta aplikasi berasaskan pelanggan dengan perpustakaan React. Di bawah Bahagian, Kami akan membandingkan alat ini dan memberi anda arahan persediaan untuk setiap satu. Mari selami! ?‍♂️

⚡ Vite lwn Webpack ?

Vite

Kebaikan:

-Pelayan pembangunan pantas dengan penggantian modul panas segera (HMR).
-Sokongan terbina dalam untuk ciri JavaScript moden.
-Konfigurasi minimum diperlukan untuk bermula.

Keburukan:

-Alat yang lebih baharu, jadi ia mungkin mempunyai kurang sokongan komuniti berbanding Webpack.

Pek web

Kebaikan:

-Sangat boleh dikonfigurasikan dan fleksibel untuk persediaan binaan yang kompleks.
-Ekosistem pemalam yang luas dan sokongan komuniti.
-Rekod prestasi yang terbukti dengan banyak aplikasi berskala besar.

Keburukan:

-Konfigurasi awal boleh menjadi lebih kompleks dan memakan masa.
-Masa binaan yang lebih perlahan berbanding Vite.
-Menyediakan Apl React dengan Vite

Buat Projek Vite Baharu:

1. Jalankan arahan Vite dalam terminal anda

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Mulakan Pelayan Pembangunan:

npm run dev

Konfigurasi Vite:

Vite memerlukan konfigurasi minimum di luar kotak. Persediaan lalai harus berfungsi untuk kebanyakan projek React.
Anda boleh menyesuaikan vite.config.js jika perlu.

Menyediakan Apl React dengan Webpack

1. Mulakan Projek Anda:

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2. Buat Struktur Projek:

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. Konfigurasikan Pek Web:

• Buat fail webpack.config.js:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

4. Konfigurasi Babel:

• Buat fail .babelrc:

npm run dev

5. Mulakan Pelayan Pembangunan:

hidangan pek web npx

Kesimpulan
Kedua-dua Vite dan Webpack menawarkan cara yang berkesan untuk menyediakan aplikasi React tanpa CRA. Vite menyediakan persediaan yang lebih pantas dan ringkas, sesuai untuk projek sederhana dan pembangunan pesat. Webpack, sebaliknya, menawarkan kebolehkonfigurasian yang luas dan ekosistem yang teguh, menjadikannya sesuai untuk projek yang lebih kompleks.

Pilih alat yang paling sesuai dengan keperluan dan keutamaan projek anda. Selamat mengekod!

Atas ialah kandungan terperinci Cara Membuat Aplikasi React Selepas Penamatan CRA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!