寫了六天的文章，今天終於可以開始寫程式了。但其實也不算寫程式，我覺得寫程式最難的地方就是在最一開始Setup的地方。

尤其對如果完全沒有經驗的人會非常難，看書會不知道在說什麼，這也是我很建議沒學過的新手要入門的話從影片入門的原因。因為影片可以跟著做，比看書容易多了。

開始

身為一個只寫個React 網頁的前端工程師，要開始 react native專案，應該不難吧！？要怎麼開始呢？。

通常最一開始應該就是看官方文章文章，或是看看有沒有人分享怎麼開始的教學。不過有時候會覺得還要看文章好麻煩，而且對於新手會覺得很茫然，然後就放棄😆。我這邊滿推薦使用 chatGPT的。

目標： 成功開啟React native 專案。

本人使用的電腦是 Mac 系統，這邊會使用 IOS開發。在開始之前要先把 Xcode更新到最新版本。

Setup

請問我現在要開啟一個全新的 react native 專案 我要怎麼開始

GPT會先從教你從環境設定開始，例如安裝 node .... 等。接著給你一些指令開始。

1. 安裝 React Native CLI

npm install -g react-native-cli

2. 創建新的 React Native 專案

npx react-native init MyNewProject

註： MyNewProject 是自訂專案名稱，可自行修改。

照著GPT給的指令開始打進去。終端機會出現下面錯誤。

老實說我看不太懂是什麼錯誤，也不知道該怎麼解決。這個時候就把錯誤內容複製貼上再丟回去一次給GPT看看是什麼樣的錯誤，也許他會知道怎麼解決。

這個錯誤通常發生在你使用 npx react-native init 命令時，因為 npx 嘗試安裝一個不存在的版本或是下載失敗。這裡有幾個解決方案可以試試看：

1. 確保你使用的是正確的 npm 版本
你可以嘗試檢查你的 npm 和 npx 是否是最新版本，透過以下指令來更新：

   npm install -g npm

照著指令打後還是出現錯誤。感覺是 node 版本太舊的關係。看一下終端機的訊息，應該是 node版本的問題。

確認了一下，對欸，終端機使用的node.js 版本是 16.20。使用 nvm 切換到 20版本。再來試一次看看。

再接著跑一次安裝的指令看看。

1. 安裝 React Native CLI

npm install -g react-native-cli

2. 創建新的 React Native 專案

npx react-native init MyNewProject

雖然安裝成功，但出現下面錯誤。

/Users/tomj/.config/yarn/global/node_modules/react-native-cli/index.js:302 cli.init(root, projectName); ^ 

TypeError: cli.init is not a function at run (/Users/tomj/.config/yarn/global/node_modules/react-native-cli/index.js:302:7) at createProject (/Users/tomj/.config/yarn/global/node_modules/react-native-cli/index.js:249:3) at init (/Users/tomj/.config/yarn/global/node_modules/react-native-cli/index.js:200:5) at Object.<anonymous> (/Users/tomj/.config/yarn/global/node_modules/react-native-cli/index.js:153:7) at Module._compile (node:internal/modules/cjs/loader:1378:14) at Module._extensions..js (node:internal/modules/cjs/loader:1437:10) at Module.load (node:internal/modules/cjs/loader:1212:32) at Module._load (node:internal/modules/cjs/loader:1028:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12) at node:internal/main/run_main_module:28:49

不太知道是什麼，看起來就是某個 function沒有的感覺。一樣把問題丟回去 chatGPT看看他知不知道怎麼解決。

這個錯誤似乎是因為你安裝的 react-native-cli 已經過時。React Native 社群已經逐漸放棄使用 react-native-cli 來創建專案，而是推薦使用 npx react-native 命令直接來執行專案初始化。因此，安裝 react-native-cli 可能會導致衝突或無法正常運作。

看起來是我電腦之前裝的 react-native-cli 太舊了，ChatGPT建議將 react-native-cli 移除。

npm uninstall -g react-native-cli

移除後再跑一次看看。

npx react-native init MyNewProject

這次就出現成功的畫面了！！

開啟專案

成功的安裝好後，就是把專案打開了。用 VS code 開啟專案資料夾並在專端機輸入 yarn start。匯出先開啟 dev server。

接著再開一個終端打 yarn ios

終端機會自己打開模擬機並且會 bulid 專案會出現下面畫面。

看到手機的畫面這樣就代表開啟成功了🎉🎉🎉

一開始要開啟APP一定會遇到很多問題，我覺得APP很麻煩，每個人電腦遇到的問題都不太一樣。希望可大家可以嘗試看看，遇到問題就丟給GPT，如果還是不行看不懂還是得回歸傳統 google 找文章。

React native doctor

如果真的還是一直都打不開，RN 裡面有個指令可以讓你看看你電腦設置是不是OK，可以幫你修復(如果可以的話)。

在終端機打 npx react-native doctor會出現下面畫面

可以看到電腦設置是否OK，可以看到我電腦只有 ios的可以跑， Android的不行。可以按按看 e他會自動幫你修復，或是安裝。但其實還是大部分要自己去安裝。

結語

如果要開始一個新的項目最正統的方法應該是上官網看文件。會有完整詳細的教學教你怎麼開啟專案。但有的時候就是會想說可不可省一點閱讀的時間直接寫。這時候 chatGPT我覺得有一定的實用性。雖然給的東西不太可能一次就可以用或到位。但是可以透過和他溝通修改來達到想要的目標。

明天我們會試著實際把 app打開，修改 Hello world。接著就是開始專案啦～。

參考：
React Native 官網
ChatGPT對話紀錄

#it鐵人