The Birth of React

• 以前是單純 HTML, CSS, Javascript 跟 DOM 互動

  • 問題是每個瀏覽器都有不一樣的功能

• jQuery 出現

  • ➡️ 讓我們能用一種structure(一統的API)跟各樣的瀏覽器DOM都能互動，減少了複雜性
  • 但後來的網站互動性越來越大（像臉書），檔案也變得越來越大

• BACKBONE.JS 出現

  • ➡️ 有一些 Library 幫我們組織Javascript檔案

• 後來 Single Page Application 出現

  • 本來每一頁都是一個 HTML 檔案管理的，每次到不同的頁面都要跟Server request一次css, html, css 檔案
  • jQuery, Backbone, AJAX 讓我們能把寫程式的注意力從HTML轉移到Javascript，以前每點一個新頁面就產生一個新的request，現在只需要載入網頁一次，只需要更新部分的DOM去刷新內容

• 2010 AngularJS 出生（by Google）

  • Model View Controller (MVC)
  • 後來網頁變得更複雜，資料在各種module之中傳輸，Data Flow很亂、維護變得更費力，需要更好的方式

• 2013 React 出生 (by Facebook)

• 2014 AngularJS 決定要重寫 ➡️ 改名叫 Angular

  • 過程中很多人轉向寫 React
  • 現在 Airbnb, Uber, Netflix, Twitter, Reddit, Pinterest, Paypal, Stripe 都開始用 React

Why Use React and Create-React-App

今天我們會開始進入React的部分，一開始我想先介紹一下為什麼要用React跟create-react-app。

React 事實上一開始是 Facebook 工程師開始的，目前由 Facebook 跟其社群一同維護，而 create-react-app也是一群聰明的工程師為了讓我們能減少開始的阻礙而發明的。

因為 React 用到的 Javascript 版本比現今各種瀏覽器能理解的版本還要更新，所以有一些如 Babel 跟 Webpack 的工具能幫助我們把 React convert 成瀏覽器能理解的版本，不然瀏覽器看到 React 的 js 語法只會一頭霧水，然後選擇忽略。

Facebook 建立此工具 create-react-app，讓新手工程師（如我）能快速開始寫 React，而不用擔心 Configuration 的設定，因為 create-react-app 都幫我們處理好了！

Create our React project

Step1: 確認 Node 是最新版本

因為Node.js的版本非常的多，如果你是一位新手，建議是安裝最新的穩定版本（LTS)

1. 在 Node 網站確認目前最新的穩定版本是多少 (LTS)
   
2. 依照你習慣的軟體，安裝最新的LTS版本。如果你是用 nvm，可以用 nvm install <version>，或是 nvm install --lts
3. 用 nvm use <version 切換到安裝好的最新版本
4. 檢查 Node 版本 node -v
5. 檢查 NPM 版本 npm -v
6. 檢查 NVM 版本 nvm --version

$ nvm --version
$ nvm install 12.18.3
$ nvm use 12.18.3
$ node -v
$ npm -v

Step2: Create-react-app

$ npx create-react-app concert-preparer
# 移入資料夾
$ cd concert-preparer
用VS Code打開檔案
$ code .
開始預覽專案
$ npm start

明天會繼續介紹建立專案中的檔案分別有什麼功用

希望我的分享有幫助到你

謝謝你的追蹤
Stay tuned and see you tomorrow!

About Roy

Social Media
Facebook - RoyWannago
Twitter - @roywannago
Instagram 分享設計與程式學習 - @royflwdesign
Instagram 分享 UX 迷因 - @UX_WTF
YouTube 分享美國生活- RoyWannago YouTube