React開発時には、APIサーバーとReactアプリサーバーを別にして、プロキシを使うというベスト・プラクティス

Create-React-AppのインストールとReactアプリの作成
ExpressサーバーとReactサーバーを分けて運用する
ローカル開発環境で開発している時にはProxy（プロキシ）を使うと( ・∀・)ｲｲ!!
create-react-app 2.0でのproxyの設定
プロダクション時にはどうする？
Reactを学ぶならUdemyがおすすめです

Create-React-AppのインストールとReactアプリの作成

sudo npm install -g create-react-app

-gオプションを指定することでグローバルにcreate-react-appをインストールします。

これでどこからでもcreate-react-appを使用することができます。

create-react-app client

create-react-appでclientというプロジェクトを作成します。

cd client
npm start

clientフォルダ内入って、

npm start で、自動的にブラウザ上にReactアプリが立ち上がります。

ExpressサーバーとReactサーバーを分けて運用する

開発時(devモード)は、ExpressサーバーとReactサーバーの２つのサーバーに分けます。

ExpressサーバーはAPIとしてJsonを返し、Reactサーバーはcreate-react-appが.jsファイルを返します。

２つのサーバーを別々に稼働するために、serverフォルダ内でnpm run dev、clientフォルダ内でnpm startをする必要があります。

serverフォルダ内でcreate-react-appを実行しclientプロジェクトを作成したので、serverフォルダ内の構成は以下のようになっています。

server/
├── client/
├── index.js
├── node_modules
├── package-lock.json
└── package.json

concurrentrlyをnpmでインストールします。

server/package.jsonの設定を行います。

"scripts": {

"start": "node index.js",

"server": "nodemon index.js",

"client": "npm run start --prefix client",

"dev": "concurrently "npm run server""npm run client""

}

はエスケープ文字で"を"内で使えるようにしています。

ローカル開発環境で開発している時にはProxy（プロキシ）を使うと( ・∀・)ｲｲ!!

ブラウザーはCookieを発行元以外のドメインには渡せないので、

単純にサーバーを２つ（ここでは、localhost:3000とlocalhost:5000、portが違うだけでも異なるドメインになっちゃいます。）に分けるとCookieによる認証ができなくなります。

というわけで、ブラウザーからの出入りはlocalhost:3000（Reactアプリ、ここではclient）に統一します。

Expressサーバーが動いているlocalhost:5000にはReactアプリ(client)が動いているlocalhost:3000をプロキシ(Proxy)サーバーとして使い間接的にアクセスします。

ブラウザー側からはあくまでもlocalhost:3000でサイトが動いているように見えます。

プロキシとは代理人という意味で、localhost:5000の代理としてlocalhost:3000がリクエストを受け取り、そのままリクエストを渡します。

create-react-app 2.0でのproxyの設定

create-react-appはバージョンが1.x.xから2.x.xにバージョンアップされたことで、proxyの設定方法も変更になっています。（"react-scripts"のバージョンが1.x.xから2.x.xに変更されていることに伴っています。client/package.jsonで"react-scripts"のバージョンを確認してみてください）

client/の中で

npm install http-proxy-middleware

としてhttp-proxy-middlewareをインストールします。

client/src/内にsetupProxy.jsを作成し、proxyの設定を行います。

client/src/setupProxy.js

const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
    app.use(proxy('/auth/google', { target: 'http://localhost:5000' }))
　　　　app.use(proxy('/api/*', { target: 'http://localhost:5000' }))
}

create-react-appがsetupProxy.jsというファイル名を自動的に見つけ出して読みこんでくれます。
他のファイルでsetupProxy.jsをimportする必要はありません。

/auth/googleまたは/api/以下のエンドポイントにアクセスされた際にはhttp://localhost:5000 (Expressサーバー)に中継されます。

プロダクション時にはどうする？

create-react-appで作成したclientフォルダ内で

cd client
npm run build

するとbuild/staticフォルダ内にjsフォルダ、 cssフォルダが作成され、
その中にjsファイルとcssファイルがwebpackによって作成されます。
ExpressサーバーはAPIサーバーとしての機能と、Proxyすることなくただ単純にこの静的なjsファイルとcssファイルを返すだけになります。プロダクション時には静的なファイルを返すだけなので、Reactサーバーは必要ないわけです。