Fair advarsel! Dette er ikke en hurtig, ligetil, ekspertstyret pløjning af, hvordan man opsætter disse teknologier. Selvom vi til sidst med succes får det hele i gang. Det handler om at dokumentere den virkelige oplevelse af at udføre denne slags arbejde. Nogle ting fungerer let, andre ikke. Nogle gange er det min skyld. Nogle gange er dokumenterne uklare. Nogle gange er der sket ændringer under vores fødder. Vi er nødt til at kæmpe igennem det hele.
Vi har en lille plan her. Hvad vi ønsker at gøre er at spin op på et lokalt projekt, der bruger:
- Reager: Lad os sige, at vi bygger en SPA og ønsker stærkt at arbejde med en komponentmodel.
- ReactDOM - Vi bygger til internettet.
- Webpack: Vi ønsker en dev-server, genindlæsning af varmt modul og en måde at samle vores afhængigheder på en produktionsværdig måde.
- Babel: Vi har muligvis ikke brug for meget fremtidig JavaScript-kompilering, men vi har brug for JSX, og Babel kompilerer det.
- CSS-moduler: Vi ønsker at skrive nogle isolerede komponentspecifikke CSS, og dette er en god måde at gøre det på, hvor vores stilarter forbliver i typografiark.
Heldigvis, da jeg planlagde at lave denne video, fandt jeg artiklen “Sådan oprettes en React-app fra bunden ved hjælp af Webpack 4” af Linh Nguyen My. 12,5K klapper på Medium! Wow! Jeg tilføjede også en masse klapper, fordi det ser ud til at være den ene tutorial derude, der faktisk dækker denne superpopulære kombination af venner på en tilgængelig måde, der rent faktisk fungerer.
Det er ikke at sige, at alt går let og problemfrit! Jeg løber ind i masser af små problemer undervejs. Noget af det er mig fede fingre ting. Noget af det er mystiske fejl, der dukker op, når vi kører kommandoer, som jeg næppe forstår. Noget af det mangler dokumentation om funktioner. Ikke desto mindre får vi det hele ordnet til sidst og har et arbejdsprojekt!