在JSX中嵌入javascript表達式

，要使用在JSX中用大括號{}將包javascript表達式包起來就可以使用了。

在大括號{ }中可以使用：

• javascript表達式，計算過得到的
• 變數或常數
• 陣列值
• 回呼函式
• 三元運算子
• /.../註解

等等...

function greeting(){
	return 'Hello'
};
const name = 'Amy';


function App() {
  return (
  <h1>
    {greeting()+ ','+name}
  </h1>
)};

在 JSX 中使用 三元運算子

因為只能使用 JavaScript表達式，所以在 JSX 無法使用 if (if 是一個陳述式) ，但是可以使用 JavaScript 三元運算子。

function App() {
  return (
  <a>{data.login?'登出':'登入'}</a>
)};

JSX 本身也是 Javascript 表達式

在編譯之後，JSX轉換成一個function返回的Javascript的物件形式（請參考第七天的文章）。

可以在function裡的if 跟 for 迴圈中使用 JSX，可以在JSX中使用function傳入的參數。

function getName(name) {
  if (name {
    return <h1>Hello, {name}!</h1>;
  }
  return <h1>Hello, admin.</h1>;
}

JSX的標籤

React可以使用html標籤和React自定的元件標籤

html標籤使用英文小寫字做為開頭

const element =<div>Hello!</div>

自訂元件標籤使用英文大寫字做為開頭(可使用大駝峰寫法)

const element =<MyComponent>Hello!</MyComponent>

JSX 的屬性

跟 HTML 一樣 JSX 的 tag 可以有屬性：

可以使用引號，引號裡面的屬性值的型態是字串

const element = <img src="image/image.jpg" />;

也可以透過 { } 使用javascript給予不同型態的動態屬性值：

const element = <img src={webImage.Url} />

因為 JSX 是 JavaScript，所以React元素的屬性名稱也是按照 JavaScript 原生的語法中的className去定義屬性。而 for 則是要用 htmlFor。

例如：

const element = <h1 className="title">Hello, world!</h1>;

JSX的子元素(Children)

在 JSX 包含開始與結束標籤的情形下，夾在兩者之間的內容為children，我們可以靠children傳遞狀態（ prop）到元件之中。在後面文章會詳細說明React的prop傳遞。

Children的類型有很多種：

JavaScript 表達式、字串、Functions、另一個元件都能是Children。

const element = 
<MyComponent> 
'標籤裡面的都稱為Children'
</MyComponent>

如果標籤內為空，要用 /> 關閉這個標籤

const element = <img src={webImage.Url} />

JSX語法中只能有一個根元素

多個元素的情況下會造成無法編譯為React.createElement的形式

需要把子元素包在一個根元素下面，像下面範例中最外層的 <div></div>。

//錯誤
function App() {
  return (
  <h1>標題</h1>
	<p>內文</p>
)};

//必須有根元素
function App() {
  return (
	<div>
		  <h1>標題</h1>
			<p>內文</p>
	</div>
)};

從 React 16 起，新增了 Fragment 的功能，讓你不需要在 DOM 中增加這個額外節點了：

function App() {
  return (
	<>
		  <h1>標題</h1>
			<p>內文</p>
	</>
)};