Du débutant au professionnel : créez votre première application Full-Stack en 4

Créer votre première application full-stack est une étape monumentale dans le parcours de tout développeur. Dans ce guide, nous vous guiderons tout au long du processus de création d'une application Task Manager à l'aide de React, Node.js et MongoDB. Tout au long du processus, nous vous expliquerons chaque étape, de la configuration de votre environnement au déploiement de votre application sur Vercel et Render.

À la fin, vous disposerez d'une application en direct et entièrement fonctionnelle et de la confiance nécessaire pour aborder des projets plus complexes.

1. Prérequis : Préparer vos outils Avant de plonger dans le code, assurons-nous que votre environnement de développement est prêt. Voici ce dont vous avez besoin :

Logiciel essentiel
Node.js (Télécharger ici) :https://nodejs.org/fr
Node.js est un runtime qui vous permet d'exécuter JavaScript en dehors du navigateur. Installez-le pour utiliser son gestionnaire de packages intégré, npm, pour gérer les dépendances.

noeud -v && npm -v
Exécutez la commande ci-dessus après l'installation pour vérifier les versions.

Git (Télécharger ici) :https://git-scm.com/
Git est un système de contrôle de version qui suit les modifications apportées à votre code et facilite la collaboration.

MongoDB Atlas (Inscrivez-vous ici) :https://www.mongodb.com/products/platform/atlas-database
Atlas propose une base de données MongoDB hébergée gratuitement dans le cloud, parfaite pour les débutants.

Vercel CLI (Guide d'installation) :https://vercel.com/
Vercel est une plateforme pour déployer votre front-end React rapidement et efficacement.

Compte Render (Inscrivez-vous ici) :https://render.com/
Render fournit un environnement robuste pour déployer vos services back-end.

1. Configuration de votre projet

Étape 1 : Créer la structure du projet

Ouvrez votre terminal et créez un répertoire pour votre application :

mkdir task-manager-app && cd task-manager-app

Initialiser un dépôt Git :

git init

Configurez un fichier package.json pour gérer les dépendances :

npm init -y

Étape 2 : Installer les dépendances

Dépendances back-end

Le back-end sera construit avec Node.js et Express, et il se connectera à MongoDB pour le stockage des données.

Installez les packages requis :

npm install express mongoose dotenv cors
npm install --save-dev nodemon

• express : framework pour créer des applications côté serveur.
• mongoose : bibliothèque de modélisation de données objet (ODM) pour MongoDB.
• dotenv : Pour gérer les variables d'environnement.
• cors : middleware pour gérer les requêtes d'origine croisée.
• nodemon : Un outil pour le redémarrage automatique du serveur pendant le développement.

Dépendances frontales

Le front-end utilisera React pour créer des interfaces utilisateur.

Configurer une application React :

client npx create-react-app

client cd

Dans le répertoire React, installez des bibliothèques supplémentaires :

npm installer axios réagir-router-dom

• axios : pour envoyer des requêtes HTTP à l'API back-end.
• react-router-dom : Pour gérer les routes dans votre application.

1. Construire le Back-End : API avec Express et MongoDB

Étape 1 : Créer la structure du répertoire

Organisez votre projet comme ceci :

npm install express mongoose dotenv cors
npm install --save-dev nodemon

Étape 2 : Créer le serveur express

Dans le répertoire server/, créez un fichier server.js :

task-manager-app/
├── server/
│   ├── models/       # Contains database models
│   ├── routes/       # Contains API routes
│   ├── .env          # Stores environment variables
│   ├── server.js     # Main server file

Étape 3 : Configurer les variables d'environnement

Créez un fichier .env dans le répertoire server/ et ajoutez votre MongoDB

chaîne de connexion :

MONGO_URI=

Étape 4 : Définir le modèle Mongoose

Dans le répertoire server/models/, créez Task.js :

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// API Routes
app.use('/api/tasks', require('./routes/taskRoutes'));

// Start the server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Étape 5 : Créer des routes API

Dans le répertoire server/routes/, créez taskRoutes.js :

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true });

module.exports = mongoose.model('Task', TaskSchema);

1. Construire le Front-End : Réagir

Étape 1 : configurer les composants React

Organisez votre répertoire React comme ceci :

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// Fetch all tasks
router.get('/', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// Add a new task
router.post('/', async (req, res) => {
  const task = await Task.create(req.body);
  res.json(task);
});

// Update a task
router.put('/:id', async (req, res) => {
  const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(task);
});

// Delete a task
router.delete('/:id', async (req, res) => {
  await Task.findByIdAndDelete(req.params.id);
  res.json({ message: 'Task deleted' });
});

module.exports = router;

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

Dans src/components/TaskList.js :

client/
├── src/
│   ├── components/
│   │   ├── TaskList.js
│   │   ├── AddTask.js
│   │   ├── Task.js
│   ├── App.js
│   ├── index.js

1. Déploiement : mettre votre application en ligne

Déploiement back-end lors du rendu

Poussez votre code sur GitHub :

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

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

  useEffect(() => {
    axios.get('http://localhost:5000/api/tasks')
      .then(response => setTasks(response.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {tasks.map(task => (
        <div key={task._id}>
          <h3>{task.title}</h3>
          <p>{task.completed ? 'Completed' : 'Incomplete'}</p>
        </div>
      ))}
    </div>
  );
};

export default TaskList;

Déployer sur le rendu :

Connectez votre référentiel.
Définissez le répertoire racine sur /server.
Ajoutez des variables d'environnement (par exemple, MONGO_URI).

Déploiement Front-End sur Vercel

Accédez au répertoire des clients :

client cd

Déployer :

vercel (https://vercel.com/)

Conclusion
Félicitations! ? Vous avez créé et déployé votre première application full-stack. En maîtrisant ce processus, vous êtes sur la bonne voie pour créer des projets plus complexes et plus percutants.

Restez connecté
? Explorez-en davantage sur GladiatorsBattle.com
? Suivez-nous sur Twitter
? En savoir plus sur DEV.to
? Démos interactives sur CodePen

Construisons ensemble quelque chose d’incroyable ! ?

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!