概論:

出發點是React.js，必須得說，在這麼多前端框架，會選他是因為，我以為是最多人用，理由很單純。
可惜不是台灣最多職位需求的，通常Vue才是熱門。但我個人比較喜歡React的概念，我在這文章系列將偏重實用性為主。理論類的並不會為主要陳述。在本篇中裝有一個非常強調的部分是React.js本身 絕對不選最新版ver18，在此強調。

必須理解如果你需要更多的知識，請爬文google/stackoverflow/it邦幫忙 或是碰運氣問看看chatgpt如果他沒在唬爛

必須理解React是幫你把所有元件生成、操控、消滅的流程都一口氣寫好。
例如最簡單的一個生成元件 <input type="text"/> 很直觀，沒問題跟直接寫html一樣啊。

(在此補充 請注意 在普通的html的撰寫過程是不需要加'/'在最後字元，但React是絕對必要。)

現在我要把這個input賦予屬性value 並且已知宣告參數: inputVal, inputID
一個input元件屬性更新，如果我想要更新這個元件的value,在原生js該怎麼處理呢?
先把更新的數值賦予記憶體空間 inputVal 再將數值更新到元件上

inputVal="new String";
document.getElementsByTagName('input')[0].value="";

很簡單對吧，但是觸發inputVal的地方太多，每個地方都會需要加上一段 更新動作，一次還好，多次重覆撰寫不僅僅是對開發人員的災難，你如果元件變化了，改成用button 同樣可以使用屬性value，修改會是災難。而且這嚴重違反了clean code的原則。

在vue就好多了，只要<input v-model="inputVal" :value="inputVal">就可以自動綁定參數與物件屬性的關係
在react <input type="text" value={inputVal} key={inputID} /> 幾乎也是自動綁定，但是得必須先用宣告給react框架說，欸，我有一個參數要是動態的，相關的更新要自動幫我處理喔。

[inputVal,setInputVal] = useState('參數數值');

到這裡，同樣是js框架語言，react與vue的概念已經可以看出來對於參數與寫法會完全不同。
在撰寫React.js的時候請當作你只用來完成整個html文件。

環境:

為了讓各位可以入手軟體，不免俗地都要從安裝軟體開始，
在開始安裝前，至少需要基本的電腦環境。

我的操作環境與軟體:
可連網,Windows 10, Chrome,FireFox
至於編譯器，各位客官可以挑自己順手的，或者可以參考我在本文章將使用的Visual Studio(or VSCode)

開始軟體安裝清單，原則上有LTS(長期穩定版)為主，其次選擇最新版，會用到的網路帳號，請自行註冊。
在本文中裝有一個非常強調的部分是React.js本身 絕對不選最新版，在此強調agian。
在文章各篇章會寫入這區塊要安裝的軟體，開頭第一篇環境篇，會全部提到。
基本環境
node.js 選 LTS版 (內建npm 不要問我npm怎麼安裝)
https://nodejs.org/zh-tw/download
編譯器 :Visual Studio
https://visualstudio.microsoft.com/zh-hant/downloads/

虛擬機: VirtalBox

本地模擬後端server
xampp(如果你有 會滿方便) (參考it邦友:https://ithelp.ithome.com.tw/articles/10214064)

FTP檔案管理:
FileZilla

下載:
Linux主程式: ubuntu-22.04.2-live-server-amd64 (基本上是ubuntu22 LTS版)

過程中運行軟體:
composer
Laravel
連結可能因為時間而過期，直接搜尋通常也可以

本篇涵蓋區塊

• 基本介紹與安裝node.js+npm
• 開始react撰寫
• React降版18 => 17
• 基本元件 生成,操控
• 自定義內部元件
• 常用plugin 套件/插件
• global參數處理
• 搭配GitLab 上架Vercel
• 前+後 Laravel + React
• 自架Linux 用FTP更新