Apakah Proses Bina dalam React (atau dalam mana-mana rangka kerja untuk perkara itu? )

[ Teknologi ]: ReactJS – Artikel #1

---

Rangka Kerja memudahkan Pembangunan untuk Jurutera dan ini adalah percubaan saya untuk hanya berfungsi di Sebalik Tabir ReactJS.

---

Masa cerita

Saya telah mula menggunakan ReactJS. Yup, saya betul-betul ada. Ia seperti mimpi yang ditangguhkan selama 2 tahun apabila saya berminat dengan Reka Bentuk UI / UX dan Pembangunan Hadapan sebelum saya menyelami Sains Data. ( Saya masih bersemangat seperti 2 tahun lalu.)

Saya kini seorang Pelatih di sebuah syarikat (yang menggelarkan diri mereka sebagai permulaan kerana, budayanya lebih kepada pemula berbanding syarikat ) dan hari ini, pada hari pertama saya, saya langsung tiada apa-apa untuk dilakukan sejak itu, TL saya ( Ketua Pasukan ) tidak datang ke pejabat kerana dia sibuk dengan beberapa mesyuarat.

Adakah saya membiarkan masa dia terlepas dari tangan saya. Sama sekali tidak.
Kebarangkalian saya mendapat tugas / projek untuk menguji kemahiran analisis Data saya adalah agak rendah. Oleh itu saya terpaksa mengotorkan tangan saya dalam pembangunan. Saya dapat merasakan bahawa ini mungkin masa terbaik untuk bermula dengan ReactJS.

---

Apakah React?

React ialah kata kerja ( pun intended ). Tetapi dalam konteks teknologi pembangunan, "Perpustakaan untuk web dan antara muka pengguna asli", menuntut tapak web rasmi ReactJS.

Sekarang jika anda telah menggunakan ekosistem pembangunan, anda pasti pernah mendengar tentang 2 pesaing lain atau lebih tepatnya adik-beradik ReactJS, iaitu Angular dan VueJS.

Berikut ialah perbandingan ringkas 3 daripada teknologi Front-End yang paling popular.

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

Konsep Teras Pustaka memfokuskan pada UI Rangka kerja lengkap Rangka kerja progresif Pengikatan Data Aliran data sehala Pengikatan data dua hala Pengikatan data dua hala (pilihan) Struktur Komponen Komponen tersuai Arahan dan komponen Komponen Keluk Pembelajaran Sederhana Cam Lembut Prestasi Tinggi (DOM Maya) Boleh menjadi lebih perlahan kerana pengikatan data dua hala Tinggi (Perenderan dioptimumkan) Kebolehskalaan Cemerlang, sesuai untuk apl berskala besar Sokongan kukuh untuk apl perusahaan berskala besar Skala yang baik, tetapi mungkin memerlukan perpustakaan tambahan untuk projek yang kompleks Komuniti dan Ekosistem Komuniti terbesar, ekosistem yang kaya Komuniti besar, ekosistem yang kukuh Komuniti yang semakin berkembang, ekosistem yang baik Fleksibiliti Tinggi, boleh digunakan dengan perpustakaan/rangka kerja lain Kurang fleksibel kerana struktur tegar Fleksibel, boleh digunakan secara berperingkat

---

Mengapa kita harus menggunakan ReactJS apabila kita mempunyai HTML dan JS biasa?

Kekurangan HTML Biasa dan JS.

Berikut ialah masalah yang anda akan hadapi jika anda menggunakan:

Kesukaran Mengekalkan Aplikasi Besar:

• HTML biasa dan JS tidak mempunyai pendekatan berstruktur untuk menyusun kod.

• Aplikasi yang kompleks boleh membawa kepada kusut logik dan manipulasi UI dalam pendengar acara dan fail skrip.

• Ini menjadikannya sukar untuk memahami, mengubah suai dan menyahpepijat kod semasa aplikasi berkembang.

Manipulasi DOM yang tidak cekap:

• Memanipulasi DOM dalam JS secara langsung boleh menjadi tidak cekap.

• Setiap perubahan keadaan mungkin mencetuskan pemaparan semula lengkap struktur HTML, walaupun untuk kemas kini UI kecil.

• Ini boleh menyebabkan kesesakan prestasi apabila kerumitan aplikasi meningkat.

Kebolehgunaan Semula Terhad:

• Membina komponen UI boleh guna semula dengan HTML biasa dan JS boleh menyusahkan.

• Anda mungkin akhirnya menyalin dan menampal coretan kod merentas bahagian berlainan aplikasi anda.

• Ini menyukarkan untuk mengekalkan konsistensi dan melaksanakan perubahan dengan cekap.

Pengurusan Negeri yang Kompleks:

• Menguruskan keadaan aplikasi (data yang mengawal tingkah laku UI) menjadi sukar dengan HTML biasa dan JS.

• Menjejaki perubahan data dan kemas kini UI yang sepadan boleh menjadi kucar-kacir dan terdedah kepada ralat, terutamanya untuk aliran data yang kompleks.

---

Bagaimana ReactJS datang ke Rescue.

ReactJS menangani batasan ini dengan menawarkan seni bina berasaskan komponen, DOM maya untuk kemas kini yang cekap dan ekosistem yang kaya untuk mengurus UI yang kompleks dan keadaan aplikasi.

Kebolehselenggaraan yang Diperbaiki:

• Seni bina berasaskan komponen dan pendekatan deklaratif React membawa kepada pangkalan kod yang lebih bersih dan boleh diselenggara, terutamanya untuk aplikasi berskala besar.

Prestasi Dipertingkat:

• DOM maya dan mekanisme pemaparan yang cekap dalam React menyumbang kepada pengalaman pengguna yang lebih lancar dan pantas, walaupun untuk aplikasi web yang kompleks.

Kebolehgunaan Kod:

• Model komponen React menggalakkan kebolehgunaan semula kod, membolehkan anda membina komponen UI modular yang boleh dikongsi dan digabungkan dengan mudah merentas aplikasi anda.

---

Perbezaan menjadikan Perbezaan.

Apabila saya mencipta komponen pertama saya, saya bertanya kepada diri sendiri, "Apakah sebenarnya" ini? Adakah HTML atau JS?

Saya telah membenamkan JS ke dalam HTML melalui elemen atau unsur. Tetapi menulis HTML di dalam fail JS berasa pelik atau agak berbeza.

Saya mencuba dan menulis HTML di dalam fail JS projek bukan React dan meneka perkara yang tidak berjaya.

Kemudian saya mengetahui bahawa sintaks khas ini ( HTML seperti dalam fail JS ) dipanggil sebagai JSX JavaScript XML dan merupakan sambungan JavaScript.

Jika kod yang difahami oleh penyemak imbas akhirnya adalah HTML biasa dan JS, ini bermakna terdapat beberapa operasi yang dilakukan pada JSX ( gula sintaktik untuk membina aplikasi kompleks dengan mudah ) yang kami tulis.

Operasi Behind The Scenes ini sendiri dipanggil Proses Bina.

Idea peringkat tinggi proses binaan adalah untuk mengubah kod pembangunan anda kepada versi yang dioptimumkan sedia untuk digunakan dalam persekitaran pengeluaran.

Walaupun alat dan konfigurasi tertentu mungkin berbeza-beza bergantung pada susunan teknologi, konsep dan matlamat umum proses binaan digunakan secara universal merentas pembangunan web bahagian hadapan.

---

Apakah Proses Bina dalam ReactJS?

Kami telah mengetahui bahawa idea peringkat tinggi tetap sama tetapi beberapa fasa dalam Proses Binaan Reaksi adalah seperti berikut:

1. Himpunan:
   • Bayangkan aplikasi React anda terdiri daripada banyak fail JavaScript, helaian gaya CSS dan kemungkinan aset imej.

Pengikat seperti Webpack mengambil semua fail berasingan ini dan menggabungkannya menjadi bilangan berkas yang dioptimumkan yang lebih kecil.

1. Transpilasi:

   • Transpilasi melibatkan penukaran kod moden (JSX) ini kepada JavaScript biasa (ES5 atau versi yang serasi) yang boleh dijalankan pada julat penyemak imbas yang lebih luas.

2. Minifikasi:

   • Minification mengecilkan saiz fail kod yang digabungkan dengan mengalih keluar aksara yang tidak diperlukan seperti ruang putih, ulasan dan nama pembolehubah/fungsi yang panjang.

3. Pengoptimuman:

   • Proses binaan mungkin melibatkan pengoptimuman tambahan seperti gegaran pokok, yang mengalih keluar kod yang tidak digunakan daripada himpunan terakhir anda.

4. Mod Pengeluaran:

   • Mod pembangunan menawarkan ciri seperti peta sumber (untuk penyahpepijatan yang lebih mudah) dan mesej ralat terperinci.

Sebaliknya, mod pengeluaran memfokuskan pada pengoptimuman dengan mendayakan pengurangan, gegaran pokok dan peningkatan prestasi lain.

---

react-scripts: Projek Serigala React

react-scripts ialah pakej dalaman yang digunakan oleh Create React App (CRA) untuk mengendalikan fungsi belakang tabir dalam projek React.

Ia tidak berinteraksi secara langsung dengan pembangun pada kebanyakan masa, tetapi ia penting untuk kecekapan pembangunan.

Berikut ialah skrip reaksi yang bertanggungjawab:

• Penggabungan dan Transpilasi
• Pelayan Pembangunan dan Muat Semula Panas
• Ujian
• Bangunan untuk Pengeluaran

3 daripada tugas paling penting yang dilakukan oleh skrip reaksi adalah seperti berikut yang akan kami fahami dengan lebih terperinci:

1. Himpunan:

   • Bayangkan aplikasi React anda terdiri daripada banyak fail JavaScript, helaian gaya CSS dan kemungkinan aset imej.
   • Pengikat seperti Webpack mengambil semua fail berasingan ini dan menggabungkannya menjadi bilangan berkas yang dioptimumkan yang lebih kecil.
   • Ini mengurangkan bilangan permintaan HTTP yang perlu dibuat oleh penyemak imbas, meningkatkan kelajuan pemuatan tapak web.

2. Transpilasi:

   • Ciri JavaScript moden seperti sintaks JSX yang digunakan dalam React mungkin tidak difahami oleh pelayar lama.
   • Transpilasi melibatkan penukaran kod moden ini kepada JavaScript biasa (ES5 atau versi yang serasi) yang boleh dijalankan pada julat penyemak imbas yang lebih luas.
   • Alat seperti Babel biasanya digunakan untuk transpilasi dalam React.

3. Minifikasi:

   • Minifikasi, juga dikenali sebagai pengecilan, ialah teknik yang digunakan pada kod untuk mengurangkan saiz fail tanpa menjejaskan fungsinya.
   • Ini amat berfaedah untuk aplikasi React yang digunakan untuk pengeluaran, kerana saiz fail yang lebih kecil diterjemahkan kepada masa pemuatan yang lebih cepat untuk halaman web.

Begini cara minifikasi berfungsi:

1. Mengalih Keluar Aksara Yang Tidak Diperlukan:

   • Minifier menghapuskan aksara ruang putih seperti ruang, baris baharu dan tab daripada kod. Ini mungkin kelihatan tidak penting untuk fail kecil, tetapi dalam projek React yang besar, ia boleh menyebabkan pengurangan saiz yang ketara.

2. Memendekkan Pembolehubah dan Nama Fungsi:

   • Minifier selalunya menggantikan nama pembolehubah deskriptif dan fungsi dengan nama huruf tunggal yang lebih pendek. Walaupun ini menjadikan kod kurang boleh dibaca oleh manusia, ia mengurangkan saiz fail dengan ketara.

3. Mengalih Keluar Komen:

   • Komen adalah penting untuk mendokumentasikan dan memahami kod semasa pembangunan. Walau bagaimanapun, dalam pengeluaran, mereka tidak diperlukan untuk kod berfungsi. Minifier biasanya mengalih keluar ulasan untuk meminimumkan lagi saiz fail.

---

Kesimpulan

Ini adalah pembelajaran hanya 1 hari yang diringkaskan.

Saya akan dapat membina lebih daripada ini, jika saya menggunakan alat GenAI. Saya melakukan alatan GenAI sama ada tetapi untuk tujuan pembelajaran.

Saya percaya dengan mengemukakan set soalan yang betul ini dan kemudian memahami konsep secara mendalam akan membezakan anda daripada orang yang mengautomasikan pembangunan.

Dalam temu bual, pemahaman dan kejelasan konsep yang dicari, bukannya kelajuan pengekodan anda kerana, sama ada ia akan diautomatikkan pada satu tahap.

Oleh itu, satu-satunya X-Factor anda sebagai kejuruteraan perisian yang hebat terletak pada pengetahuan anda untuk sekurang-kurangnya mengesahkan dan mengesahkan sama ada hasil model GenAI memenuhi keperluan teknologi anda atau tidak.

Jika anda berpendapat bahawa kandungan saya berharga atau mempunyai sebarang maklum balas,
izinkan saya dengan menghubungi pemegang media sosial berikut yang anda akan temui dalam profil saya dan yang berikut:

LinkedIn: https://www.linkedin.com/in/shrinivasv73/

Twitter (X): https://twitter.com/shrinivasv73

Instagram: https://www.instagram.com/shrinivasv73/

E-mel: shrinivasv73@gmail.com

? Ini ialah Shrinivas, Menandatangani Jawatan!

---

Atas ialah kandungan terperinci Apakah Proses Bina dalam React (atau dalam mana-mana rangka kerja untuk perkara itu? ). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!