ReactフロントエンドとNode / Expressバックエンドを作成して接続する方法

この記事では、単純なReactアプリを作成し、それをこれから作成する単純なNode / ExpressAPIに接続するプロセスについて説明します。

このチュートリアルで説明するテクノロジーの操作方法についてはあまり詳しく説明しませんが、詳細を知りたい場合に備えて、リンクを残しておきます。

チュートリアル用に作成したこのリポジトリにすべてのコードがあります

ここでの目的は、フロントエンドクライアントバックエンドAPIをセットアップして接続する方法に関する実用的なガイドを提供することです。

手を汚す前に、マシンでNode.jsが実行されていることを確認してください。

メインプロジェクトディレクトリを作成します

ターミナルで、プロジェクトを保存するディレクトリに移動します。次に、プロジェクト用の新しいディレクトリを作成し、そのディレクトリに移動します。

mkdir my_awesome_project cd my_awesome_project

Reactアプリを作成する

このプロセスは本当に簡単です。

Facebookのcreate-react-appを使用して…ご想像のとおり、clientという名前のreactアプリを簡単に作成します

npx create-react-app client cd client npm start

私がしたことを見てみましょう:

  1. npmのnpxを使用してreactアプリを作成し、クライアントという名前を付けました。
  2. cd(ディレクトリの変更)をクライアントディレクトリに入れます。
  3. アプリを起動しました。

ブラウザで、// localhost:3000 /に移動します。

すべて問題がなければ、reactのウェルカムページが表示されます。おめでとう!これで、ローカルマシンで基本的なReactアプリケーションを実行できるようになりました。簡単ですよね?

反応アプリを停止するにCtrl + cは、ターミナルを押すだけです。

Expressアプリを作成する

わかりました、これは前の例と同じくらい簡単です。プロジェクトのトップフォルダに移動することを忘れないでください。

Express Application Generatorを使用して、アプリケーションスケルトンをすばやく作成し、apiという名前を付けます

npx express-generator api cd api npm install npm start

私がしたことを見てみましょう:

  1. npmのnpxを使用して、express-generatorをグローバルにインストールしました。
  2. Express-Generatorを使用してExpressアプリを作成し、APIという名前を付けました。
  3. APIディレクトリにcdします。
  4. すべての依存関係をインストールしました。
  5. アプリを起動しました。

ブラウザで、// localhost:3000 /に移動します。

すべて問題がなければ、エクスプレスウェルカムページが表示されます。おめでとう!これで、基本的なExpressアプリケーションがローカルマシンで実行されていることを意味します。簡単ですよね?

反応アプリを停止するにCtrl + cは、ターミナルを押すだけです。

ExpressAPIでの新しいルートの構成

さて、手を汚しましょう。お気に入りのコードエディター(私はVS Codeを使用しています)を開いて、プロジェクトフォルダーに移動します。

reactアプリにclientexpressアプリにapiという名前を付けた場合、clientapiの2つのメインフォルダーがあります

  1. APIディレクトリ内でbin / wwwに移動し、15行目のポート番号を3000から9000に変更します。後で両方のアプリを同時に実行するため、これを行うと問題が回避されます。結果は次のようになります。

2. api / routestestAPI.jsファイルを作成して次のコードを貼り付けます。

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. api / app.jsファイルで、24行目に新しいルートを挿入します。

app.use("/testAPI", testAPIRouter);

4. Ok, you are “telling” express to use this route but, you still have to require it. Let’s do that on line 9:

var testAPIRouter = require("./routes/testAPI");

The only changes are in line 9 and line 25. It should end up something like this:

5. Congratulations! You have created a new route.

If you start your API app (in your terminal, navigate to the API directory and “npm start”), and go to //localhost:9000/testAPI in your browser, you will see the message: API is working properly.

Connecting the React Client to the Express API

  1. On your code editor, let’s work in the client directory. Open app.js file located in my_awesome_project/client/app.js.
  2. Here I will use the Fetch APIto retrieve data from the API. Just paste this code after the Class declaration and before the render method:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. Inside the render method, you will find a <;p> tag. Let’s change it so that it renders the apiResponse:

;{this.state.apiResponse}

At the end, this file should look something like this:

I know!!! This was a bit too much. Copy paste is your friend, but you have to understand what you are doing. Let’s see what I did here:

  1. On lines 6 to 9, we inserted a constructor, that initializes the default state.
  2. On lines 11 to 16, we inserted the method callAPI() that will fetch the data from the API and store the response on this.state.apiResponse.
  3. On lines 18 to 20, we inserted a react lifecycle method called componentDidMount(), that will execute the callAPI() method after the component mounts.
  4. Last, on line 29, I used the <;p> tag to display a paragraph on our client page, with the text that we retrieved from the API.

What the heck!! CORS ?

Oh yeah, baby! We are almost done. But if we start both our apps (client and API) and navigate to //localhost:3000/, you still won't find the expected result displayed on the page. If you open chrome developer tools, you will find why. In the console, you will see this error:

// localhost:9000 / testAPIのロードに失敗しました:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン '// localhost:3000'はアクセスを許可されていません。不透明な応答がニーズに対応する場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

これは簡単に解決できます。クロスオリジンリクエストを許可するには、APIにCORSを追加するだけです。それをやってみましょう。CORSの詳細については、こちらを確認してください。

  1. ターミナルでAPIディレクトリに移動し、CORSパッケージをインストールします。
npm install --save cors

2.コードエディタでAPIディレクトリに移動し、my_awesome_project / api /app.jsファイルを開きます。

3. 6行目でCORSが必要です

var cors = require("cors");

4. 18行目で、CORSを使用するようにエクスプレスに「指示」します。

app.use(cors());

API app.jsファイルは、次のようになります。

すごい仕事。全部終わった!!

OK!準備完了です。

次に、npm startコマンドを使用して、2つの異なる端末で両方のアプリ(クライアントとAPI)を起動します。

ブラウザで// localhost:3000 /に移動すると、次のようなものが見つかります。

もちろん、このプロジェクトはそれほど効果はありませんが、フルスタックアプリケーションの始まりです。チュートリアル用に作成したこのリポジトリにすべてのコードがあります

次に、これをMongoDBデータベースに接続する方法や、すべてをDockerコンテナー内で実行する方法など、いくつかの補完的なチュートリアルに取り組みます。

私の良い友達が言うように:

強くなり、コードをオンにします!!!

…そして今日は素晴らしいことを忘れないでください;)