Html application root
Quel problème résout-il? Webpack permet de faciliter le développement par modules. Il permet donc également de gagner en performance moins de requêtes HTTP. Entre autres options, il donne également la possibilité de minifier le js, le css, etc.
Introduction
Pour commencer, on a besoin de yarn. Puis nous souhaitons installer React. Si vous avez bien suivi, yarn permet de gérer les dépendances de notre projet et React est une bibliothèque, donc une dépendance. Pour cela, on lance la commande suivante :.
Application root android
La syntaxe est simple à comprendre : yarn add [dependance]. En lançant cette commande, on constate que notre fichier package. Installons maintenant babel et webpack.
Sans rentrer dans les détails, on donne à HtmlWebpackPlugin le chemin vers notre index. On place dans le body un div avec un id "root" :. Une chose à remarquer : on peut importer du css dans notre javascript.
Pour tester, on peut utiliser webpack-dev-server et webpack-cli qui vont permettre de lancer un serveur avec notre application. Cela dit, pour gagner du temps, on peut également utiliser create-react-app : un package npm qui inclut ces outils avec une configuration par défaut fonctionnelle. Pour cela, rien de plus simple :. Votre nom ou pseudo. Votre adresse e-mail facultatif. À chaque fois que vous enregistrez des modifications au projet, le CLI met à jour le serveur : nul besoin de le redémarrer vous-même à chaque changement.
Les components sont les composantes de base d'une application Angular : une application est une arborescence de plusieurs components. Pour cette structure, on peut imaginer un component pour la barre de menu, un autre pour la partie contenu et un dernier pour le menu à droite. Il n'y a pas de règle d'or : je vous montrerai au cours des chapitres suivants comment réfléchir à votre structure afin de trouver la séparation des components la plus pertinente.
Serveur web interne
Le CLI crée énormément de fichiers au moment de la création d'une nouvelle application. Ici, vous voyez le code HTML correspondant à ce que vous voyez dans votre navigateur.
Vous allez maintenant créer un nouveau component à l'aide du CLI d'Angular. Depuis le dossier principal de votre projet, tapez la commande suivante :. Il a également ajouté le statement import en haut du fichier. Ce sont des étapes nécessaires pour que vous puissiez utiliser votre component au sein de votre application Angular.
Bouton Partager
Nous pouvons donc utiliser ce sélecteur dans notre code pour y insérer ce component. Dans votre navigateur, vous verrez le même titre qu'avant et, sur une deuxième ligne, le texte "mon-premier works". Félicitations, vous avez créé votre premier component Angular! Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues aujourd'hui! Vous pouvez continuer la lecture de nos cours en devenant un membre de la communauté d'OpenClassrooms.
C'est gratuit! Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres membres. Le téléchargement des vidéos de nos cours est accessible pour les membres Premium.