Hello les codeurs,
Les applications React doivent être compilées pour pouvoir être affichées dans le navigateur. Mais que se passe-t-il concrètement pendant ce processus de compilation et pourquoi cette nécessité?
Pourquoi devoir compiler nos apps React?
Les apps codées en React respectent une logique de composants. Concrètement, on va découper notre application en de multiples petits morceaux. Par exemple un bouton, un input ou un menu peuvent chacun former un composant. On peut se représenter le composant comme étant l’unité de base de construction ou la brique de nos applications React. Pour en apprendre plus sur les composants et comment les construire, je vous conseille d’aller lire le cours ReactFacile Comprendre les bases de React: les composants.
Pourquoi cette structure en composants?
Cette architecture en composants va nous permettre à la fois de garder notre dossier de projet propre (pas de fichier de 2000 lignes) et de pouvoir réutiliser notre code de manière efficace à travers notre app et éviter les répétitions (imaginons un composant bouton “Se Connecter” qui apparaitra à plusieurs endroits de notre app).
Chaque composant, sera créé dans un fichier dédié. C’est là que le processus de compilation devient nécessaire.
La compilation, une nécessité
Pour pouvoir afficher notre application, il va d’abord falloir aller chercher pour chaque composant utilisé dans notre application, le fichier correspondant et rassembler l’ensemble dans un gros fichier.
Par ailleurs, on se souvient que les applications React sont codées en JSX. Et bien le JSX n’est pas directement compréhensible par le navigateur. Lors de la compilation, on va donc devoir également transcoder tout notre code JSX en JS, qui pourra lui être affiché.
En résumé
En résumé, la compilation sera composée de deux volets: le rassemblement de nos fichiers (composants) en un seul, et le transcodage du JSX en JS. Voilà ce qu’on entend par compilation d’app en React ! L’outil le plus fréquemment utilisé est webpack et l’on verra dans un prochain article que la compilation de nos fichier JSX n’est qu’une facette de ce que l’on peut faire avec cet outil.
Benjamin
