iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

從0到1: 5個月轉職工程師大挑戰系列 第 6

Day 6: 為什麼用React?什麼是Create-React-App? { D2 }

  • 分享至 

  • xImage
  •  

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)
    https://ithelp.ithome.com.tw/upload/images/20200906/201117491rRQmD09Vz.png
  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

https://ithelp.ithome.com.tw/upload/images/20200905/20111749rYM3g1vpvg.png

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

希望我的分享有幫助到你

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


About Roy

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


上一篇
Day 5: 試著用 React 重做 Python API Project { D1 }
下一篇
Day 7: 接續 Create-react-app: What's in my folder? { D3 }
系列文
從0到1: 5個月轉職工程師大挑戰7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言