# 170: Se en amatör som snurrar upp ett React + Babel + Webpack + CSS-modulprojekt - CSS-tricks

Anonim

Rättvis varning! Det här är inte en snabb, okomplicerad, expertstyrd plog genom hur man ställer in dessa tekniker. Även om vi till slut lyckas få allt att gå. Det handlar om att dokumentera den verkliga upplevelsen av att göra denna typ av arbete. Vissa saker fungerar enkelt, andra inte. Ibland är det mitt fel. Ibland är dokumenten oklara. Ibland har det skett förändringar under våra fötter. Vi måste kämpa igenom allt.

Vi har en liten plan här. Vad vi vill göra är att öka ett lokalt projekt som använder:

  1. Reagera: Låt oss säga att vi bygger ett SPA och vill starkt arbeta med en komponentmodell.
  2. ReactDOM - Vi bygger för webben.
  3. Webpack: Vi vill ha en dev-server, omladdning av het modul och ett sätt att samla våra beroenden på ett produktionsvärdigt sätt.
  4. Babel: Vi behöver kanske inte mycket framtida JavaScript-sammanställning, men vi behöver JSX, och Babel är det som sammanställer det.
  5. CSS-moduler: Vi vill skriva några isolerade komponentspecifika CSS och det här är ett trevligt sätt att göra det där våra stilar finns kvar i formatmallen.

Lyckligtvis, när jag planerade att göra den här videon, hittade jag artikeln ”How to Create a React app from scratch using Webpack 4” av Linh Nguyen My. 12,5K klappar på Medium! Wow! Jag lade till en massa klappar till det också, för det verkar vara den här självstudien som faktiskt täcker den här superpopulära kombinationen av vänner på ett tillgängligt sätt som faktiskt fungerar.

Det betyder inte att allt går lätt och smidigt! Jag stöter på massor av små problem på vägen. En del av det är jag som är fet fingrar. En del av det är mystiska fel som dyker upp när vi kör kommandon som jag knappt förstår. En del av det verkar sakna dokumentation om funktioner. Ändå får vi reda på allt till slut och har ett arbetsprojekt!