初心者からプロまで: 初めてのフルスタックアプリを 4 つで構築-jsチュートリアル-php.cn

From Beginner to Pro: Building Your First Full-Stack App in 4

最初のフルスタックアプリケーションを構築することは、開発者の道のりにおいて記念碑的なマイルストーンです。このガイドでは、React、Node.js、MongoDB を使用してタスクマネージャーアプリを作成するプロセスについて説明します。その過程で、環境のセットアップから Vercel と Render へのアプリのデプロイまで、すべての手順を説明します。

最後には、ライブで完全に機能するアプリが完成し、自信を持ってより複雑なプロジェクトに取り組むことができるようになります。

前提条件: ツールの準備コードに入る前に、開発環境の準備ができていることを確認してください。必要なものは次のとおりです:

必須ソフトウェア
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: プロジェクト構造を作成する

ターミナルを開き、アプリのディレクトリを作成します。

mkdir タスクマネージャーアプリ && cd タスクマネージャーアプリ

Git リポジトリを初期化します:

git init

依存関係を管理するために 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: アプリケーション内のルートを管理します。

バックエンドの構築: 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);

ログイン後にコピー

フロントエンドの構築: 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

ログイン後にコピー

展開: アプリを公開する

レンダリング時のバックエンド展開

コードを 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 中国語 Web サイトの他の関連記事を参照してください。