iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

用Gatsby.js做出一個簡單的部落格 系列

第一次接觸gatsby.js,正好有機會,能夠學習並且參加這次的活動
雖然可能無法完賽,但希望能把一些成果作為紀錄。

參賽天數 14 天 | 共 28 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1. 介紹與規劃

Gatsby.js是一個靜態網站的生成工具,整合了React框架、webpack 以及GraphQL 這種比較新型態的 API 介面。因為其生成的是純靜態的頁面...

2019-09-05 ‧ 由 轟天旅人 分享
DAY 2

Day2. React的基本用法 (一)

因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...

2019-09-06 ‧ 由 轟天旅人 分享
DAY 3

Day3. React的基本用法 (二)

今天最一開始,我們要在我們的主元件中,去加入一個子元件( sub-components )。 Sub-component 首先,我們新增src/comp...

2019-09-07 ‧ 由 轟天旅人 分享
DAY 4

Day4. React的基本用法 (三)

props 當父元件想要傳參數給子元件,子元件想要從父元件那邊得到資料時,我們就會用到props這個東西了~ 用法十分簡單,首先,我們新增一個檔案src...

2019-09-08 ‧ 由 轟天旅人 分享
DAY 5

Day5. React的基本用法 (四)

今天要講到的是react中的事件監聽,在react中,只要在JSX的元素標籤內,根據特定方法給出的屬性名,給予其所需執行的方法,就會在事件觸發時做執行了,舉個例...

2019-09-09 ‧ 由 轟天旅人 分享
DAY 6

Day6. React的基本用法 (五)

這兩天會開始做一點小東西,做個react的總結,為了實作上的方便性,可能會用上前幾個文章沒講到的語法但不會都詳細說明,我會簡單的說一下功能,有興趣的再麻煩去看看...

2019-09-10 ‧ 由 轟天旅人 分享
DAY 7

Day7. React的基本用法 (六)

今天新增了deleteItem的方法,並在JSX中加入我們的刪除按鈕,並綁到deleteItem上。 這邊用到官方文檔給出的一個方法,可以同時間事件跟參數綁到監...

2019-09-11 ‧ 由 轟天旅人 分享
DAY 8

Day8. GraphQL簡介

GraphQL是facebook在2015年推出的一種新型態的API,那為甚麼要使用這種api呢? RESTful API不好嗎? RESTful的確有一...

2019-09-12 ‧ 由 轟天旅人 分享
DAY 9

Day9. GraphQL ( Schema 和 Query )

一個GraphQL的query語法可能會長得像這樣: { me { name appearsIn } } 和他的回傳結果可能會是長這樣...

2019-09-13 ‧ 由 轟天旅人 分享
DAY 10

Day10. 實作GraphQL by Ruby on rails ( 環境安裝 ) (一)

如果您有更喜歡的後端語言,可以選擇以其他語言實作,在How to GraphQL這個網頁有提供許多語言的範例教學,作法應該都是相似的概念。 在今天的一開始,我們...

2019-09-14 ‧ 由 轟天旅人 分享