Avertissement juste! Ce n'est pas une explication rapide, directe et dirigée par des experts sur la façon de configurer ces technologies. Bien qu'à la fin, nous réussissions à tout faire. Il s'agit de documenter l'expérience du monde réel de faire ce genre de travail. Certaines choses fonctionnent facilement, d'autres non. Parfois c'est ma faute. Parfois, les documents ne sont pas clairs. Parfois, des changements se sont produits sous nos pieds. Nous devons lutter contre tout cela.
Nous avons un petit plan ici. Ce que nous voulons faire, c'est lancer un projet local qui utilise:
- Réagissez: Disons que nous construisons un SPA et que nous souhaitons fortement travailler avec un modèle de composants.
- ReactDOM - Nous construisons pour le Web.
- Webpack: Nous voulons un serveur de développement, un rechargement de module à chaud et un moyen de regrouper nos dépendances d'une manière digne de la production.
- Babel: Nous n'avons peut-être pas besoin de beaucoup de compilations JavaScript à l'avenir, mais nous avons besoin de JSX, et c'est Babel qui le compile.
- Modules CSS: Nous voulons écrire des CSS spécifiques aux composants isolés et c'est une bonne façon de le faire là où nos styles restent dans des feuilles de style.
Heureusement, comme je prévoyais de faire cette vidéo, j'ai trouvé l'article «Comment créer une application React à partir de zéro avec Webpack 4» de Linh Nguyen My. 12,5K applaudissements sur Medium! Wow! J'y ai ajouté une multitude d'applaudissements, car il semble que ce soit le seul tutoriel qui couvre en fait cette combinaison d'amis très populaire d'une manière accessible qui fonctionne réellement.
Cela ne veut pas dire que tout se passe facilement et en douceur! Je rencontre plein de petits problèmes en cours de route. Certains sont des trucs de gros doigté. Certaines d'entre elles sont des erreurs mystérieuses qui apparaissent lorsque nous exécutons des commandes que je comprends à peine. Une partie semble manquer de documentation sur les fonctionnalités. Néanmoins, nous avons tout réglé à la fin et avons un projet de travail!