iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
2
Modern Web

Zero to hero with React.js系列 第 3

【Day3 React】認識 JSX Syntax

理解 JSX

在撰寫 React Component 的時候,使用 JSX 可以提高程式撰寫的效率。JSX(JavaScript Extention)並不是一種全新的語言,他是一種語法糖(syntax sugar),看起來和 XML 非常相似。JSX 是一種 inline markup 可以將類似 HTML 的語法結構轉換成 JavaScript。

簡單來說,JSX 提供了比 JavaScript 還更直觀的 HTML like syntax。

JSX 是更快速、安全性更高、更簡易的 JavaScript


HTML 標籤 vs. JSX 組件

  1. React 可以 render 出 HTML 標籤或是 React 的組件
  2. React 的 JSX 是用 大寫 來和 HTML 標籤做區分的

JSX 提供了語法糖給
React.createElement(component, props, ...children) 方法

在 HTML 中,我們可以透過 class 來給予自定義的外觀屬性;在 JSX 中也可以,但 class 和 for 是 JavaScript 保留關鍵字用法,因此在 JSX 中使用 classNamehtmlFor 替代。

<div className="red">Children Text</div>;

compile 後的結果為:

React.createElement("div", { className: "red" }, "Children Text");

上一篇
【Day2 React】React 環境設定 採用 Webpack 和 Babel
下一篇
【Day4 React】終於跟 World 說 Hello World!
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言