技術 Day1-鐵人賽大綱 & 為什麼要使用 Hook?

鐵人賽大綱 在這次鐵人賽的挑戰中，主要的目標是希望自己和讀者們可以更加認識 React.js 或者是複習一下以前學過的知識，所以安排了幾個單元來進行介紹，預期介...

技術 [Day 06] 一磚一瓦-React Component

Component的概念就很像一塊塊積木，可以拼湊組成城堡或是飛船之類的，Component裡頭會回傳React element，透過這些Component就可...

技術 Day26. 部落格實作 (五)

今天實作首頁的顯示舊文章的按鈕功能。 在實作前想先介紹react的hook這個東西:在去年以前，react的組件實作都是使用Class component，也就...

技術 【React.js入門 - 27】 我要更多更多的分頁 - react-router-dom (上)

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

技術 【React.js入門 - 11】 開始進入class component

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

技術 Day5. React的基本用法 (四)

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

技術 Gatsby.js 未來的網頁10：GraphQL Filter & Sort

上一篇中，我們完成了一個簡單的Index頁面。今天，我們再加一些功能：1）在文章中設定是否為草稿，若是，則index不顯示，這可以透過GraphQL的filte...

技術 Gatsby.js 未來的網頁09：Index頁面

上一篇中，我們用GraphiQL測試了GraphQL的查詢。今天，我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...

技術 [影片]Gatsby.js 未來的網頁08：GraphiQL

Gatsby提供了一個叫做 GraphiQL 的工具，幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面，讓我們可以直觀地看到查詢的結果...

技術 [影片]Gatsby.js 未來的網頁07：自動生成文章

上一篇中我們準備好了Markdown、post template，以及相應的一些GraphQL query，今天就要使用Gatsby提供的createPages...

技術 [影片]Gatsby.js 未來的網頁06：加入Markdown

Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。 YouTube Vid...

技術 [影片]Gatsby.js 未來的網頁05：安裝Plugin

和WordPress一樣，Gatsby.js也有plugin系統，透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝p...

技術 [影片]Gatsby.js 未來的網頁04：新增頁面

今天要介紹的內容很簡單：如何在Gatsby中新增頁面。新增頁面的方法不只一種，今天先介紹最簡單的方法。 YouTube Video: layout.js vs...

技術 [影片]Gatsby.js 未來的網頁03：File Structure

我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...