Vom Anfänger zum Profi: Erstellen Sie Ihre erste Full-Stack-App in 4 Schritten

Das Erstellen Ihrer ersten Full-Stack-Anwendung ist ein monumentaler Meilenstein auf der Reise eines jeden Entwicklers. In diesem Leitfaden führen wir Sie durch den Prozess der Erstellung einer Task-Manager-App mit React, Node.js und MongoDB. Unterwegs erklären wir jeden Schritt, von der Einrichtung Ihrer Umgebung bis zur Bereitstellung Ihrer App auf Vercel und Render.

Am Ende haben Sie eine Live-App mit vollem Funktionsumfang und das Selbstvertrauen, komplexere Projekte in Angriff zu nehmen.

1. Voraussetzungen: Vorbereiten Ihrer Werkzeuge Bevor wir uns in den Code stürzen, stellen wir sicher, dass Ihre Entwicklungsumgebung bereit ist. Das brauchen Sie:

Unverzichtbare Software
Node.js (hier herunterladen):https://nodejs.org/fr
Node.js ist eine Laufzeitumgebung, mit der Sie JavaScript außerhalb des Browsers ausführen können. Installieren Sie es, um den integrierten Paketmanager npm für die Handhabung von Abhängigkeiten zu verwenden.

node -v && npm -v
Führen Sie nach der Installation den obigen Befehl aus, um die Versionen zu überprüfen.

Git (hier herunterladen):https://git-scm.com/
Git ist ein Versionskontrollsystem, das Änderungen an Ihrem Code verfolgt und die Zusammenarbeit erleichtert.

MongoDB Atlas (hier anmelden):https://www.mongodb.com/products/platform/atlas-database
Atlas bietet eine kostenlose, in der Cloud gehostete MongoDB-Datenbank, perfekt für Anfänger.

Vercel CLI (Installationsanleitung):https://vercel.com/
Vercel ist eine Plattform für die schnelle und effiziente Bereitstellung Ihres React-Frontends.

Render-Konto (hier anmelden):https://render.com/
Render bietet eine robuste Umgebung für die Bereitstellung Ihrer Back-End-Dienste.

1. Einrichten Ihres Projekts

Schritt 1: Erstellen Sie die Projektstruktur

Öffnen Sie Ihr Terminal und erstellen Sie ein Verzeichnis für Ihre App:

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

Git-Repository initialisieren:

git init

Richten Sie eine package.json-Datei ein, um Abhängigkeiten zu verwalten:

npm init -y

Schritt 2: Abhängigkeiten installieren

Back-End-Abhängigkeiten

Das Back-End wird mit Node.js und Express erstellt und zur Datenspeicherung mit MongoDB verbunden.

Installieren Sie die erforderlichen Pakete:

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

• Express: Framework zum Erstellen serverseitiger Anwendungen.
• mongoose: Object Data Modeling (ODM)-Bibliothek für MongoDB.
• dotenv: Zum Verwalten von Umgebungsvariablen.
• cors: Middleware zur Bearbeitung von Cross-Origin-Anfragen.
• nodemon: Ein Tool für automatische Server-Neustarts während der Entwicklung.

Front-End-Abhängigkeiten

Das Frontend verwendet React zum Erstellen von Benutzeroberflächen.

Richten Sie eine React-App ein:

npx create-react-app client

CD-Client

Installieren Sie im React-Verzeichnis zusätzliche Bibliotheken:

npm install axios reagieren-router-dom

• axios: Zum Senden von HTTP-Anfragen an die Back-End-API.
• react-router-dom: Zum Verwalten von Routen in Ihrer Anwendung.

1. Aufbau des Back-Ends: API mit Express und MongoDB

Schritt 1: Erstellen Sie die Verzeichnisstruktur

Organisieren Sie Ihr Projekt wie folgt:

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

Schritt 2: Erstellen Sie den Express-Server

Erstellen Sie im Verzeichnis server/ eine server.js-Datei:

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

Schritt 3: Umgebungsvariablen konfigurieren

Erstellen Sie eine .env-Datei im Verzeichnis server/ und fügen Sie Ihre MongoDB hinzu

Verbindungszeichenfolge:

MONGO_URI=

Schritt 4: Definieren Sie das Mongoose-Modell

Erstellen Sie im Verzeichnis server/models/ 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}`));

Schritt 5: API-Routen erstellen

Erstellen Sie im Verzeichnis server/routes/ 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. Aufbau des Frontends: Reagieren

Schritt 1: React-Komponenten einrichten

Organisieren Sie Ihr React-Verzeichnis wie folgt:

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;

Schritt 2: Daten von der API abrufen

In src/components/TaskList.js:

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

1. Bereitstellung: Liveschaltung Ihrer App

Back-End-Bereitstellung beim Rendern

Übertragen Sie Ihren Code an 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;

Beim Rendern bereitstellen:

Verbinden Sie Ihr Repository.
Legen Sie das Stammverzeichnis auf /server.
fest Fügen Sie Umgebungsvariablen hinzu (z. B. MONGO_URI).

Front-End-Bereitstellung auf Vercel

Navigieren Sie zum Kundenverzeichnis:

CD-Client

Bereitstellen:

vercel (https://vercel.com/)

Fazit
Glückwunsch! ? Sie haben Ihre erste Full-Stack-Anwendung erstellt und bereitgestellt. Wenn Sie diesen Prozess beherrschen, sind Sie auf dem besten Weg, komplexere und wirkungsvollere Projekte zu erstellen.

Bleiben Sie in Verbindung
? Entdecken Sie mehr auf GladiatorsBattle.com
? Folgen Sie uns auf Twitter
? Lesen Sie mehr auf DEV.to
? Interaktive Demos auf CodePen

Lasst uns gemeinsam etwas Großartiges aufbauen! ?

Das obige ist der detaillierte Inhalt vonVom Anfänger zum Profi: Erstellen Sie Ihre erste Full-Stack-App in 4 Schritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!