# 170: Oglejte si amaterski projekt Spin Up a React + Babel + Webpack + CSS Modules - CSS-triki

Anonim

Pošteno opozorilo! To ni hiter, enostaven, strokovno usmerjen postopek, kako nastaviti te tehnologije. Čeprav do konca vse skupaj uspešno opravimo. Tu gre za dokumentiranje resničnih izkušenj s takšnim delom. Nekatere stvari delujejo enostavno, nekatere ne. Včasih sem kriv jaz. Včasih so dokumenti nejasni. Včasih se nam zgodijo spremembe pod nogami. Vse to se moramo boriti.

Tu imamo majhen načrt. Želimo narediti lokalni projekt, ki uporablja:

  1. Reagirajte: Recimo, da gradimo SPA in si močno želimo sodelovati z modelom komponent.
  2. ReactDOM - gradimo za splet.
  3. Webpack: Želimo strežnik za razvijalce, vnovično nalaganje modulov in način za združevanje odvisnosti na produkcijsko vreden način.
  4. Babel: Morda ne bomo potrebovali veliko prihodnjega prevajanja JavaScript, vendar potrebujemo JSX in Babel je tisto, kar ga sestavi.
  5. Moduli CSS: Napisati želimo nekaj izoliranih CSS-jev, specifičnih za posamezne komponente, in to je lep način, da to naredimo tam, kjer naši slogi ostanejo v tabelah slogi.

Na srečo, ko sem nameraval narediti ta video, sem našel članek »Kako ustvariti aplikacijo React iz nič s pomočjo Webpack 4« avtorja Linh Nguyen My. 12,5K ploska na srednjem! Vau! Tudi temu sem dodal množico ploskev, ker se zdi, da je to edina vadnica, ki dejansko na dostopen način pokriva to super priljubljeno kombinacijo prijateljev, ki dejansko deluje.

To ne pomeni, da gre vse enostavno in gladko! Med potjo naletim na veliko težav. Nekatere stvari so moje debele prste. Nekatere skrivnostne napake se pojavijo, ko zaženemo ukaze, ki jih komaj razumem. Zdi se, da v nekaterih manjka dokumentacija o funkcijah. Kljub temu na koncu vse uredimo in imamo delujoč projekt!