Rettferdig advarsel! Dette er ikke en rask, grei, ekspertstyrt gjennomføring av hvordan du setter opp disse teknologiene. Selv om vi til slutt lykkes med å få det hele til å gå. Dette handler om å dokumentere den virkelige opplevelsen av å gjøre denne typen arbeid. Noen ting fungerer enkelt, andre ikke. Noen ganger er det min feil. Noen ganger er dokumentene uklare. Noen ganger har det skjedd forandringer under føttene. Vi må kjempe oss gjennom det hele.
Vi har en liten plan her. Det vi ønsker å gjøre er å spinne opp et lokalt prosjekt som bruker:
- Reager: La oss si at vi bygger et SPA og ønsker sterkt å jobbe med en komponentmodell.
- ReactDOM - Vi bygger for nettet.
- Webpack: Vi ønsker en dev-server, omlasting av varm modul og en måte å pakke avhengighetene våre på en produksjonsverdig måte.
- Babel: Vi trenger kanskje ikke mye fremtidig JavaScript-kompilering, men vi trenger JSX, og Babel er det som kompilerer det.
- CSS-moduler: Vi vil skrive noen isolerte komponentspesifikke CSS, og dette er en fin måte å gjøre det der stilene våre forblir i stilark.
Heldigvis, da jeg planla å gjøre denne videoen, fant jeg artikkelen “How to Create a React app from scratch using Webpack 4” av Linh Nguyen My. 12,5K klapper på Medium! Wow! Jeg la til en hel del klapper til den også, fordi det ser ut til å være den ene opplæringen der ute som faktisk dekker denne superpopulære kombinasjonen av venner på en tilnærmelig måte som faktisk fungerer.
Det er ikke å si at alt går lett og greit! Jeg støter på masse små problemer underveis. Noe av det er meg som er fete fingre. Noe av det er mystiske feil som dukker opp når vi kjører kommandoer som jeg knapt forstår. Noe av det ser ut til å mangle dokumentasjon om funksjoner. Likevel får vi ordnet opp til slutt og har et arbeidsprosjekt!