iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1

因為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功能就是用到再去找查了。


上一篇
Day1. 介紹與規劃
下一篇
Day3. React的基本用法 (二)
系列文
用Gatsby.js做出一個簡單的部落格28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言