iT邦幫忙

鐵人檔案

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

從比入門再往前一點開始,一直到深入React.js 系列

近年在學習前端技能時,三大框架是尋找工作不可或缺的技能。也因為這樣,學習框架的動機就不再一定是為了「專案需求」,而是「跟著職缺走」。

本系列一開始將用原生Javascript實現「元件化」的過程,先帶領讀者理解為什麼需要框架。再進入近年流行的React hook世界。以故事化的方式,從發現問題的過程,學習目前業界開發React.js專案一定會用到的工具。

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

【Day.01】為什麼需要框架 - 從全部塞在一起開始頭痛

前言 近年在學習前端技能時,三大框架是尋找工作不可或缺的技能。也因為這樣,學習框架的動機就不再一定是為了「專案需求」,而是「跟著職缺走」。 本系列一開始將用原生...

2020-09-16 ‧ 由 Andy Chang 分享
DAY 2

【Day.02】為什麼需要框架 - 用工廠模式,開始重新思考共用架構

在Day1,我們寫了一份很爛的程式碼,現在要來優化它。 認識Design Pattern 當程式碼規模變大,我們勢必要分檔才能讓程式碼更能共用、易讀。但是要...

2020-09-17 ‧ 由 Andy Chang 分享
DAY 3

【Day.03】為什麼需要框架 - 打造元件共同功能

新的挑戰來了 在前面的程式碼中,我們製造了一個功能完善的Menu,但是他有一個缺點: 它只能被自己控制,無法透過外部修改。 工廠模式只是希望製造的過程不受影響,...

2020-09-18 ‧ 由 Andy Chang 分享
DAY 4

【Day.04】為什麼需要框架 - 用觀察者模式,打造更好用的元件

昨天做的UI怪怪的 當我們得意地看著在前面的程式碼,卻發現一件不符合直覺的事情: 不管目前menu是開是關,外部按鍵永遠顯示「開啟選單」 要怎麼解決這個問題呢?...

2020-09-19 ‧ 由 Andy Chang 分享
DAY 5

【Day.05】為什麼需要框架 - 分離架構、自製Menu、MenuItem

繼續拆分架構 目前的menu雖然對外部使用者可以客製化的內容變多了,但仍然有一個缺點: 「元件內部的架構被綁死,很不彈性。」 什麼意思? 更詳細來說, 目前如果...

2020-09-20 ‧ 由 Andy Chang 分享
DAY 6

【Day.06】為什麼需要框架 - 從元件的切割與設計,到框架的誕生

就如同我們前五天的過程,遠古時代(?)前端工程師發現為了要讓程式碼的重複利用程度最大化,自己的元件不斷地被往下劃分,加了各式各樣的功能,開始眼花撩亂。 網頁元件...

2020-09-21 ‧ 由 Andy Chang 分享
DAY 7

【Day.07】React入門 - 簡介React、從class到Hook的發展歷史

認識React React是由Facebook推出的前端框架。由於使用了特殊的「JSX語法」,React最被人推崇的就是可以對元素進行Javascript的邏輯...

2020-09-22 ‧ 由 Andy Chang 分享
DAY 8

【Day.08】React入門 - 環境設定 - npm、Webpack、Babel

環境設定 - 前言 前面說過,React是Facebook開發的一套Library。可是瀏覽器沒有那麼聰明,不會因為地球上每多一個人開發了框架就認得他,那怎麼辦...

2020-09-23 ‧ 由 Andy Chang 分享
DAY 9

【Day.09】React入門 - Hello world、React virtual DOM、webpack-dev-server

第一個React程式 - Hello world 請將src/index.js的程式碼改為: import React from 'react'; import...

2020-09-24 ‧ 由 Andy Chang 分享
DAY 10

【Day.10】React入門 - JSX語法

在前五天的原生JS程式碼中,其實還有一個問題。你會發現類似以下的程式碼不斷的在重複: let menuContainer = document.createEl...

2020-09-25 ‧ 由 Andy Chang 分享