Démarrer avec Node.js, Express et React : Créer une API puissante

Aujourd'hui, nous allons plonger dans le monde passionnant de Node.js, Express et React. Que vous soyez un programmeur chevronné ou débutant, cet article de blog vous guidera à travers la création d'une API puissante en utilisant ces technologies populaires. Nous aborderons les bases, vous guiderons à travers la configuration de votre environnement et explorerons comment ces outils fonctionnent ensemble. De plus, nous vous montrerons comment Apidog peut vous faciliter la vie. Alors, prenez votre collation de codage préférée et commençons !

Pourquoi Node.js, Express et React ?

Avant de plonger dans les détails, parlons des raisons pour lesquelles vous devriez vous intéresser à Node.js, Express et React.

Node.js

Node.js est un environnement d'exécution qui vous permet d'exécuter JavaScript côté serveur. Il est basé sur le moteur JavaScript V8 de Chrome, ce qui le rend rapide et efficace. Avec Node.js, vous pouvez créer des applications réseau évolutives, gérer plusieurs requêtes simultanément et utiliser un seul langage de programmation (JavaScript) pour le développement côté client et côté serveur.

Express

Express est un framework d'application web Node.js minimal et flexible. Il fournit un ensemble robuste de fonctionnalités pour la création d'applications web et mobiles. Avec Express, vous pouvez facilement configurer un serveur, gérer les routes et gérer les requêtes et réponses HTTP. C'est l'épine dorsale de nombreuses applications Node.js et s'associe parfaitement à React.

React

React est une bibliothèque JavaScript pour la création d'interfaces utilisateur. Elle est maintenue par Facebook et une communauté de développeurs et d'entreprises individuels. React vous permet de créer des composants d'interface utilisateur réutilisables et de gérer efficacement l'état de votre application. Lorsqu'il est combiné avec Node.js et Express, vous pouvez créer des applications web dynamiques et réactives avec facilité.

Configuration de votre environnement de développement

Pour commencer, vous devrez configurer votre environnement de développement. Voici un guide étape par étape :

Installer Node.js : Rendez-vous sur le site Web de Node.js et téléchargez la dernière version. Suivez les instructions d'installation pour votre système d'exploitation.

Installer npm : npm (Node Package Manager) est fourni avec Node.js. Vous pouvez vérifier s'il est installé en exécutant npm -v dans votre terminal.

Configurer un nouveau projet : Créez un nouveau répertoire pour votre projet et accédez-y dans votre terminal. Initialisez un nouveau projet Node.js en exécutant npm init. Suivez les invites pour créer un fichier package.json.

Installer Express : Exécutez npm install express pour installer Express.

Installer React : Vous utiliserez Create React App pour configurer un nouveau projet React. Exécutez npx create-react-app client pour créer une nouvelle application React dans un répertoire client.

Installer Apidog : Pour faciliter le développement et les tests d'API, nous utiliserons Apidog. Vous pouvez le télécharger gratuitement sur le site Web d'Apidog.

Création de votre API avec Node.js et Express

Maintenant que votre environnement est configuré, créons une API simple en utilisant Node.js et Express.

Étape 1 : Configurer le serveur Express

Créez un nouveau fichier appelé server.js dans le répertoire racine de votre projet. Ajoutez le code suivant pour configurer un serveur Express de base :

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Exécutez node server.js dans votre terminal. Vous devriez voir "Server running at http://localhost:3000". Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir "Hello World!".

Étape 2 : Créer des routes API

Ensuite, créons des routes API. Dans votre fichier server.js, ajoutez le code suivant pour créer une API simple qui renvoie une liste d'utilisateurs :

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
  { id: 3, name: 'Sam Smith' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

Maintenant, lorsque vous accédez à http://localhost:3000/api/users, vous verrez une réponse JSON avec la liste des utilisateurs.

Étape 3 : Se connecter à une base de données

Pour rendre notre API plus dynamique, connectons-nous à une base de données. Nous utiliserons MongoDB pour cet exemple. Tout d'abord, vous devrez installer mongoose en exécutant npm install mongoose.

Créez un nouveau fichier appelé db.js et ajoutez le code suivant pour vous connecter à MongoDB :

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

Dans votre fichier server.js, require le fichier db.js pour vous connecter à la base de données :

const db = require('./db');

Maintenant, créons un modèle Mongoose pour nos utilisateurs. Créez un nouveau fichier appelé user.js et ajoutez le code suivant :

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

Dans votre fichier server.js, mettez à jour la route /api/users pour récupérer les utilisateurs de la base de données :

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

Vous pouvez maintenant ajouter, mettre à jour et supprimer des utilisateurs de votre base de données MongoDB, et votre API reflétera dynamiquement ces changements.

Intégration de React avec Node.js et Express

Maintenant que notre API est configurée, intégrons-la à un frontend React.

Étape 1 : Configurer le proxy

Pour effectuer des requêtes vers notre API à partir du frontend React, nous allons configurer un proxy. Ouvrez le fichier client/package.json et ajoutez la ligne suivante :

"proxy": "http://localhost:3000"

Étape 2 : Récupérer les données de l'API

Dans votre application React, créons un composant qui récupère les données de l'API et les affiche. Ouvrez le fichier client/src/App.js et remplacez son contenu par le code suivant :

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Exécutez npm start dans le répertoire client pour démarrer le serveur de développement React. Vous devriez voir une liste d'utilisateurs récupérés de votre API affichée sur la page.

Tester votre API avec Apidog

Maintenant que vous avez une API fonctionnelle et un frontend React, il est temps de tester votre API. Apidog est un outil fantastique pour cela.

Étape 1 : Ouvrez Apidog et créez une nouvelle requête.

Étape 2 : Dans l'éditeur de test, entrez l'URL de votre point de terminaison API, sélectionnez la méthode HTTP et ajoutez tous les en-têtes, paramètres ou données de corps dont vous avez besoin. Par exemple, vous pouvez tester l'itinéraire qui renvoie un message simple que nous avons créé précédemment :

Étape 3 : Cliquez sur le bouton Envoyer et voyez le résultat de votre test. Vous devriez voir le code d'état, le temps de réponse et le corps de la réponse de votre API. Par exemple, vous devriez voir quelque chose comme ceci :

Apidog est un excellent outil pour tester vos API, car il vous aide à garantir la qualité, la fiabilité et les performances de vos services web. Il vous fait également gagner du temps et des efforts, car vous n'avez pas besoin d'écrire de code ou d'installer de logiciel pour tester vos API. Vous pouvez simplement utiliser votre navigateur et profiter de l'interface et des fonctionnalités conviviales d'Apidog.

Conclusion

Félicitations ! Vous avez réussi à créer une API puissante en utilisant Node.js, Express et React. Vous avez appris à configurer votre environnement de développement, à créer des routes API, à vous connecter à une base de données et à intégrer React à votre backend. De plus, vous avez découvert comment Apidog peut simplifier les tests de votre API.

N'oubliez pas que ce n'est que le début. Il existe d'innombrables façons d'étendre et d'améliorer votre application. Vous pouvez ajouter l'authentification, implémenter des routes plus complexes et améliorer votre frontend avec des fonctionnalités supplémentaires.