iT邦幫忙

鐵人檔案

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

在 React 生態圈內打滾的一年 feat. TypeScript 系列

在「一步一腳印」學會 React 後,只是另一個起點的開始。

去年鐵人賽用力學會 React 的同時,也換了一份前端工作,學會了然後呢?

本系列會重新闡述及分享這一年內在 React 生態圈內所學及使用的框架,不論是不懂 React 的新手也好,初學者、正在以 React 開發的工程師、高手們,都可以享受在本系列的文章中,並更了解 React 。

除了以同主題再戰 React 外,也另外收錄了與 TypeScript 的使用方法及開發方式,相信不會讓大家失望!

文章間的學習曲線會控制的平穩,讓大家以輕鬆的心情每天花個五至十分鐘閱讀 : )

鐵人鍊成 | 共 31 篇文章 | 42 人訂閱 訂閱系列文 RSS系列文 團隊IT成長團
DAY 1

Day 00 | React With TypeScript - 旅途漫長,所以我們需要地圖

Hi!大家好,我是神 Q 超人,很開心又過了一年了(咦? 自從去年鐵人賽毅然決然退隱修煉後,一直在等著的就是這個機會 XD ,希望能夠記取去年到後半段不知道在寫...

2019-09-12 ‧ 由 神Q超人 分享
DAY 2

Day01 | 別再放一堆 CDN ,把 Webpack 裝起來就對了

前言 先說説 CDN 是什麼吧,以 JQuery 為例,如果我們想在網頁上使用它,就得在 HTML 中使用 Script 將 JQuery 的程式碼載入: &l...

2019-09-13 ‧ 由 神Q超人 分享
DAY 3

Day02 | 整齊的程式,讓看的人長命百歲,給我用 ESLint

前言 ESLint 提供語法檢查的功能,會檢查出專案中有可能會出錯、語法不正確的地方,也能夠按照個人或團隊的需要設定專屬的 coding style(編碼風格)...

2019-09-14 ‧ 由 神Q超人 分享
DAY 4

Day03 | JSX 瀏覽器看不懂?要翻譯就靠 Babel

前言 基本上瀏覽器只看得懂三種語言,分別是 HTM、CSS 和 JavaScript,因此接下來學習 React 使用的 JSX 語法,瀏覽器無法讀懂,也沒辦法...

2019-09-15 ‧ 由 神Q超人 分享
DAY 5

Day04 | SCSS 加上 Webpack 混搭款,讓你寫 CSS 上天堂

前言 SCSS 是 CSS 的預處理器,就是替原本的 CSS 再加上一些強大的語法,讓我們在寫 CSS 的時候可以更加直觀,相關說明可以查閱 官方文檔 ,本篇就...

2019-09-16 ‧ 由 神Q超人 分享
DAY 6

Day05 | F5 按鍵守護者,讓網頁自動刷新的 Webpack-dev-server

前言 經過前兩篇的轟炸,今天來說點輕鬆的。 在昨天完成了 SCSS 後,應該會有些體會,例如:「天吶,只要修改一點程式碼,就需要重新編譯,這真的合理嗎?」 不合...

2019-09-17 ‧ 由 神Q超人 分享
DAY 7

Day06 | 一次說完 JSX 基本用法

前言 本來打算直接從 Hooks 開始說起 React,但後來發現還是得先理解基本的操作方法,後續的文章會看得比較輕鬆,但我不會對語法著墨的太深,畢竟接下來的...

2019-09-18 ‧ 由 神Q超人 分享
DAY 8

Day07 | 從 Hooks 開始的 Component 新生活

前言 本篇會開始提及 React 本身的基本用法和使用觀念,大概會提個三四篇,和去年不同的是,所有範例都會使用 Hooks ,如果有任何問題再麻煩留言告訴我,謝...

2019-09-19 ‧ 由 神Q超人 分享
DAY 9

Day08 | Function Component 的 State 在哪裡

前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...

2019-09-20 ‧ 由 神Q超人 分享
DAY 10

Day09 | 掌管 Lifecycle 和一切作用的 useEffect

前言 Lifecycle 被稱為生命週期,在 Component 中,我們可以大致把生命週期分成三個: Component Render 完畢。 Compon...

2019-09-21 ‧ 由 神Q超人 分享