목차
머리말
React는 웹 및 모바일 프런트엔드 개발에 가장 널리 사용되는 JavaScript 패키지 중 하나입니다. Meta(이전 Facebook)에서 개발한 React를 사용하면 개발자는 재사용 가능한 구성 요소를 만들어 프런트 엔드 페이지를 완성할 수 있습니다.
그러나 엄밀히 말하면 React는 프레임워크가 아니라는 점에 유의해야 합니다. 이는 UI 요소 렌더링만 담당하기 때문입니다. 그러나 React는 Angular 및 Vue와 같은 프레임워크를 위한 또 다른 솔루션을 제공하므로 이를 통해 복잡한 프런트엔드 페이지 기능을 완성할 수 있습니다.
這一篇則是會介紹一個React中重要的語法 – JSX。
JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹
- JSX 是什麼?
- JSX 語法
- 使用 JSX 建構 React 元件
JSX 是什麼?
在講解 JSX 之前先來複習一下,前一篇所講解的,React 建立 DOM 語法
const dish = React.createElement("h1", "Hello World")
ReactDOM.render(dish, document.getElementById("root"))
透過上述的 React 語法可以轉換成以下 HTML DOM。
안녕하세요 세계
看到上面的程式碼應該不難想像,JavaScript 中的 React 語法相對難理解,且如果是一個更複雜有上千行的 HTML 文件,那程式碼會更加的複雜且難以理解。
因此 Facebook 團隊在開發 React 的同時,也針對這一個缺點,新增了一種更簡潔的語法,用來建構前端網頁元件,那就是 JSX。
JSX 是由兩個字所組成的縮寫 「JS」JavaScript 以及「X」XML。雖然 JSX 與 HTML 有點相似,但其實本質上還是透過 React 的語法去建構一個元件的,以下是一個簡單的 JSX 範例。
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
- Apples
- Bananas
- Cherries
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
可以看到中間幾乎與 HTML 語法相同,然而程式的開頭與結尾都是 JavaScript 的語法。
電腦其實也是透過一些工具,針對 JSX 語法進行轉譯,最後才會產生純粹的 HTML,之後的文章也會針對這樣的工具進行講解。
JSX 語法
JSX 語法看似 HTML,實際上它是 JavaScript 以及 React 的語法,因此這邊會針對 JSX 語法進行講解。
className
在一般 HTML 的語法中,我們如果要對一個 tag 加上 class 會是用以下的寫法
안녕하세요 세계
然而在 JSX 的語法中,要針對一個 tag 加上任何的 class,則是要改為 className。
안녕하세요 세계
巢狀元件
JSX 的語法與 HTML 相同,都是支援巢狀格式的,JSX 也可以建立自己的元件,並且將元件變成巢狀的格式。
複合表達式
JSX 本身也是由 JavaScript 的語法,因此完全支援之前我們所講解的 JavaScript 語法,以及 ES6 中的語法,如果樣板字面值(Template Literals)來做舉例。
const fruits = ["Apples","Bananas","Cherries"]
const myElement = (
- {fruits[0]}
- {fruits[1]}
- {fruits[2]}
`I Love ${fruits[0]}`
);
在 JSX 中可以用大括號把 JavaScript 的變數包進去,也可以使用樣板字面值(Template Literals)的語法將字串與 JSX 做結合。
JavaScript Map
既然可以使用 JavaScript 的語法,那我們也可以使用 Array 內建的 map 函數,來與 JSX 做結合。
const fruits = ["Apples","Bananas","Cherries"]
const myElement = (
{fruits.map(element=>{
- {element}
})}
);
透過 map 函數的使用也可以將多個 li 組合起來。
使用 JSX 建構 React 元件
最後要講解如何建構元件的,用最一開始的程式碼來舉例。
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
- Apples
- Bananas
- Cherries
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
第一行以及第二行用來呼叫 react 以及 react-dom/client 已經寫好的函式庫,並且使用內建的函式。
中間的 const 用來做宣告,並且裡面可以放置 JSX 的語法,其中可以寫一些 HTML,當這些完成之後就可以獲得一個名為 myElement 的元件。
最後透過 ReactDOM 裡面的 createRoot 函數,先建立一個 「id=”root”」的 DOM,最後再將自己建立的 myElement 元件放入至 root 中。
經過上面的流程,就可以建構出一個 React 元件(component)了。
결론
這一篇講解了一個很重要的 React 語法 – JSX,也是透過這樣的語法來讓我們更容易建立一個 React 元件。也另外講解了 JSX 的原理、語法以及如何建立一個元件。
제안사항이나 질문이 있으시면 메시지를 남겨주세요!
이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~
인용하다
리액트 토속 스포츠 시리즈
React 작동 방식 – React Vernacular Movement 05
JavaScript 고차 함수 – React Vernacular Movement 04
JavaScript Async Await – React Vernacular Movement 03