Tabla de contenido
Prefacio
React es uno de los paquetes de JavaScript más populares para desarrollar interfaces web y móviles. Desarrollado por Meta (anteriormente Facebook), React permite a los desarrolladores crear componentes reutilizables para completar páginas de inicio.
Sin embargo, cabe señalar aquí que, estrictamente hablando, React no es un marco. Esto se debe a que solo es responsable de representar los elementos de la interfaz de usuario. Sin embargo, React proporciona otra solución para marcos como Angular y Vue, lo que nos permite completar funciones complejas de la página de inicio con él.
這一篇則是會介紹一個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。
Hello World
看到上面的程式碼應該不難想像,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 會是用以下的寫法
Hello World
然而在 JSX 的語法中,要針對一個 tag 加上任何的 class,則是要改為 className。
Hello World
巢狀元件
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)了。
Conclusión
這一篇講解了一個很重要的 React 語法 – JSX,也是透過這樣的語法來讓我們更容易建立一個 React 元件。也另外講解了 JSX 的原理、語法以及如何建立一個元件。
Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!
Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~
Cita
Reaccionar serie de deportes vernáculos
Cómo funciona React – React Vernacular Movement 05
Funciones de alto orden de JavaScript: React Vernacular Movement 04
JavaScript Async Await - Reaccionar movimiento vernáculo 03