Deployer React sur Azure

Pourquoi Déployer React sur Azure ?

Le déploiement de React sur Azure est une pratique courante pour les développeurs qui cherchent à mettre en production leurs applications web React. Azure offre une plateforme robuste et scalabe pour héberger des applications web, ce qui permet aux entreprises d'offrir des expériences utilisateur fluides et réactives.

Un cas d'utilisation concret est l'hébergement d'une application de gestion de tâches pour une petite entreprise ou d'un blog personnel pour un créateur de contenu. Ces applications nécessitent une plateforme fiable qui peut gérer le trafic et les demandes d'accès en temps réel.

Prerequis

• Connaissance approfondie du langage JavaScript et des concepts React (state, props, hooks)
• Familiarité avec la ligne de commande et les outils de gestion de projet (npm, yarn)
• Compréhension des bases de l'infrastructure en nuage, notamment le concept de déploiement continu
• Un compte Azure actif

Concepts fondamentaux

1. Azure App Service L'App Service d'Azure est un service web et API multi-conteneur qui permet de déployer, gérer et mettre à l'échelle des applications web. Il prend en charge une variété de langages et frameworks.

2. Resource Group Un groupe de ressources est un conteneur logique pour les ressources Azure. Cela vous aide à organiser et à gérer vos ressources de manière plus efficace.

3. Git Integration L'intégration avec Git permet de déployer automatiquement votre application web chaque fois que vous effectuez des modifications dans le référentiel Git associé au projet.

Mise en pratique : Projet fil rouge

Nous allons créer un gestionnaire de tâches simple en React. Ce mini-projet comprendra les fonctionnalités suivantes :

• Affichage des tâches
• Ajout de nouvelles tâches
• Suppression de tâches

Étape 1 : Créer le projet React

Commencez par créer un nouveau projet React en utilisant Create React App.

npx create-react-app todo-list-app
cd todo-list-app

Étape 2 : Créer les composants

Créez les fichiers suivants dans le répertoire src :

• TaskList.js
• TaskForm.js
• TaskItem.js

TaskList.js

import React, { useState } from 'react';
import TaskItem from './TaskItem';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TaskForm onAddTask={addTask} />
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <TaskItem task={task} onDelete={deleteTask} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

TaskForm.js

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    onAddTask({ id: Date.now(), text });
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add a new task..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default TaskForm;

TaskItem.js

import React from 'react';

const TaskItem = ({ task, onDelete }) => {
  return (
    <div>
      {task.text}
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
};

export default TaskItem;

Étape 3 : Mettre à jour le composant principal

Mettez à jour App.js pour utiliser le composant TaskList.

import React from 'react';
import './App.css';
import TaskList from './TaskList';

function App() {
  return (
    <div className="App">
      <TaskList />
    </div>
  );
}

export default App;

Étape 4 : Développer l'application

Lancez votre application pour vous assurer qu'elle fonctionne correctement.

npm start

Visitez http://localhost:3000 dans votre navigateur pour voir le gestionnaire de tâches en action.

Étape 5 : Créer un référentiel Git

Initialisez un nouveau référentiel Git et ajoutez vos fichiers.

git init
git add .
git commit -m "Initial commit of Todo List App"

Erreurs fréquentes et debugging

1. Erreur : Module not found

   // ❌ Mauvais
   import TaskItem from './TaskItem';
   
   // ✅ Correct
   import TaskItem from './TaskItem';
   

2. Erreur : Cannot read property 'map' of undefined

   // ❌ Mauvais
   const tasks = [];
   <ul>
     {tasks.map((task) => (
       <li key={task.id}>
         <TaskItem task={task} onDelete={deleteTask} />
       </li>
     ))}
   </ul>
   
   // ✅ Correct
   const tasks = [];
   <ul>
     {tasks.length > 0 ? (
       tasks.map((task) => (
         <li key={task.id}>
           <TaskItem task={task} onDelete={deleteTask} />
         </li>
       ))
     ) : (
       <p>No tasks found</p>
     )}
   </ul>
   

3. Erreur : Invalid hook call

   // ❌ Mauvais
   function MyComponent() {
     return (
       <div>
         {useState()}
       </div>
     );
   }
   
   // ✅ Correct
   import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
     return (
       <div>
         Count: {count}
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   

Pour aller plus loin

1. Utilisation de React Router pour la navigation entre les vues React Router

2. Intégration avec Azure DevOps pour le déploiement continu Azure DevOps

3. Stockage de données avec Azure Cosmos DB Azure Cosmos DB

Défi pratique

Créez une application de blog simple en React et déployez-la sur Azure App Service. L'application devrait permettre aux utilisateurs d'afficher, ajouter et supprimer des articles de blog.