學習 React 之前，可能需要有一點 JS 的底子

React 中沿用了大量的 JS 的觀念

如果不太懂 JS 觀念，在學習 React 過程可能會很挫折

廢話不多說，我們直接進入主題

我們需要先來知道 JSX 是什麼(非常基本、非常重要！)

JSX 長怎樣

JSX 長得非常像 HTML tag

但他不是 HTML tag，不過會產生 HTML tag

let yy = <p>Hello React!</p>

知道它的長相後，我們就來看一下他到底是怎麼運作的

JSX 怎麼運作

JavaScript 並不會自動去編譯 JSX

需要透過 Babel.js 這個工具來協助打包

當網頁開始載入時， Babel 就會去解析 markup (也就是 <></>) 並且尋找 JSX 元素，並且利用以下方法把 DOM 元件做出來，產生 HTML tag

第一個參數為抓到的 markup 內容
第二個參數為這個 DOM 元素的屬性，像是 id className
第三個參數為此 DOM 元素的 children

let yy = React.createElement("p", {}, "Hello React!")

我們在瀏覽器中就可以看到由 p 標籤所做出來的 Hello React!

為什麼要用 JSX

其實在 React 中也有其他編寫元件的方式，不過 JSX 目前是 React Developer 最泛用的方法之一

目前的瀏覽器僅支援 HTML / CSS / JavaScript
隨著科技及網路應用技術發展日趨成熟，
網頁程式邏輯越來越複雜、變化越來越多元，
越來越需要使用 JavaScript 來做出互動效果。

因此 React 團隊推出了 JSX ，
目的在於使讓網頁元件化，
讓複雜的邏輯拆分成一個個組件，
不僅在開發上增加了可讀性，也提升了開發人員在開發時的維護性。

JSX 的特性

1. 每個 JSX 只能有一個父層，例如

<div>
  <p>Hello World!</p>
  <p>Welcome to React!</p>
</div>

如果是以下情況就不能被允許

<p>Hello World!</p>
<p>Welcome to React!</p>

為什麼呢？ 因為在編譯過程中會變成 Virtual DOM 元素，

這些 Virtual DOM 必須要有個根節點，讓 React 建立出像是 DOM 元素的樹狀架構

• Virtual DOM 指的是使用 React 的語法創造出來的頁面架構，有點類似 HTML 的概念，JSX 就是一個例子

2. 屬性使用 CamelCase

在 React 中怎麼使用

在這邊就不介紹怎麼安裝及建立 react 專案囉(網路資源很多)

1. 找到 App.js 檔案，將 JSX 加入

找到 App.js 檔案，內容會是下列程式碼

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

為了清楚看到效果，我們把 function App 裡面的程式碼刪除，並且隨意加入一個 JSX

function App() {
  let yy = <p>Hello React!</p>;
  return yy;
}

2. 到瀏覽器查看結果

這樣我們就知道怎麼使用 JSX 了！

不過實際使用時，我們通常是將 JSX 寫在一個 function component 中，最後再到 index.js 中組裝起來

後面我們就會提到 function component 是什麼囉！