從初學者到專業人士：用 4 時間構建您的第一個全端應用程序

建立您的第一個全端應用程式是任何開發人員旅程中的一個里程碑。在本指南中，我們將引導您完成使用 React、Node.js 和 MongoDB 建立任務管理器應用程式的過程。在此過程中，我們將解釋從設定環境到在 Vercel 和 Render 上部署應用程式的每一步。

最後，您將擁有一個即時、功能齊全的應用程序，並有信心處理更複雜的專案。

1. 先決條件：準備工具 在深入研究程式碼之前，讓我們確保您的開發環境已準備就緒。這是您需要的：

必備軟體
Node.js（在此下載）：https://nodejs.org/fr
Node.js 是一個允許您在瀏覽器之外執行 JavaScript 的執行時間。安裝它以使用其內建的套件管理器 npm 來處理依賴項。

node -v && npm -v
安裝後運行上面的命令來驗證版本。

Git（在此下載）：https://git-scm.com/
Git 是一個版本控制系統，可以追蹤程式碼變更並促進協作。

MongoDB Atlas（在此註冊）：https://www.mongodb.com/products/platform/atlas-database
Atlas 提供免費的雲端託管 MongoDB 資料庫，非常適合初學者。

Vercel CLI（安裝指南）：https://vercel.com/
Vercel 是一個用於快速且有效率地部署 React 前端的平台。

渲染帳戶（在此註冊）：https://render.com/
Render 為部署後端服務提供了一個強大的環境。

1. 設定您的項目

第 1 步：建立專案結構

開啟終端機並為您的應用程式建立目錄：

mkdir 任務管理器應用程式 && cd 任務管理器應用程式

初始化 Git 儲存庫：

git 初始化

設定 package.json 檔案來管理依賴項：

npm init -y

第 2 步：安裝依賴項

後端依賴

後端將使用 Node.js 和 Express 構建，並將連接到 MongoDB 進行資料儲存。

安裝所需的軟體包：

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

• express：用於建立伺服器端應用程式的框架。
• mongoose：MongoDB 的物件資料建模 (ODM) 函式庫。
• dotenv：用於管理環境變數。
• cors：處理跨域請求的中間件。
• nodemon：開發過程中伺服器自動重新啟動的工具。

前端相依性

前端將使用 React 來建立使用者介面。

設定 React 應用程式：

npx create-react-app 用戶端

cd 客戶端

在 React 目錄中，安裝其他函式庫：

npm install axios react-router-dom

• axios：用於向後端 API 發出 HTTP 請求。
• react-router-dom：用於管理應用程式中的路由。

1. 建構後端：使用 Express 和 MongoDB 的 API

第 1 步：建立目錄結構

像這樣組織你的專案：

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

第 2 步：建立 Express 伺服器

在 server/ 目錄中，建立一個 server.js 檔案：

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

第3步：設定環境變數

在 server/ 目錄中建立一個 .env 檔案並新增您的 MongoDB

連接字串：

MONGO_URI=

第 4 步：定義 Mongoose 模型

在 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}`));

第 5 步：建立 API 路由

在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. 建構前端：React

第 1 步：設定 React 元件

像這樣組織你的 React 目錄：

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;

第 2 步：從 API 取得資料

在 src/components/TaskList.js 中：

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

1. 部署：讓您的應用程式上線

渲染上的後端部署

將您的程式碼推送到 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;

在渲染器上部署：

連接您的儲存庫。
將根目錄設定為/server。
新增環境變數（例如 MONGO_URI）。

Vercel 上的前端部署

導覽至客戶端目錄：

cd 客戶端

部署：

vercel (https://vercel.com/)

結論
恭喜！ ？您已經建置並部署了第一個全端應用程式。透過掌握這個過程，您就可以順利創建更複雜、更有影響力的專案。

保持聯繫
？請造訪 GladiatorsBattle.com 了解更多
？在 Twitter 上關注我們
？閱讀更多有關 DEV.to
？ CodePen 上的互動示範

讓我們一起創造一些令人驚嘆的東西！ ？

以上是從初學者到專業人士：用 4 時間構建您的第一個全端應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！