# 170: Urmăriți un amator Spin Up un proiect React + Babel + Webpack + CSS Module - CSS-Tricks

Anonim

Avertisment corect! Aceasta nu este o analiză rapidă, simplă, orientată de experți, a modului de configurare a acestor tehnologii. Deși, până la final, reușim să punem totul în funcțiune. Este vorba despre documentarea experienței din lumea reală de a face acest tip de muncă. Unele lucruri funcționează ușor, altele nu. Uneori e vina mea. Uneori documentele nu sunt clare. Uneori s-au întâmplat schimbări sub picioarele noastre. Trebuie să luptăm prin toate acestea.

Avem un mic plan aici. Ceea ce vrem să facem este să creăm un proiect local care utilizează:

  1. Reacționează: Să presupunem că construim un SPA și dorim cu tărie să lucrăm cu un model de componente.
  2. ReactDOM - Construim pentru web.
  3. Webpack: Vrem un server de dezvoltare, reîncărcarea modulului fierbinte și o modalitate de a grupa dependențele noastre într-un mod demn de producție.
  4. Babel: Este posibil să nu avem nevoie de multă compilare JavaScript viitoare, dar avem nevoie de JSX, iar Babel este cel care îl compilează.
  5. Module CSS: Vrem să scriem câteva CSS izolate specifice componentelor și acesta este un mod frumos de a face acest lucru în cazul în care stilurile noastre rămân în foi de stil.

Din fericire, în timp ce plănuiam să fac acest videoclip, am găsit articolul „Cum să creezi o aplicație React de la zero folosind Webpack 4” de Linh Nguyen My. 12,5K aplaude pe mediu! Wow! I-am adăugat și o mulțime de palme, pentru că pare a fi singurul tutorial care acoperă de fapt această combinație foarte populară de prieteni într-un mod accesibil, care funcționează de fapt.

Asta nu înseamnă că totul merge ușor și fără probleme! Mă lovesc de o mulțime de mici probleme pe parcurs. Unele dintre ele sunt lucruri cu degetul gras. Unele dintre acestea sunt erori misterioase care apar atunci când executăm comenzi pe care abia le înțeleg. Unele dintre ele par să lipsească documentație despre caracteristici. Cu toate acestea, rezolvăm totul în cele din urmă și avem un proiect de lucru!