今天終於進入重頭戲，我們來講講已經紅了一陣子的 React。

我自己是第一次接觸到 React，在這之前和大家一樣，都是使用 jQuery, Sass 在做網頁，一但網站的規模大起來，除了CSS命名的問題外，另外一個困擾就是 DOM 的操作，為了這二個大問題我也曾經研究過 BEM 的命名方式，以及 JavaScript 的優化方式。等到這回用過 React 之後，至少 CSS 命名的問題可以不用再煩惱了！

網頁由 DOM 所組成，React 網頁則是由 React elements 所組成，這是一個 React Element：

const element = <h1>Hello, World!</h1>;

是的，你沒看錯，直接把 HTML 寫成變數的值，在 React 中叫做 JSX。
React element 只是靜態的元素，頁面中互動的基本元件叫做 React component，component 是由 elements 所組成，一個 component 是一個可接受輸入值的 function 或是 Class，然後回傳一個 React element。
除了 React 這個 library 之外，我們還需要另一個 React DOM library，這個庫的作用在將 React element 加到 DOM。

ReactDOM.render(
	element,
	document.getElementById('root');
)

除了用 JSX 建立 React element 之外，也可以用 React.createElement()。

const element = React.createElement (
	'h1',
	{ className: 'greeting' },
	'Hello, World!'
)

有沒有覺得這樣寫起來比較麻煩？所以一般還是用JSX的方式寫。