因為gatsby是基於React，所以在使用上需要會一些React語法，而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了，蠻合理的)，官網上的教學也都會用到React的基本語法，所以在第二天做個簡單的介紹。

• JSX語法

首先我們看到/src/pages/index.js

import React from "react"

export default () => <div>Hello world!</div>

React中使用一種叫做JSX的語法，這種語法類似把HTML寫在js檔裡面，唯有幾個個規則不同於HTML

• 例如:class要寫成className 以及 標籤的尾巴一定必須關起來，像<img src="#">就必須寫成<img src="#"/>才可以
• 最外層必須只由一個標籤包住，以這個例子來講，便是div
• 以中括號來做js資料和變數的輸出
• 並且，在有多個標籤的情況下，我們要用括號把我們的JSX給包起來，像這樣:

import React from "react"

export default () => 
(
  <div style={{ color: `purple` }}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
  </div>
)

此外，我們可以在JSX中允許我們使用描述css樣式的物件來設定style屬性來改變樣式(以上例來講，就是把{ color: purple }塞進中括號中)，所以和以下程式碼是相同的:

import React from "react"

const divStyle = { color: `purple` };

export default () => 
  (
    <div style={divStyle}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  )

而在index.js 匯出了一個箭頭函式，並且該函式回傳一個以JSX表示的react元件的物件，這就是會被渲染到我們首頁的內容。

進度和時間關係，所以文章內容應該一次都更新不多。
明天預計更新如何引入其他的react的組件進app.js裡面，和用prop在組件間傳遞資料。
後天利用元件以及元件的函式，來做個很小的功能來做個小總節，React的基本大概就寫這些，畢竟這方面我也不是特別熟悉，所以之後的其他React功能就是用到再去找查了。