# 170: Saksikan Amatir Memutar React + Babel + Webpack + Proyek Modul CSS - Trik CSS

Anonim

Peringatan yang adil! Ini bukanlah cara cepat, langsung, dan digerakkan oleh ahli tentang cara menyiapkan teknologi ini. Meskipun, pada akhirnya, kami berhasil menjalankan semuanya. Ini tentang mendokumentasikan pengalaman dunia nyata melakukan pekerjaan semacam ini. Beberapa hal bekerja dengan mudah, beberapa tidak. Terkadang itu salahku. Terkadang dokumentasinya tidak jelas. Terkadang perubahan terjadi di bawah kaki kita. Kami harus berjuang melalui itu semua.

Kami punya rencana kecil di sini. Apa yang ingin kami lakukan adalah menjalankan proyek lokal yang menggunakan:

  1. Bereaksi: Katakanlah kita sedang membangun SPA dan sangat ingin bekerja dengan model komponen.
  2. ReactDOM - Kami sedang membangun untuk web.
  3. Webpack: Kami menginginkan server dev, hot module reload, dan cara untuk menggabungkan dependensi kami dengan cara yang layak produksi.
  4. Babel: Kita mungkin tidak membutuhkan banyak kompilasi JavaScript di masa depan, tapi kita memang membutuhkan JSX, dan Babel adalah yang mengkompilasinya.
  5. Modul CSS: Kami ingin menulis beberapa CSS khusus komponen yang terisolasi dan ini adalah cara yang bagus untuk melakukannya di mana gaya kami tetap berada di stylesheet.

Untungnya, saat saya berencana membuat video ini, saya menemukan artikel "Cara Membuat Aplikasi React dari Awal Menggunakan Webpack 4" oleh Linh Nguyen My. 12.5K tepuk di Medium! Wow! Saya menambahkan banyak tepukan ke dalamnya juga, karena tampaknya itu satu-satunya tutorial di luar sana yang benar-benar mencakup kombinasi teman yang sangat populer ini dengan cara yang dapat didekati yang benar-benar berfungsi.

Itu tidak berarti semuanya berjalan dengan mudah dan lancar! Saya mengalami banyak masalah kecil di sepanjang jalan. Beberapa di antaranya adalah hal-hal yang membuat saya gemuk. Beberapa di antaranya adalah kesalahan misterius yang muncul saat kami menjalankan perintah yang hampir tidak saya mengerti. Beberapa di antaranya tampaknya kehilangan dokumentasi tentang fitur. Namun demikian, kami menyelesaikan semuanya pada akhirnya dan memiliki proyek yang berfungsi!