iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

React + D3 的正確姿勢 系列

資料視覺化可以說是 Modern Web 一項非常重要的技能,雖然目前市面上有非常多可以用簡單的程式碼繪出圖表的套件,但本系列文並不會這麼做,利用 30 天的時間用最原始的視覺化方法帶大家理解整個圖表製作的過程,並且搭配目前最夯的 React.js 以及 React Hook 讓大家可以用很潮的寫法進入資料視覺化的世界

鐵人鍊成 | 共 30 篇文章 | 54 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day01-系列文規劃、介紹

前言 大家好我是Andy,今年又回來參加鐵人賽了,希望今年也能順利地完賽XDD 這次要帶給大家的是資料視覺化的技能,使用的是最麻煩同時也最彈性的 D3.js,同...

DAY 2

Day02-React.js基本介紹(JSX)

什麼是 React.js 在開始正式進入今天文章的教學內容之前,先帶大家簡單了解一下什麼是 React.js 。 一進到 React.js 的官網便可以看到這段...

DAY 3

Day03-virtual DOM

前言 今天要來介紹一項非常重要的觀念,只要講到 React.js 就一定會提到 virtual DOM 這個東西,究竟為什麼需要 virtual DOM 呢?今...

DAY 4

Day04-React components

前言 今天要來介紹 React.js 中一項蠻重要的觀念,在 React 的世界非常強調模組化,當每個小螺絲都做好自己的角色後,組合起來的產品也就穩定很多了,如...

DAY 5

Day05-state and props

前言 今天要來談一談 React 是如何更新 component ,今天的文章會跟昨天講到的 component life cycle 息息相關,假如讀者對 c...

DAY 6

Day06-React元件比較

前言 今天要來講講比較進階一點的 component 了,如果對於 component 的基本觀念有任何不懂的歡迎先去看前兩天的文章來奠定一下基礎,沒問題的話就...

DAY 7

Day07-React event handler

前言 在講完 React.js 中的基本架構後,今天要來講講要如何在 JSX 中加入 event handler ,既然 React.js 可以說是將 HTML...

DAY 8

Day08-List and keys

前言 今天的文章有點偏向番外篇,但只要寫 React.js 還是會需要知道這個重要觀念,今天要來講講 React.js 如何處理 List ,相信身為前端工程師...

DAY 9

Day09-React Hook

前言 今天要來介紹本系列文中第一個非常重要的觀念了,在前面的文章有提到元件的比較其中提到了 Functional Component ,其實 Functiona...

DAY 10

Day10-React環境架設(create-react-app)

前言 在之前的文章都是講如何透過線上編輯器來進行 React.js 的撰寫,在今明兩天的文章會教大家如何在本地端也能撰寫 React.js ,俗話說的好:萬事起...