鐵人賽 Day2 自己做一個價值幾十萬的動態網站

第二課：架設環境、了解npm指令與創建第一個ReactApp

自己做一個價值幾十萬的動態網站，開始實作前的準備與小知識：

Step 1. 了解React安裝與npm 並下載Vscode

第一步要先下載Nodejs，要安裝React卻下載了node常常會讓人搞混，雖然還沒有要用Node處理中間Api的部分，但不管是下載框架React,或是Js延伸語言Typescript都會利用到node裡面的

node package management 俗稱npm

npm可以把他想成是一個啟動Js lib快捷鍵的指令，會利用npm來外接很多library或是javaScript的外包軟件工具，例如npm install 下載, npm start 啟動app等等的，並一開始很容易安裝錯誤，安裝錯誤的原因不外乎是沒有安裝在預設的路徑內，可以用的小撇步就是第一步確認node版本跟npm指令有沒有安裝在正確path裡面，當發現說找不到command not found:npm清除，並重新安裝在正確預設位置是一個方式，或是重新設立一個全域變數的路徑，之前也有遇過安裝無效可能都是電腦容量不夠，將下載預設路徑進行更改而發生的延伸錯誤。

下載與安裝Vscode 並可以準備一下自己的github帳號與用來做筆記的地方
這邊常用的做筆記軟體推薦HackMD與notion個人使用HackMD可邊做筆記邊摻入程式碼方便閱讀，並個人覺得軟體最難的不是理解而是先實際應用各個邏輯，需要大量的背誦記憶，所以常做筆記會進步很快，尤其變數一多時有紀錄就比較不會搞混。

Step 2. 開啟第一個React app透過CMD/Terminal指令

打開CMD/Terminal 俗稱的終端機來執行指令
可以去一般電腦Search 有放大鏡圖示的地方搜尋處輸入Terminal 或是CMD安裝create-react-app 指令，這串指令就如他寫的意思專門在安裝react的指令

sudo npm i -g create-react-app

所以sudo Mac的輸入自己電腦的密碼提供權限好讓他下載，npm啟動下載node插件指令，i安裝install縮寫，-g全球環境global讓指令不會是私域只能使用在特定資料夾，這邊有時候可能會有warning 如：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.`

就稍微聽他的修改成

sudo npm i -l=g create-react-app 

然後打完以後他應該會跳出Password: 就是你要輸入你Mac id設置的密碼
成功後，可以輸入create-react-app -help 看會不會跑出東西，還是說command not found: 一樣如果不行建議重新檢查路徑，並最後可以檢查版本create-react-app -V (大寫V)

選擇下載同一版本方式+@5.0.1

sudo npm i -g create-react-app@5.0.1

就可以輸入並安裝第一個React app 輸入下列指令

create-react-app bookingui 

bookingui 是此專案名 你可以創建你自己的 如myreactapp之類的
會需要跑一段時間，通常會Creating a new React app in,/Users/samko/bookingui 安裝在使用者後面，可以把他拉到桌面或是在創建一個新的資料夾使用mkdir 等等的，這邊做一下小指令分享容易忘記的
cd:傳輸到哪個資料夾，如cd desktop 到桌面到特定的資料夾去輸入指令執行的概念
mkdir:創建資料夾 不好記但就是makedir make directory縮寫

打開vscode開始創建第一個react app

Step 3. 了解各個folder與其package.json檔意思

React folder原始應該會有這些

public裡面index.html 網站首頁html原始檔，src folder source folder的意思，也就是我們之後都會在這邊主要操作的資源檔（相對於網站是資料來源）


一個Js component就會有一個css與之搭配(index.js配index.css)一個js架構一個css輔助設計ui設計的概念，或是也可以寫在一起用styled-component直接在component裡面遷入css styled合在更簡潔或是使用流行的tailwind，直接省去css命名問題，詳細情況後面會解說，此次專案會搭配css的進階版scss

ReactDOM與React解釋

DOM的全名是Document Object Model

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

在創立react的時候我們可以看到上面那樣的寫法，React與ReactDOM他們存在互補關係
白話文話來說：
React可以將html語法導入成javaScript extension JSX (XML)
就是js可以用html的語法來寫
意思上可能有點難懂，但可以解釋成是html與javaScript本來就是不同程式語言，react.js為js框架一切當然還是以js為主，但為了將網頁濃縮
html+css+js三種語言都變成一個一個的區塊，React將js也變成可以使用html語法
ReactDOM就是最後一步，最重要的一步，轉換成可以直接丟給瀏覽器看的關鍵因素

ReactDOM.render(<h1>Hello Sam</h1>,document.getElementById('root'));

這邊ReactDom想要render輸出h1但這個h1不是html的h1他是jsx h1,所以ReactDom 將jsx 變成了轉成了html可以顯示的畫面的概念與後面就是想要輸出的 區塊位置就是document.getElementById('root')有root這個id的<div></div>區塊
以圖來說就是下圖

package.json,package-lock.json 與 node_module意思

在要傳輸檔案時node_module通常都會刪掉或拿掉，如將react檔案上傳至github或是去虛擬伺服器時好讓自己的網站上線，拿掉除檔案較小也因為本地伺服器他其實會使用腳本指令npm i並npm start，並去安裝這些node_module，所以package.json這裡就是要告訴別人這個app要安裝node_module的哪些東西

npm init/npm install

這兩個之後可能也會容易搞混，npm install現在知道是依照package裡的套件索引來下載套件到node_module，那npm init 其實就是npm initial，為一開始先設立一個簡單的package.json好拉你可以做npm install，但因為我們直接create-react-app所以這部分他已經幫我們做好了，npm init的用法會用在之後nodeApi上，npm init也必須了解一下因為可能不一定要用react這個js的框架，對我們來說都只是在使用node衍生的lib框架那些的，所以當然可以使用來用執行其他，如vue,angular等等，所以這些方法都可以了解一下，順序是npm init 做出package, npm install 安裝package裡面的dependencies到node_module。

白話總結：npm init 下載目錄package.json ,npm install 下載目錄裡裡面的內容node_module
補充：如要打npm init指令安裝的話，也記得要打npm init -y這樣才有用 -y 是yes的縮寫

Step 4. 正式實作前開發環境準備

清除react沒用到的資料夾

先清除react沒用到的資料夾 為做實作前的事情做準備

Js 資料夾換成jsx 資料夾

所以在剛剛上面有講到(reactDom那邊)react將js轉成js擴充包概念jsx，所以為了跟原本js區別，我們可以將App.js換成App.jsx結尾，就直接打就行了做出個區別！index.js不用，因為他有ReactDom用jsx反而不行，App.jsx將會從這個最原始的Root component出發，並之後的component都會延續app.jsx為jsx結尾，都是使用React的javaScript extension概念

方法二、直接抓取Github開始的React資料夾

除了上述方法慢慢刪並做資料夾轉換，也可以直接抓取本作者上傳在Github開始前React資料夾並npm i 即可，這邊也會帶到一點github指令
https://github.com/SamKo88927/bookingcomChallenge
第一步 點選上述網址 並到Code 點選下拉式選單 點選https url右邊的複製

https://github.com/SamKo88927/bookingcomChallenge.git

會複製到這串url 並+在後面的git clone指令
打開空白vscode拉入一個新folder 打開terminal 輸入git 下列操作指令

git clone --single-branch -b "initial-react-app" https://github.com/SamKo88927/bookingcomChallenge.git

靠這個複製好的url 到我的專案裡面的initial-react-app檔



或是直接下載code.zip 並用vscode打開後
用Vscode的terminal 輸入上面講過的npm i 使package裡面的dependencies 可以統一下載至node_module 並再使用npm start

結論

今天先做了有關最基本安裝的一些小細節分享，一開始最容易常常碰壁而放棄
，網路上關於免費的資訊目前也較少，希望能按照這些目前本作者自己的理解與筆記去防止踩錯，減少剛入行的頭痛，如大家製圖的效果不佳，本人未來有時間也會計畫拍個影片來解說，以最好的效果跟最白話的方式來一起提升自身實力，希望大家能一起走下去別放棄在半路加油！也在跟自己加油！對React很熟的大神也可以等到7~8天後進來參與，前面都會內容較為簡單幫初心者與我自己複習的部分。