Comment créer des applications de base de données évolutives avec React et MongoDB

Comment créer une application de base de données évolutive à l'aide de React et MongoDB

Dans le développement de logiciels modernes, la création d'une application de base de données évolutive est devenue de plus en plus importante. React, en tant que bibliothèque JavaScript populaire, est célèbre pour sa méthode de développement efficace et flexible basée sur des composants. MongoDB est une base de données non relationnelle évolutive et haute performance. Cet article explique comment combiner React et MongoDB pour créer une application de base de données évolutive et fournit des exemples de code correspondants.

1. Installer et configurer l'environnement de développement
Tout d'abord, nous devons installer et configurer l'environnement de développement correspondant. Assurez-vous que Node.js et npm (gestionnaire de packages Node) sont installés. Vous pouvez vérifier s'il est installé en exécutant la commande suivante :

node -v
npm -v

Ensuite, créez un nouveau projet React à l'aide de npm install create-react-app. Exécutez la commande suivante :

npx create-react-app my-app
cd my-app
npm start

Après une opération réussie, un serveur de développement sera démarré localement et l'application React sera ouverte dans le navigateur.

2. Connectez-vous à la base de données MongoDB
Avant d'utiliser la base de données dans l'application React, nous devons nous connecter à MongoDB. Tout d’abord, assurez-vous que MongoDB est installé et que le service MongoDB est démarré.

Ensuite, nous utiliserons Mongoose comme pilote Node.js pour MongoDB, qui fournit une API pratique pour faire fonctionner la base de données. Installez Mongoose en utilisant la commande suivante :

npm install mongoose

Créez un fichier nommé db.js dans le répertoire src de l'application React et ajoutez le code suivant :

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Database connected!');
});

3. Créez le modèle de données
Après vous être connecté à la base de données, nous devons définir le modèle de données. Créez un dossier nommé models dans le répertoire src de votre application React et créez-y un fichier nommé user.js. Ajoutez le code suivant au fichier user.js :

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  age: Number,
  email: String,
});

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

module.exports = User;

4. Écrivez les composants React
Ensuite, nous écrirons les composants React pour afficher et manipuler les données dans la base de données. Créez un dossier appelé composants dans le répertoire src de votre application React, créez-y un fichier appelé UserList.js et ajoutez le code suivant :

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <div>
      <h1>User List</h1>
      {users.map((user) => (
        <div key={user._id}>
          <p>Name: {user.name}</p>
          <p>Age: {user.age}</p>
          <p>Email: {user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default UserList;

Dans le code ci-dessus, nous utilisons la bibliothèque axios pour envoyer une requête GET et obtenir les données utilisateur dans la base de données, puis utilisez useState et useEffect pour gérer et mettre à jour l'état des données utilisateur.

Ensuite, utilisez le composant UserList dans le fichier App.js :

import React from 'react';
import UserList from './components/UserList';

const App = () => {
  return (
    <div>
      <UserList />
    </div>
  );
};

export default App;

5. Démarrez l'application
Maintenant, nous nous sommes connectés à la base de données et avons écrit le composant React qui affiche les données utilisateur. Exécutez la commande suivante pour démarrer l'application React :

npm start

Ouvrez le navigateur et vous pourrez voir à l'adresse http://localhost:3000 que l'application a été démarrée avec succès et que les données utilisateur dans la base de données sont affichées.

6. Fonctions d'application étendues
Sur la base de l'application de base ci-dessus, nous pouvons également ajouter et modifier des utilisateurs en ajoutant des formulaires. Ajoutez le code suivant dans le composant UserList.js :

const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');

const addUser = () => {
  axios.post('/users', { name, age, email }).then((response) => {
    setUsers([...users, response.data]);
  });
};

Dans la méthode render, ajoutez un formulaire pour saisir les informations utilisateur et appelez la méthode addUser pour ajouter un nouvel utilisateur.

En ajoutant un code similaire, nous pouvons également implémenter la fonction d'édition et de suppression d'utilisateurs.

7. Résumé
Cet article explique comment utiliser React et MongoDB pour créer des applications de base de données évolutives. Nous nous connectons d'abord à MongoDB via Mongoose, puis définissons le modèle de données et utilisons React pour écrire des composants permettant d'afficher et d'exploiter les données. Grâce aux exemples de code présentés, vous pouvez acquérir une compréhension approfondie de la façon d'utiliser MongoDB dans les applications React. J'espère que cet article vous aidera à créer des applications de base de données évolutives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!