iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

Node-Red 貓的真實之口系列 第 12

Node-Red 貓的真實之口-React 基礎觀念與開發工具 - 3

元件與 Html:從一個 React 實例出發

哈囉,各位開發者晚上好,你知道 React 幾歲嗎?

今天這篇文章我們會專注於一個實際例子,以 Q&A 的方式來介紹 React。你可能會遭遇一些沒看過的語法覺得困惑,但請沉住氣,讓筆者來一一介紹。

請先開啟範例以下的 CodeSandbox 範例,搭配文章閱讀:

https://codesandbox.io/s/github/liuderchi/chattium/tree/demo/client5/client

這是一個開發中的聊天室應用,右側預覽頁可以看到聊天訊息,左側可以看到程式碼與目錄。右側的畫面,是由左側 src 資料夾內的程式產生的。

接著,讓我們來聊聊幾個有趣的問題

❓React 程式的語法怎麼會有像是 Html 的地方?

觀察元件 src/components/App.js,可以發現在下方(line 27-line 31)有一些奇怪的語法,看起來不像 JavaScript,有點像 HTML,這是什麼呢?

它是 JavaScript 的「擴充語法」JSX (JavaScript Syntax Extension),靠著它有階層架構的語法,我們可以像 HTML 一樣描述元件的結構,再靠著轉譯器將 JSX 轉化為 JavaScript 程式。從中可以看到 HTML div header,可以預期 App.js 會產生一個 divheader。而另外兩個 Welcome MessageCardGroup,就是客製化的 React 元件。

JSX 描述片段的 HTML 結構。JSX 裡面可以使用 HTML 元素或 React 元件。

?試試看,在 header 下一行插入 <div>hihi</div>,頁面會變動嗎?

❓那 React 元件是什麼?包括哪些部分?

React 元件就是「負責生成 HTML 片段」的 JS 程式

舉例來說,App.js 裡所有的程式碼,
就代表著 App 這個元件,而它生成的 HTML 寫在第 27 行到第 31 行。

慣例上,開發者會將一個元件的程式集中放在一個檔案,
作為一個模組來給其他元件重複使用。

?猜猜看,資料夾 src/components 裡面有幾個元件?

所以,從 App 元件我們能一窺頁面的架構,如果想要知道細節,只要往下檢視它使用的其他元件 Welcome.jsMessageGroup.js 就可以知道

接下來,我們會來看看如何控制元件來顯示資料。


上一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 2
下一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 - 4
系列文
Node-Red 貓的真實之口13

尚未有邦友留言

立即登入留言