在開始做這個「IP 位置查詢網站」之前，我先面對的，是最基本也是最麻煩的部分：環境安裝。 每次開始新的專案，都會遇到一樣的問題——我要用什麼方式建立 React？要設定哪些工具？是否會踩到 一堆奇怪的坑？為了讓整個開發過程更順利，我決定先把整個 React 環境扎扎實實地準備好。

選擇適合的 React 建置方式

React 的建置方式很多，但為了這次專案的需求——包含地圖、IP API、廣告 banner、 上架 server，我希望開發速度快一點、設定簡單一點。 最後我選擇用 Vite 來建立 React 的環境。它啟動快、打包快， 對我這種常要反覆測試 API 和地圖定位的人來說非常友善。

安裝 Node.js

所有事情的開端，就是 Node.js。去官方網站下載後一路下一步即可。 安裝完之後，我用終端機檢查是否安裝成功：

node -v
npm -v

出現版本號，代表環境就緒，可以往下一步前進。

建立 React 專案

為了開始打造 IP 查詢頁面，我建立了一個新的 React 專案：

npm create vite@latest ip --template react

接著進入專案並安裝依賴套件：

cd ip
npm install

啟動開發伺服器

最後，我啟動開發伺服器，確保整個環境真的能運作：

npm run dev

瀏覽器會跳出一個 React 的初始畫面，也意味著這個 IP 查詢專案正式可以開工。

基礎打好了，下一步開始寫功能

雖然環境安裝看起來平淡無奇，但它是整個專案的出發點。 當開發環境成功跑起來後，才能開始準備第二章的內容—— 如何在 React 裡取得使用者的 IP 資訊。 這是整個 IP 查詢網站的第一個關鍵功能。