Eerlijke waarschuwing! Dit is geen snelle, ongecompliceerde, door experts gedreven doorploeg om deze technologieën op te zetten. Hoewel we uiteindelijk alles met succes op gang hebben gebracht. Dit gaat over het documenteren van de praktijkervaring van dit soort werk. Sommige dingen werken gemakkelijk, andere niet. Soms is het mijn schuld. Soms zijn de documenten onduidelijk. Soms zijn er veranderingen onder onze voeten opgetreden. We moeten er allemaal doorheen vechten.
We hebben hier een klein plan. Wat we willen doen is een lokaal project opzetten dat gebruikmaakt van:
- Reageer: Laten we zeggen dat we een SPA bouwen en een sterke wens hebben om met een componentenmodel te werken.
- ReactDOM - We bouwen voor het web.
- Webpack: we willen een dev-server, hot-module herladen en een manier om onze afhankelijkheden op een productiewaardige manier te bundelen.
- Babel: We hebben misschien niet veel toekomstige JavaScript-compilatie nodig, maar we hebben wel JSX nodig, en Babel is wat het compileert.
- CSS-modules: we willen een aantal geïsoleerde componentspecifieke CSS schrijven en dit is een leuke manier om dit te doen als onze stijlen in stylesheets blijven.
Gelukkig, toen ik van plan was om deze video te maken, vond ik het artikel “Hoe maak je een React-app helemaal opnieuw met Webpack 4” van Linh Nguyen My. 12.5K klapt op Medium! Wauw! Ik heb er ook een hoop klappen aan toegevoegd, omdat het de enige tutorial lijkt te zijn die deze super populaire combinatie van vrienden echt behandelt op een toegankelijke manier die echt werkt.
Dat wil niet zeggen dat alles gemakkelijk en soepel verloopt! Ik kom onderweg heel wat kleine problemen tegen. Sommige daarvan zijn dingen die ik dik aan het vingeren ben. Sommige ervan zijn mysterieuze fouten die opduiken wanneer we opdrachten uitvoeren die ik nauwelijks begrijp. Een deel ervan lijkt documentatie over functies te missen. Toch krijgen we het uiteindelijk allemaal voor elkaar en hebben we een werkend project!