Créer un nouveau projet

Dans ce chapitre, nous allons voir comment créer un nouveau projet Web à l'aide d'un framework JavaScript moderne.

Nous verrons que le framework simplifie la création et la configuration d’un nouveau projet, en permettant de rapidement mettre en place un environnement de développement complet.

Pré-requis

L’installation d’un projet basé sur un framework frontend s’appuie sur l’interpréteur Node.js. Son installation est donc nécessaire pour poursuivre la création du projet.

Vous pouvez vérifier que Node.js et NPM, son gestionnaire de paquets, sont correctement installés à l’aide des commandes suivantes dans un terminal :

node --version # Affiche la version de Node.js  
npm --version  # Affiche la version de NPM

INFO

👉 Dans ce cours, nous utiliserons le gestionnaire de paquets par défaut de Node.js, NPM, pour installer les bibliothèques tierces dont dépend notre projet. Celui-ci est inclus dans l'installation de Node.js. Si vous n’êtes pas encore familier avec Node.js et NPM, vous pouvez consulter cette fiche annexe sur le sujet.

Installation

Chaque framework met à disposition une ligne de commande vous permettant d'initier la création d’un projet. Ouvrez le terminal de commande de votre système d'exploitation dans le répertoire où vous souhaitez créer le projet et exécutez la commande :

npm init vite@latest -- --template react

Cette commande initialise vous demandera le nom à donner au projet.

INFO

👉 Si vous n'avez jamais créé de projet avec React.js auparavant, la commande vous demandera si elle peut installer une module sur votre machine. Répondez oui (y).

Cela générera un dossier portant le nom donné au projet dans le répertoire courant.

Le projet React.js ainsi créé présente déjà du code illustrant différentes fonctionnalités que nous verrons au fil du cours. Pour repartir d'une version plus minimaliste, vous devez effectuer quelques modifications :

• Supprimez les dossiers src/assets et les fichiers src/App.css, src/index.css.
• Retirez la ligne import './index.css' du fichier src/main.jsx.
• Remplacez le contenu du fichier src/App.jsx par le suivant :

export default function App() {
  return <main>Hello World</main>
}

Vous disposez désormais d'une installation complète pour débuter un nouveau projet.

Lancer un environnement de développement

Le projet est maintenant installé. Pour tester que l'installation est fonctionnelle, vous pouvez vous rendre dans le dossier racine du projet avec un terminal et exécuter la commande npm install. Elle procèdera à l'installation des dépendances nécessaires au lancement du projet.

Ensuite, vous pouvez lancer la commande suivante pour exécuter le projet localement, dans ce qu'on appelle un environnement de développement :

npm run dev

La commande devrait vous indiquer un lien URL vous permettant de visualiser l'interface de l'application. En utilisant ce lien dans un navigateur internet, vous devriez voir une interface Web affichant le texte "Hello World".

Si c'est le cas, bravo, votre projet est correctement installé.

Dans cet environnement de développement, le framework est capable d'observer les modifications sur les fichiers du projet pour les répercuter automatiquement sur l'interface Web.

Si vous vous rendez dans le fichier src/App du projet, vous pouvez par exemple modifier le texte "Hello World" et sauvegarder le fichier. Vous constaterez que la modification est automatiquement répercutée au niveau du navigateur. Il en sera de même pour la plupart des modifications que vous apporterez au projet.

Ce système de Hot Reloading permet d'être plus efficace durant le développement du projet. L'impact de chaque changement peut être immédiatement vérifié sur l'interface, et un message d'erreur sera indiqué si le changement a provoqué un bug qui ne permet plus de rendre correctement l'application.

TIP

👉 Vous pouvez stopper l'exécution de l'environnement de développement en exécutant la commande Ctrl+C dans le terminal où il est lancé.

Conclusion

Nous disposons maintenant d'un nouveau projet et d'un environnement de développement nous permettant de facilement travailler sur notre application.

Dans le prochain chapitre, nous étudierons l'architecture du projet généré par le framework à sa création, afin de mieux comprendre comment appréhender le développement dans cet environnement.