昨天已經建立好開發React的環境了，接下來就可以開始玩轉React啦！在React中有個非常重要的概念：元件( Component )，今天會來介紹介紹元件是甚麼，並寫出第一個元件！

元件介紹

先來介紹React中最為重要的概念之一：元件(Component)，這是React的基本元素，網頁中的每一個獨立出來的頁面、功能，都是元件構成的。
要怎麼寫出一個元件呢？其實不難，Component是用function寫成的：

import React from 'react';
import ReactDOM from 'react-dom';
// 引入react和reactDOM

const App = () => {
  return React.createElement('div', null, [
    React.createElement('h1', {style:{color: "red"} }, 'Hello World'),
  ]);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <App />
  </div>
);

來說明一下這裡的程式碼是什麼意思：
首先是App，這個App的function就是React中的Component，在function中return出來的就是要渲染出來的程式碼。
再來是createElement，createElement是React創建元素的語法，用法是:

React.createElement(‘HTML tag’, {style: {css}}, ‘innerHTML’);

第一個參數要放入要創建的HTML元素，第二個參數要放入css，不需要的話可以放入null，第三個參數則是HTML元素中的內容。
要注意的是，css要用Object形式，舉個例子：

// 要讓h1變成紅色
React.createElement(“h1”, {style: {color: “red”}}, “this is red”);

如果要在一個HTML元素中，再放入一個HTML元素的話，就要在第三個參數放入一個Array，在Array中再放入createElement：

React.createElement(‘div’, null , [
	React.createElement(‘h1’, null, “This is h1”),
	React.createElement(‘h2’, null, “This is h2”)
]);

再來，最後的createRoot則是建立一個React root節點，將上面我們做出來的component渲染在root節點上。建立時，需要放入HTML的節點，通常是<div id=root></div>元素。

const root = ReactDOM.createRoot(document.getElementById('root'));

再用創建的root節點render component:

root.render(
<div>
    <App />
  </div>
)

這樣就完成一個React的程式了。

JSX 語法

然而，這樣的寫法實在不怎麼方便，也不太好讀，因此大部分在開發React程式時，都是使用JSX語法。
JSX語法長的就像是HTML，因此開發者可以很輕鬆的使用熟悉的HTML語法開發出網頁:

const App = () => {
	return (
		<div>
			<h1>This is h1</h1>
		</div>
    )
} 

使用JSX也可以更方便的引入其他的Component。沒錯，** Component是可以包在另一個Component裡面的**，例如:

const Title = () => {
	return (
		<h1>This is title</h1>
    )
}

const App = () => {
	return (
		<div>
			<Title />
		</div>
    )
}

要注意的是，在使用JSX寫Component時，要將名稱開頭字母定義為大寫，JSX會自動將開頭大寫的元素判定為Component，這樣也好跟一般的HTML元素分別。
在JSX中也能置入JS程式碼，只需要使用{ }包住程式碼即可，但必須是表達式，也就是必須要能夠回傳出JSX程式碼:

const App = () => {
	return (
		<div>
			// 使用三元運算子作條件控制
			{ 5 > 2 ? <div>big</div> : <div>small</div> }
		</div>
    )
}

如果真的很需要很需要在Component中寫非expression的JS，可以使用IIFE(立即執行函式)的寫法包裹住程式碼，也能運作。

此外，JSX仍然是JavaScript，不是HTML，因此所有標籤屬性必須改成使用駝峰寫法，而class則是因為跟JS保留字重複，需改成className。

恭喜你，寫出來第一個React程式啦！只要對function有一定熟悉度，要寫出Component並不會很困難。