前言：

在經過兩個禮拜的內容後，相信大家對寫網頁也有一定的基礎了吧！這兩個禮拜我們介紹很了多很好用的工具，像是php, Mysql, JavaScript等等。當然目前為止教的東西拿來寫一些簡單的網頁已經是綽綽有餘了！但今天我們要來介紹另外一個非常強大的工具，可是說是在設計、效能兩個方面都狠甩過去技術好幾條街的新東東，那就是我們的React！
阿森預計會花個三天來做個簡單的介紹，之後就會進入NFT網站架設的部分了。

那就讓我們開始今天的React吧！

淺談React：

其實文章一開始的圖片有個小小的錯誤，那就是React其實不是一個framework，而是一套JavaScript的library，在網頁的MVC模型中，他只負責V(view)這一塊，所以可以說是專門開發UI的工具！

那接下來就讓我們看看官方網站是怎麼介紹的吧：

「React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面。它讓你使用小巧而獨立的「component」，來建立複雜的 UI。」

好的，是不是完全看不懂只覺得很厲害呢！其實React的概念有點讓我想到前幾年Google提出的一款手機。雖然後來好像胎死腹中了。

當初google的計畫就是想設計一款如樂高積木一般，可以更換所有組件的手機。而阿森認為這個想法不就是React嗎！只不過每一個組件就是我們要寫的component，可能是Navbar、Herosection甚至是一段文字加圖片，在寫完這些組件後，只要對他們進行微調，就可以快速的組合成各種網頁，達到高自由度且高效的成果。

在效率上，React使用了Virtual DOM的概念，也就是透過JavaScript的物件模擬DOM的elements，並對他們進行操作，最後再一併更新到網頁的DOM上，這樣的做法大大提升了傳統上不斷更新DOM所需的時間，讓網頁達到更佳的效率。

怎麼讓他有反應？

要踏出React開發的第一步就是要先安裝node.js！那關於node.js是什麼呢？~~我們就下次再專門寫一篇文章介紹。~~其實大家可以想像成他是和JavaScript這個程式語言溝通的橋樑，我們的電腦本身其實讀不懂JavaScript，要講到這個就要講到很多電腦語言的概念而且非常麻煩...所以只要想像他是一個橋樑！負責把我們寫的code轉換成電腦看得懂的指令，而在這裡我們稱呼他為執行環境(runtime)。

那要安裝node只需要去他的官網：

https://nodejs.org/en/

這裡因為我們不會使用到node本身開發相關，所以直接下載LTS的版本，也就是Long Term Support，照著他的只是安裝完成後，我們打開terminal，或是window的powershell，到你想創造React網頁資料夾的地方，像我就是到我的user folder，輸入下面這串指令：

$ npx create-react-app 你想要的名稱

這裡我把資料夾取名為it-helps。

之後給他跑一下：

再來我們可以cd到我們的資料夾：

$ cd it-helps/

然後輸入:

$ npm start

你的第一個React網頁就完成啦！

接下來操作就是把整個資料夾拖曳到VS Code的Workspace裡，你就準備好可以上工了。

小結：

今天我們大致介紹了React的概念，以及如何開始你的第一個React，那接下來我會介紹一般開發一個網頁時，架構會長怎樣。

那我們就明天再見吧！