Créez votre premier projet React avec Vite

Vous commencez à maîtriser les bases du fonctionnement de React ? C'est très bien ! Nous allons passer à l'étape supérieure dans cette partie, en créant votre premier projet React complet sur votre machine.

Jusqu'à présent, nous avons utilisé StackBlitz pour tester et apprendre React. C'est parfait pour découvrir les concepts, mais ce n'est pas ainsi que les développeurs travaillent au quotidien.

Dans la vraie vie, les développeuses et développeurs travaillent sur des projets locaux qui offrent de nombreux avantages :

• Performance optimale : pas de latence réseau, tout fonctionne en local

• Outils de développement avancés : rechargement automatique, messages d'erreur clairs

• Gestion des fichiers : organisation professionnelle de votre code

• Préparation au déploiement : possibilité de mettre votre app en ligne

• Contrôle total : vous maîtrisez votre environnement de développement

Découvrez Vite

Vite est l'outil moderne recommandé pour créer des applications React car il présente plusieurs avantages :

• Démarrage ultra-rapide : votre serveur de développement démarre en quelques secondes

• Rechargement instantané : vos modifications apparaissent immédiatement dans le navigateur

• Configuration simplifiée : tout fonctionne dès l'installation, sans configuration complexe

• Moderne par défaut : utilise les dernières fonctionnalités JavaScript

• Adopté massivement : utilisé par des entreprises comme Shopify, GitLab, et bien d'autres

Créez votre projet

Pour vérifier que Node.js est installé, ouvrez votre terminal et tapez :

node --version

Vous devriez voir s'afficher une version (par exemple v20.10.0).

Installation du projet

Placez-vous dans le dossier où vous voulez créer votre projet. Personnellement, je recommande de créer un dossier  projets-react  dans votre dossier utilisateur.

Pour créer votre projet "La maison jungle", exécutez cette commande :

npm create vite@latest la-maison-jungle -- --template react

Cette commande :

• Crée un nouveau dossier la-maison-jungle

• installe React avec Vite

• Configure tout automatiquement

Installation des dépendances

Maintenant, entrez dans votre projet et installez les dépendances :

cd la-maison-jungle
npm install

Démarrage du serveur

Lancez votre serveur de développement :

npm run dev

Et voilà ! Votre navigateur devrait s'ouvrir automatiquement à l'adresse  http://localhost:5173  avec votre application React qui fonctionne. Vous devriez voir une page avec le logo Vite et React qui vous souhaite la bienvenue !

Explorez la structure de votre projet

Ouvrez votre projet dans votre éditeur de code préféré (VS Code est recommandé). Voici ce que vous trouverez :

Les fichiers essentiels

• index.html: Le template de votre application.

• src/main.jsx: Le point d'entrée de votre application React :

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

• src/App.jsx: Votre composant principal. (C'est ici que commence vraiment votre application).

• package.json: Liste vos dépendances et scripts. (Vous y trouvez React 19.1, la version la plus récente).

Migrez votre code depuis StackBlitz

Maintenant que votre projet est prêt, récupérons le code que nous avions créé dans StackBlitz.

Créez votre composant Banner

1. Dans le dossier src, créez un nouveau dossier components

2. Dans components, créez un fichier Banner.jsx

3. Ajoutez-y le code de votre Banner :

const Banner = () => {
  return <h1>🌿 La maison jungle</h1>
}

export default Banner

Modifiez  App.jsx

Remplacez le contenu de  src/App.jsx  par :

import Banner from './components/Banner'

const App = () => {
  return <Banner />
}

export default App

Supprimez également  src/App.css  qui ne nous sert plus.

Regardez votre navigateur : votre Banner s'affiche !

Organisez vos composants

L'organisation du code est cruciale dans un projet React. Voici les bonnes pratiques que nous suivrons :

Structure recommandée

Conventions de nommage

Afin de garder un projet bien structuré il est important de garder également une bonne convention de nommage. Voici celle que je vous recommande : 

• Fichiers de composants :NomComposant.jsx(PascalCase)

• Dossiers :components,assets(camelCase)

• Fonctions de composants : même nom que le fichier

Import/Export

Nous utilisons la syntaxe ES6 moderne :

// Fichier de votre composant

const Banner = () => {
  return <h1>🌿 La maison jungle</h1>
}

// Export par défaut
export default Banner

// Fichier où vous utiliserez votre composant 
// Import correspondant pour pouvoir l'utiliser avec la syntaxe JSX <Banner />
import Banner from './components/Banner'

Maîtrisez les commandes essentielles

Votre projet Vite dispose de plusieurs commandes utiles :

Développement

La commande suivante démarre le serveur de développement :

npm run dev

Vos modifications sont visibles instantanément.

Construction pour la production

La commande suivante crée une version optimisée de votre  App  dans le dossier  dist  , prête à être déployée :

npm run build

Prévisualisation

La commande suivante permet de tester la version de production en local avant de la déployer :

npm run preview

À vous de jouer !

Il est temps de mettre en pratique ce que vous venez d'apprendre !

Votre mission

1. Créez le composant  Cart que vous aviez développé dans l'exercice précédent

2. Ajoutez-le à votre  App à côté du Banner

3. Organisez vos fichiers selon les bonnes pratiques

Rappel du composant  Cart

Voici le code que vous aviez créé :

const Cart = () => {
  const monstera = 8
  const lierre = 10
  const bouquet = 15

  return (
    <div>
      <h2>Panier</h2>
      <ul>
        <li>Monstera : {monstera}€</li>
        <li>Lierre : {lierre}€</li>
        <li>Bouquet de fleurs : {bouquet}€</li>
      </ul>
      <p>Total : {monstera + lierre + bouquet}€</p>
    </div>
  )
}

export default Cart

Résultat attendu

Votre  App  devrait afficher :

• Le titre "🌿 La maison jungle" (Banner)

• Le panier avec les prix et le total (Cart)

L'avantage de Vite pour votre apprentissage

Vite transforme votre expérience de développement :

• Feedback instantané : vos erreurs s'affichent clairement dans le navigateur

• Rechargement automatique : plus besoin de rafraîchir manuellement

• Messages d'erreur explicites : Vite vous aide à comprendre et corriger vos erreurs

• Performance : même avec des projets plus grands, tout reste rapide

Cette rapidité vous permet de vous concentrer sur l'apprentissage de React plutôt que sur les problèmes techniques !

En résumé

• Vite est l'outil moderne pour créer des applications React.

• Un projet local vous offre un environnement de développement professionnel.

• L'organisation du code est essentielle dès le début d'un projet.

• La syntaxe moderne (fonctions fléchées, export default) rend le code plus lisible.

• Le rechargement automatique accélère considérablement votre développement.

Félicitations ! Vous avez maintenant un vrai projet React qui fonctionne sur votre machine. Dans le prochain chapitre, nous allons ajouter du style à notre application pour qu'elle soit encore plus belle !