Tisztességes figyelmeztetés! Ez nem egy gyors, egyszerű, szakértő által vezérelt ekézés e technológiák felállításáról. Bár a végére sikerrel járunk. Itt arról van szó, hogy dokumentáljuk az effajta munka valós tapasztalatait. Egyes dolgok könnyen működnek, mások nem. Néha az én hibám. Néha a dokumentumok nem egyértelműek. Néha változások történtek a lábunk alatt. Végig kell vívnunk az egészet.
Van egy kis tervünk itt. Amit meg akarunk tenni, egy helyi projekt felpörgetése, amely a következőket használja:
- Reagál: Tegyük fel, hogy SPA-t építünk, és nagyon vágyunk arra, hogy egy alkatrészmodellrel dolgozzunk.
- ReactDOM - Az internetet építjük.
- Webpack: Fejlesztői kiszolgálót, forró modulok újratöltését és a függőségeink termeléshez méltó csomagba vételét szeretnénk.
- Bábel: Lehet, hogy nem lesz sok jövőbeli JavaScript-lefordításra szükségünk, de szükségünk van JSX-re, és a Bábel fordítja le.
- CSS-modulok: Szeretnénk írni néhány elszigetelt komponens-specifikus CSS-t, és ez egy jó módszer arra, hogy a stílusaink a stíluslapokban maradjanak.
Szerencsére, amikor ezt a videót terveztem elkészíteni, megtaláltam Linh Nguyen My „Hogyan készítsünk egy React alkalmazást a semmiből a Webpack 4 segítségével” című cikket. 12,5 ezer taps a Mediumon! Azta! Hozzátettem egy csomó tapsot is, mert úgy tűnik, hogy ez az egyetlen bemutató odakinn, amely megközelíthető módon fedi le ezt a szuper népszerű baráti kombinációt, ami valóban működik.
Ez nem azt jelenti, hogy minden könnyen és simán megy! Rengeteg apró bajba ütközök útközben. Némelyik nekem kövér ujjú dolog. Némelyik rejtélyes hiba jelenik meg, amikor olyan parancsokat futtatunk, amelyeket alig értek. Úgy tűnik, hogy némelyikből hiányzik a funkciók dokumentációja. Ennek ellenére az egészet rendbe hozzuk a végén, és van egy működő projektünk!