React.js + Express.js 基本專案建置

前言

這幾天想要用 React.js 搭配 Express.js 當作後端做一個小作品，因此這篇文章就是把 React.js 及 Express.js 基本專案建置的過程記錄下來。

正式開始建置囉!

首先依序安裝以下指令

npm init
npm install --save express
npm install nodemon --save-dev

以下是 package.json 配置，主要是設定 scripts 的部分
npm start — prefix client 此指令等同於 cd client 然後再 npm start

在根節點建立 server.js ，配置如下

若沒有安裝過 react，需先進行此指令，有則跳過
npm install -g create-react-app

接著建立 react 專案
npx create-react-app client(這裡可以自訂專案名，我命名為 client)

之後打開 react 專案內的 package.json，在 package.json 加上 proxy

功用:
會將 api 請求代理到指定的網址，例如使用 fetch('/api/todos') 時，會將請求代理到 http://localhost:5000/api/todos 裡面，可以避免跨域請求問題

之後就可以啟用了~可輸入以下指令
啟動 server 端: npm run server
啟動 client 端: npm start

或是安裝 concurrently: npm install --save-dev concurrently，就可以用一個指令 npm run dev 啟用了

最後做點小測試

在 react 專案內的 App.js 加上 componentDidMount()，裡面接一個 api

在 server.js 寫一個 api，然後會送出 okkkkkk

打開開發人員工具的 console，應該就能看到 okkkkkk 顯示出來了

最後如果這篇文章對你有幫助不妨鼓鼓掌吧!!謝謝~~