iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
自我挑戰組

30 天線上自學前端系列 第 26

[Day 26] [React] React.js 簡單介紹

  • 分享至 

  • xImage
  •  

React.js 是什麼?

課程倒回去認真看了幾次介紹,可能還是有解釋錯的地方 XD 如果有錯請在下面留言給我~

React 官網上的一句話介紹是:

用來實作使用者介面的 JavaScript 函式庫

而課程裡面的快速介紹是:

這是網頁的框架,讓大家可以用 React 更快速、更簡便的方式來建造漂亮的使用者介面在 web websites 和 web apps 上。React 最棒的地方是 React 很簡單就可以創造出重複的 elements,這裏老師使用的範例說明網站是 Airbnb,每個介紹房型的區塊有不同的資訊,但是個別來看又有很多相同的地方,像是評分、超讚房東標籤等等,所以當遇到要展示這些這麼多的區塊,可以用一個 component 就做好,然後針對不同的區塊資訊進行客製化。

單就從效率來看,最後結果會變成把很複雜的使用者介面結構變成一個 component tree。

像是 airbnb 這樣:

https://ithelp.ithome.com.tw/upload/images/20220925/20151588WLO57ZIDbS.png

而 component tree 會是長這樣:

From: The Complete 2022 Web Development Bootcamp
https://ithelp.ithome.com.tw/upload/images/20220925/20151588H9NhKWOMtn.png

React 第二個好處是可讓我們在同一個檔案裡面,同時加入包含有 HTML, CSS, JS 的語法,所以不管是編輯上、閱讀性都會更好,因此也會更容易使用。

第三個好處是 React 會去比較有變化的地方,所以會讓網頁變得更有效率。

React 還有一個優點是很多大公司在使用,像是 Airbn, Uber, Facebook, Netflix, Instagram 等等都是在用 React web framework。


因為以上的資訊有點少,所以我又大概 Google 了一下 React 詳細的介紹,連帶還有 JSX, Babel 的介紹也一起找到了~ 所以我筆記在下方:

Day02-React.js基本介紹(JSX)
Day03 | JSX 瀏覽器看不懂?要翻譯就靠 Babel


上一篇
[Day 25] [版控] Git - 分支 (branch):建立、切換
下一篇
[Day 27] [React] JSX 和 Babel 簡單的用法介紹
系列文
30 天線上自學前端72
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言