Morioh
Login
中條 美冬

中條 美冬

7 months ago

React と Node.js を使用してシンプルなバックエンド サーバーを構築する

このチュートリアルでは、Javascript Node.js をアプリケーション層として、React.js をビュー層として使用し、バックエンドと対話してフルスタック エクスペリエンスをシミュレートするシンプルなバックエンド サーバーを構築する方法を学びます。

サーバーのセットアップ

作成するサーバー アプリケーションは、JSON データを返すモック API エンドポイントになります。まず、次の内容を含む app.js という JavaScript ファイルを作成します。

var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);

プレーンな Javascript と Node.js を使用すると、エンドポイントとして機能するサーバー アプリケーション サーバーを簡単に作成できます。行 res.setHeader('Content-Type', 'application/json') は、応答がデータを JSON として返すように強制します。関数 res.end() は、 firstName と lastName を含む JSON オブジェクトの文字列バージョンを受け入れます。これがこのペイロードになります。終点。サーバー アプリケーションは、 app.listen(port, hostname) 行を実行することによって起動されます。この行のパラメータは、ホスト マシンの localhost とポート番号 3000 に設定されます。

サーバーの実行

ターミナルで次のコマンドを発行して、サーバーの実行を開始します。

$ node app.js

ブラウザを使用して URL http://localhost:3000 にアクセスすると、次の形式で JSON オブジェクトが返されることがわかります。

{
  "firstName": "John",
  "lastName": "Doe"
}

モック エンドポイントが動作していることを確認したら、同じアクションを実行します。ただし、今回は React.js フロントエンド コンポーネントを使用してプログラムで実行します。

React.js フロントエンドの作成

まず、PersonComponent という名前の React コンポーネントを次のコードで作成します。

import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}

このバニラ コンポーネントは、firstName および lastName の状態値を表示するだけです。最初は、これらの値は空の文字列として設定されます。

次に、エンドポイントが http://localhost:3000 であるバックエンド API からデータを取得するメソッドを作成します。コンポーネントに次の fetch メソッドを作成します。

fetch() {
  var context = this;

  $.ajax({
    url: 'http://localhost:3000',
    method: 'GET',
    success: function(response) {
      context.setState({
        firstName: response.firstName,
        lastName: response.lastName
      });
    }
  });
}

まず、コンポーネントのインスタンスを参照する、値が である参照 context を作成します。これは、コードが API バックエンドへの呼び出しに成功した後、成功関数のロジックで使用されます。次に、 は を呼び出し、 から取得される React.js コンポーネントの状態値を更新します。 API によって返された JSON オブジェクト。thiscontextsetStateresponse

最後に行うことは、コンポーネントが最初にマウントされたときにfetchを自動的に呼び出すことです。これを行うには、React.js コンポーネント メソッド componentDidMount() を次のロジックでオーバーライドします。

componentDidMount() {
  this.fetch();
}

コンポーネントが正常にマウントされたら、fetch を呼び出すだけです。次に、fetch は API と対話し、状態を更新し、更新された値でビューを強制的に再レン​​ダリングして、サイクルを完了します。

コード全体

最終的なコードは次のようになります。

サーバーアプリケーション

var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);

ReactJS フロントエンド

import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  componentDidMount() {
    this.fetch();
  }

  fetch() {
    var context = this;

    $.ajax({
      url: 'http://localhost:3000',
      method: 'GET',
      success: function(response) {
        context.setState({
          firstName: response.firstName,
          lastName: response.lastName
        });
      }
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}

このガイドでは、単一のプログラミング言語を使用してアプリのバックエンド コンポーネントとフロントエンド コンポーネントの両方を実装する方法を説明しました。

3.15 GEEK