ホームページ > 記事 > ウェブフロントエンド > React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法
React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法
はじめに:
React と Express は現在非常に人気のある JavaScript フレームワークであり、フロントエンドとバックエンド アプリケーションをそれぞれ構築します。この記事では、React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法を紹介します。シンプルな TodoList アプリケーションを構築する方法を段階的に説明し、具体的なコード例を示します。
1. 準備
始める前に、必要なツールと環境を準備する必要があります:
Node.js と npm: Node がインストールされていることを確認します。 js と npm (Node.js のパッケージ マネージャー) については、次のようにコマンド ラインからそれらが正常にインストールされたかどうかを確認できます。
node -v npm -v
2. バックエンドの構築
プロジェクトの初期化: プロジェクト フォルダーでコマンド ラインを開き、次のコマンドを実行して新しいノードを初期化します。 js プロジェクト :
npm init -y
これにより、プロジェクト関連の情報と依存パッケージを記録するためのデフォルトの package.json
ファイルが作成されます。
Express とその他の依存関係をインストールする: コマンド ラインで次のコマンドを実行して、Express とその他の必要な依存関係をインストールします:
npm install express body-parser cors --save
ここでは、Express と body-parser をインストールしました。 cors は、HTTP リクエストとクロスドメインリクエストを処理するために使用されます。
server.js
という名前を付けます。 server.js
を開いて次のコンテンツを追加します: const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use(cors()); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });
このコードでは、まず必要な依存関係パッケージを導入し、次に Express インスタンスを作成し、いくつかのミドルウェアをセットアップします。最後に、指定されたポート (デフォルトは 5000) で待機します。
server.js
の編集を続け、既存のコードの下に次のコンテンツを追加します: let todos = []; app.get('/api/todos', (req, res) => { res.json(todos); }); app.post('/api/todos', (req, res) => { const { todo } = req.body; todos.push(todo); res.json(todos); });
このコード定義があります。ルートは 2 つあり、1 つはすべての Todo アイテムを取得するルート、もう 1 つは新しい Todo アイテムを追加するルートです。単純な配列 todos
を使用して、すべての todo 項目を保存します。
サーバーを起動します。 コマンド ラインで次のコマンドを実行して、Express サーバーを起動します。
node server.js
すべてが正常であれば、コマンド ライン Server is running on port XXXX プロンプトは、サーバーが正常に起動したことを示します。
npx create-react-app clientこれにより、プロジェクト フォルダーの下に
client という名前の新しいフォルダーが作成され、React フロントエンド アプリケーション コードが保存されます。
ファイルを開き、その中のコードを次の内容に置き換えます:
import React, { useState, useEffect } from "react"; function App() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(""); useEffect(() => { fetch("/api/todos") .then(res => res.json()) .then(data => setTodos(data)); }, []); const handleInputChange = e => { setNewTodo(e.target.value); }; const handleSubmit = e => { e.preventDefault(); const todo = { todo: newTodo }; fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(todo) }) .then(res => res.json()) .then(data => setTodos(data)) .catch(err => console.log(err)); setNewTodo(""); }; return ( <div> <h1>Todo List</h1> <form onSubmit={handleSubmit}> <input value={newTodo} onChange={handleInputChange} /> <button type="submit">Add Todo</button> </form> <ul> {todos.map((todo, index) => ( <li key={index}>{todo}</li> ))} </ul> </div> ); } export default App;
App を定義します。このコンポーネントは、2 つの React フック (
useState と
useEffect) を使用して、コンポーネントの状態と副作用を処理します。
fetch 関数を使用して HTTP リクエストを送信し、データを取得します。
client フォルダーに入り、次のコマンドを実行して React 開発サーバーを起動します。 ##<pre class='brush:php;toolbar:false;'>npm start</pre>
すべてがうまくいけば、ブラウザにシンプルな TodoList アプリケーションが表示され、新しい Todo アイテムを追加できます。
以上がReact と Express を使用してフルスタック JavaScript アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。