新手必看！Cursor AI 教你從零建 React 網站 + 部署！

您是否渴望踏入網頁開發的世界，但又對複雜的程式碼和設定感到卻步？這份指南將是您使用 Cursor AI 的終極簡明教程。我們將從頭開始，一步步引導您完成所有必要步驟，最終目標是讓您擁有一個可以實際運作、公開分享的網站連結。這份教學強調易用性，即使您從未接觸過程式碼或開發環境，也能輕鬆跟上。本指南涵蓋了 Mac、Windows 和 Linux 系統，確保所有人都能受益。準備好了嗎？讓我們一起深入探索 Cursor AI 的強大功能。

Cursor AI 顛覆程式開發！零基礎也能快速打造App

Cursor是一款強大的AI工具，能幫助你快速生成程式碼，實現你的App創意。即使你是程式開發新手，也能輕鬆上手

Tenten AI: 探索人工智慧的無限可能，科技新聞深度解析Ewan Mak

開始您的 React 網站開發之旅

首先，我們需要準備好我們的工作環境。別擔心，無論您使用的是 Mac、Windows 還是 Linux 系統，過程都非常相似。您需要做的就是下載並安裝 Cursor AI 應用程式 — 這個過程就像安裝任何其他軟體一樣簡單。

安裝完成後，您會看到一個乾淨整潔的界面，這是您未來創作的畫布。有沒有想過，為什麼許多專業開發者都推崇 React 框架？因為它讓網站開發變得更加模組化和靈活，就像是用樂高積木搭建您的理想城堡！

運用 AI 的力量簡化開發流程

使用 Cursor AI 的最大優勢在於它能理解您的意圖。您可以用自然語言描述您想要的功能，例如：「我想要一個有導航欄和圖片輪播的首頁」，然後 Cursor AI 就會生成相應的代碼。這就像是擁有一位能夠閱讀您心思的翻譯官，將您的想法轉化為電腦能理解的語言！

還記得那些令人頭痛的調試過程嗎？在傳統開發中，找出錯誤可能會耗費數小時。而 Cursor AI 不僅能幫您寫代碼，還能解釋代碼的含義，並幫助您識別和修復潛在問題。這就像是擁有一位永不疲倦的導師，隨時指導您避開開發過程中的陷阱。

Cursor 神技大公開！編碼速度提升 2 倍，效率翻倍

想成為編碼高手嗎？善用 Cursor 的強大功能，讓你編碼速度提升 2 倍，輕鬆完成複雜任務，大幅提升工作效率！

Tenten AI: 探索人工智慧的無限可能，科技新聞深度解析Erik

步驟一：下載 Cursor AI 並建立您的專案基地

一切的起點，就是先下載 Cursor AI。您可以直接前往官方網站，點擊免費下載按鈕。Cursor AI 提供免費方案，讓您可以無負擔地開始體驗。

下載並安裝完成後，我們需要為我們的專案建立一個專屬的工作區，也就是所謂的「專案目錄」。

1. 開啟終端機 (Terminal)：
   • 在您的作業系統中找到並開啟「終端機」應用程式。無論是 Mac、Windows 或 Linux，通常都可以透過搜尋「Terminal」來找到。終端機是我們與電腦進行指令溝通的主要介面。
2. 建立專案目錄：
   • 這個目錄將存放您所有與此專案相關的程式碼檔案和設定。
3. 進入專案目錄：
   • 您會注意到終端機的提示符號可能發生變化，表示您目前的操作範圍已經在此專案目錄內。之後大部分的指令都將在此目錄下執行。
4. 在 Cursor AI 中開啟專案：
   • 回到 Cursor AI 應用程式介面，選擇「開啟資料夾」(Open Folder)。
   • 瀏覽並選擇您剛剛建立的專案目錄（例如 first-project）。
   • 現在，Cursor AI 的編輯器將顯示您的專案結構，準備好進行下一步的開發工作。

接著，使用 cd (change directory) 指令進入您剛剛建立的目錄：

cd first-project

在終端機中，輸入以下指令來建立一個新的資料夾（目錄）。您可以將 first-project 替換成任何您喜歡的名稱，例如 my-cursor-ai-app 或 react-website。

mkdir first-project

這個初始設定非常關鍵，它為我們後續安裝依賴套件、編寫 Cursor AI 驅動的程式碼奠定了基礎。

步驟二：安裝 Node.js 並初始化 React 應用程式

為了建構現代化的網頁應用程式，特別是使用 React 框架，我們需要安裝 Node.js。Node.js 提供了一個 JavaScript 的執行環境，並且包含了 npm（Node Package Manager），這是管理專案依賴項目的重要工具。

1. 安裝 Node.js：
   • 安裝方式會因作業系統而異。以下以 Mac 使用 Homebrew 為例（Homebrew 是一個套件管理器）：
     • 如果您尚未安裝 Homebrew，請在新的終端機視窗（非專案目錄內）執行官方提供的安裝指令（通常需要管理員權限）。
   • 對於 Windows 和 Linux 使用者，請參考 Node.js 官方網站提供的安裝程式或使用相應的套件管理器（如 apt 或 yum）。
2. 使用 Cursor AI 建立 React 專案結構：
   • 確保您的終端機仍在專案目錄內（例如 first-project）。
   • 這個過程可能需要幾分鐘時間，它會下載 React 及其相關的依賴套件。
   • 完成後，您會看到 Cursor AI 的檔案總管中出現了許多新的檔案和資料夾，例如 src、public、package.json 等。這表示您的 React 基礎應用程式已經成功建立。

執行以下指令。這個指令會使用 create-react-app 工具來自動生成一個基本的 React 專案所需的檔案和資料夾結構。後面的 . 表示在當前目錄下建立。

npx create-react-app .

注意： 如果在 Mac 上執行 brew install node 時遇到 brew: command not found 的錯誤，即使您剛安裝完 Homebrew，可能需要將 Homebrew 加入系統的 PATH 環境變數中。通常需要編輯您的 shell 配置文件（如 .zshrc 或 .bash_profile），加入類似以下的指令（請將 YourUsername 換成您的實際使用者名稱）：

export PATH="/opt/homebrew/bin:$PATH" # (For Apple Silicon Macs)
# or
export PATH="/usr/local/bin:$PATH"   # (For Intel Macs)

修改後需要重新啟動終端機或執行 source ~/.zshrc (或對應的設定檔)。

安裝 Homebrew 後，執行：

brew install node

至此，您已經擁有一個由 Cursor AI 管理的、具備 Node.js 環境和 React 框架的基礎專案。

步驟三：整合 GitHub 進行版本控制

GitHub 是一個極其重要的開發工具，主要提供兩大核心功能：

1. 雲端程式碼備份： 將您的程式碼儲存在雲端，避免因本機電腦損壞而遺失。
2. 版本控制： 追蹤程式碼的每一次變更（稱為 "commit"），可以輕鬆回溯到之前的版本，或者建立不同的開發分支（"branch"）來嘗試新功能，而不影響主要程式碼。

整合 GitHub 與您的 Cursor AI 專案是一個最佳實踐。

1. 建立 GitHub 帳號與儲存庫 (Repository)：
   • 前往 GitHub.com 並註冊一個免費帳號。
   • 登入後，建立一個新的儲存庫 (Repository)。
   • 儲存庫名稱： 建議使用與您本地專案目錄相同的名稱（例如 first-project）。
   • 設定為私有 (Private)： 為了保護您的程式碼，強烈建議選擇 Private。
   • 其他選項暫時保持預設，點擊「Create repository」。
2. 在本機專案中初始化 Git 並安裝 Git 工具：
4. 產生個人存取權杖 (Personal Access Token - PAT)：
   • 由於您的儲存庫是私有的，需要一個權杖（像一把鑰匙）來授權您的本機電腦推送程式碼。
   • 前往 GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens (classic) 或 Fine-grained tokens。
   • 點擊 "Generate new token"。
   • 命名權杖： 給它一個描述性的名稱（例如 cursor-ai-first-project-token）。
   • 設定期限： 選擇一個適當的有效期。
   • 選擇範圍 (Scopes) 或儲存庫權限 (Repository permissions)：
     • 對於 Tokens (classic)，勾選 repo 的所有權限。
     • 對於 Fine-grained tokens，選擇 "Only select repositories"，然後選擇您剛建立的儲存庫。在 "Repository permissions" 下，給予讀寫權限 (Read and write) 給 Contents, Pull requests, Workflows 等相關項目。確保給予足夠的權限，以免推送時出錯。
   • 點擊 "Generate token"。
   • 極度重要： 立刻複製產生的權杖字串，並將其儲存在安全的地方（例如密碼管理器）。這個權杖只會顯示一次，關閉頁面後就無法再次查看。
5. 連接本地專案與遠端 GitHub 儲存庫：
   • 回到您在 Cursor AI 中開啟的專案目錄終端機。
     • 首先，建立一個初始的 README 檔案（如果 create-react-app 沒有自動生成的話，可以手動建立一個）。
     • 執行以下指令將所有變更加入 Git 追蹤、建立首次提交、並將程式碼推送到 GitHub 的 main 分支。當提示輸入密碼時，請貼上您剛剛產生的個人存取權杖 (PAT)。
6. 理解並執行 Commit：
   • 當您在 Cursor AI 中修改了程式碼（例如，編輯 src/App.js 檔案），Cursor AI 通常會以顏色或標記提示檔案已變更。
   • 若要將這些變更儲存到 GitHub，重複以下步驟：
   • 現在，您的 Cursor AI 專案已經與 GitHub 安全連接，您可以隨時備份和追蹤您的程式碼進度。

推送變更 (Push Changes):

git push origin main

提交變更 (Commit Changes):

git commit -m "描述您做了什麼變更，例如：Updated App component"

加入變更 (Stage Changes):

git add .

(. 代表加入所有變更的檔案)

首次推送並建立主分支 (main)：

git add .
git commit -m "Initial commit"
git push -u origin main

執行以下指令，將 YourUsername 替換成您的 GitHub 使用者名稱，first-project 替換成您的儲存庫名稱。

git remote add origin https://github.com/YourUsername/first-project.git

在您的專案目錄終端機中，初始化 Git：

git init

如果您的系統尚未安裝 Git，請先安裝。在 Mac 上使用 Homebrew：

brew install git

步驟四：在本地端預覽您的 React 應用程式

在將網站部署到公開網路之前，通常會在本地進行開發和測試。React 提供了一個內建的開發伺服器來實現這一點。

1. 啟動開發伺服器：
   • 確保您的終端機仍在 Cursor AI 專案的根目錄下。
2. 查看本地預覽：
   • 這個指令會自動在您的預設瀏覽器中開啟一個新分頁，網址通常是 http://localhost:3000。
   • 您會看到一個預設的 React 歡迎頁面。這個頁面內容對應的是您專案中 src/App.js 檔案內的程式碼。
3. 即時重新載入 (Hot Reloading)：
   • 本地開發伺服器最方便的一點是即時重新載入。嘗試在 Cursor AI 中修改 src/App.js 裡面的文字或內容，然後儲存檔案 (Cmd+S 或 Ctrl+S)。
   • 回到瀏覽器，您會發現頁面幾乎瞬間就更新了，無需手動刷新。這大大提高了開發效率。

執行以下指令：

npm start

請記住，localhost:3000 僅能在您自己的電腦上訪問，無法分享給他人。

步驟五：使用 Firebase 將您的 Cursor AI 應用程式部署上線

最後一步是將我們在 Cursor AI 中開發的應用程式部署到網際網路上，讓任何人都可以透過連結訪問。我們將使用 Firebase，這是 Google 提供的一個強大平台，其 Hosting 服務提供了慷慨的免費額度，非常適合初學者和小型專案。

1. 建立 Firebase 專案：
   • 前往 Firebase 控制台，使用您的 Google 帳號登入。
   • 點擊「新增專案」(Add project)。
   • 輸入專案名稱： 建議使用易於識別的名稱，例如 first-project-react-app (Firebase 會自動生成一個唯一的專案 ID)。
   • 您可以選擇是否啟用 Google Analytics (對於學習目的，可以暫時關閉)。
   • 點擊「建立專案」(Create project)。
2. 在 Firebase 專案中設定 Web 應用程式：
   • 進入您剛建立的 Firebase 專案。
   • 在專案總覽頁面，點擊 Web 圖示 (</>) 來新增一個 Web 應用程式。
   • 輸入應用程式暱稱： 例如 first-project-web。
   • 勾選「同時為此應用程式設定 Firebase Hosting」。
   • 點擊「註冊應用程式」(Register app)。
3. 安裝 Firebase 工具並設定本地專案：
   • 使用方向鍵選擇 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys，按下空白鍵選取，然後按 Enter。
   • 選擇 Use an existing project，然後選擇您在 Firebase 控制台建立的專案。
   • 重要： 當詢問 What do you want to use as your public directory? 時，輸入 build (而不是預設的 public)。React 應用程式的最佳化建置檔案會放在 build 資料夾中。
   • 當詢問 Configure as a single-page app (rewrite all urls to /index.html)? 時，輸入 y (Yes)。
   • 當詢問 Set up automatic builds and deploys with GitHub? 時，輸入 n (No)（我們將手動部署）。
   • 當詢問 File public/index.html already exists. Overwrite? (如果出現) 時，輸入 n (No)。
   • 初始化完成後，您的 Cursor AI 專案中會出現 firebase.json 和 .firebaserc 檔案。
4. 建置與部署 React 應用程式：
   • 部署成功後，終端機會顯示您的網站的託管網址 (Hosting URL)，通常是 https://your-project-id.web.app 或 https://your-project-id.firebaseapp.com。
   • 複製該 Hosting URL 並在瀏覽器中開啟。您應該能看到與您本地 npm start 時相同的 React 應用程式，但這次它已經真實地存在於網際網路上，可以分享給任何人了！

驗證線上網站：

部署到 Firebase Hosting： 執行以下指令將 build 資料夾的內容上傳到 Firebase：

firebase deploy

建置應用程式： 在部署之前，需要將 React 程式碼編譯打包成靜態檔案。在專案目錄終端機中執行：

npm run build

這會在您的專案根目錄下產生一個 build 資料夾，裡面包含了最佳化過的 HTML, CSS, 和 JavaScript 檔案。

初始化 Firebase Hosting： 在專案目錄終端機中執行：

firebase init

登入 Firebase： 在專案目錄終端機中執行：

firebase login

這會開啟瀏覽器，要求您授權 Firebase CLI 存取您的 Google 帳號。選擇您用來建立 Firebase 專案的那個帳號並允許權限。成功後，終端機會顯示登入成功訊息。

安裝 Firebase CLI (Command Line Interface)： 在您的全域終端機（非專案目錄）或專案目錄終端機中執行（建議全域安裝）：

npm install -g firebase-tools

恭喜您！您已經成功使用 Cursor AI 從零開始，建立了一個 React 應用程式，透過 GitHub 進行了版本控制，並利用 Firebase 將其部署到了線上。這是一個重要的里程碑，展示了 Cursor AI 在簡化現代網頁開發流程中的潛力。

• Cursor AI - Tenten AI: 探索人工智慧的無限可能，科技新聞深度解析
• 新手必看！Cursor AI 教你從零建 React 網站 + 部署！
• Cursor AI 評測: 如何革新程式碼編寫體驗？
• 如何使用 Cursor（最佳技巧分享）
• Cursor AI 與 AI 編碼學習資源綜合指南
• Cursor AI 使用技巧：提升程式編寫效率的秘訣
• AI程式工具推薦：新手也能輕鬆上手的開發神器
• GitHub AI 開發工具更新: Copilot 和 Spark
• Cursor 神技大公開！編碼速度提升 2 倍，效率翻倍
• 如何優化 Cursor AI 以達到最大生產力
• 8歲女孩也能輕鬆上手！Cursor 讓AI程式設計不再遙不可及

希望這份詳細的 Cursor AI 教學對您有所幫助。如果您正在尋找專業的數位解決方案，從網站開發、應用程式設計到數位行銷策略，Tenten.co 的專家團隊隨時準備為您提供協助。我們致力於運用最新的技術和創新的思維，幫助您的業務在數位時代脫穎而出。

立即預約免費諮詢會議，讓我們一同探討如何將您的想法變為現實：預約免費會議

With over 20 years of experience in technology, and the startup industry, I am passionate about AI and driving innovation. Keeping the engine running

Loading...