iT邦幫忙

front-end相關文章
共有 174 則文章
鐵人賽 Modern Web DAY 18

技術 [DAY18] Developer tools 與 Snippets 之老師我也想當金手指之 debug guy

我想說的是 一些實用工具可以幫助開發上更加快速,能少打字就少打字,把力氣省起來 Simple React Snippets 是一套 VSCode 上針對 re...

鐵人賽 Modern Web DAY 28

技術 【Day 28】React 的好搭檔 - Material UI && Recharts

鐵人賽進入尾聲了,基礎也都帶過了,最後就來介紹一些自己在寫 React 時常搭配的套件吧。 Material UI Material UI官網 這個函式庫針對...

鐵人賽 Modern Web DAY 15

技術 15. [JS] 什麼是原型鏈?

今天是鐵人賽的第十五天,旅程進行到了一半,而本系列文 JavaScript 的部分也即將告一段落。經過了連續三天型別相關的內容,今天也將接續下去,跟大家聊聊許...

鐵人賽 Modern Web DAY 27

技術 【Day 27】Redux middleware - redux-thunk

還記得之前介紹過 redux 的基本用法嗎? 因為覺得 React 基礎講的差不多了,今天決定回過頭來講講 redux middleware。 Redux-mi...

鐵人賽 自我挑戰組 DAY 23

技術 Sass 的變數功能 Variable

今天要來介紹的是 Sass 的變數功能,只要利用變數的功能,我們會比較好的去管理一個網站的其他設定值,而不用欲修改時要一行一行的檢視原生 CSS 碼。 $ti...

鐵人賽 Modern Web DAY 21

技術 Day 21. 機動藍圖・靜態成員 X 即刻操作 - Static Properties & Methods

閱讀本篇文章前,仔細想想看 如何使用類別的繼承(Inheritance)? 為何我們設計類別的成員時,會儘量以 private 模式為基準?什麼時候該開放...

鐵人賽 Modern Web DAY 17

技術 [DAY17] 組件傳值之我想搞點事

我想說的是 React有明確規定,子組件時不能操作父組件裡的資料,所以需要調用父組件的方法,來修改父組件的內容 有了 JSX 撰寫起來容易多了 上一篇中我們...

鐵人賽 Modern Web DAY 14

技術 14. [JS] 深拷貝是什麼?如何實現?

在 前天的文章 中,我們討論了 JavaScript 的資料型別,其中最特殊的莫過於物件;在這個萬物皆物件的語言中,如何完美的複製物件,也就成了開發過程中頻繁...

鐵人賽 Modern Web DAY 26

技術 【Day 26】誰說一定要用別人寫好的 hooks - Custom Hooks

從介紹第一個 hooks 開始,我們都是在使用 React 提供的 hooks ,有沒有想過我們也可以實作自己的 hooks 呢? 先來看看我找到的一段對 cu...

鐵人賽 Modern Web DAY 20

技術 Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

閱讀本篇文章前,仔細想想看 描述類別存取修飾子(Access Modifiers)的功能與意義。 為何類別要實踐某介面時,介面裡的所有規格在類別裡會直接綁...

鐵人賽 自我挑戰組 DAY 22

技術 CSS 的預處理器 Sass

連續的從 HTML 到 CSS 然後到 RWD,現在我們要來到了 Sass了,Sass 是 CSS 的預處理器,顧名思義它的功能就是可以「預先處理」CSS,讓...

鐵人賽 Modern Web DAY 16

技術 [DAY16] 組件的傳值之爸爸給你的你才能要

我想說的是 組件傳遞資料並不是只能傳遞數值,函式也可以傳遞 子組件不能直接操作父組件的資料,要通過父組件傳來的函數去變更父組件的資料 上一篇中我們把按摩服務...

鐵人賽 Modern Web DAY 13

技術 13. [JS] 為什麼判斷相等時不能用雙等號?

相信大家在初學 JavaScript 時,一定有人跟你說過:「比較時記得要用三等號(===),不要用雙等號(==)」,但你知道為什麼嗎?稍微有經驗的人可能馬上...

鐵人賽 Modern Web DAY 19

技術 Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

閱讀本篇文章前,仔細想想看 TypeScript 類別(Class)的意義是什麼? TypeScript 類別跟介面(Interface)的最大差別在哪裡...

鐵人賽 Modern Web DAY 15

技術 [DAY15] 組件的拆分

我想說的是 組件拆分的方法 在前面幾篇中,其實已經寫好了一個基本的按摩服務列表 但是從頭到尾只使用了一個組件 在小型專案中也許可以這麼做,但隨著專案大小 勢...

鐵人賽 Modern Web DAY 25

技術 【Day 25】useCallback - 學會把函式記起來

不知不覺來到第 25 天了,本來預計是要用小專案作結的,沒想到意外的忙碌啊,所以剩下的幾天就決定介紹一些我原本也不熟悉或不常使用的特性,學習的同時也盡量內化並記...

鐵人賽 自我挑戰組 DAY 21

技術 介紹了好多天的 RWD,今天來排一個完整一點的版型

我們花了好多天的時間來介紹 RWD 的設計概念,但是每一個概念都比較片斷與零散一點,今天我們來把所有的概念整合一下,變成一個完整的 RWD 網頁吧,來看一下我...

鐵人賽 Modern Web DAY 12

技術 12. [JS] 為什麼 typeof new Array() === 'object'?

JavaScript 由於弱型別的語言特性,對於剛開始學習的新手來說,型別就跟暗戀的對象一樣,總是讓人捉摸不透,即使你用了 typeof 運算子來問他,也會得...

鐵人賽 Modern Web DAY 18

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

閱讀本篇文章前,仔細想想看 複合型別 union 與 intersection 的功能與意義代表為何? 如果還沒理解完畢的話,可以先翻看前一篇文章喔! 今...

鐵人賽 Modern Web DAY 24

技術 【Day 24】 useRef

useRef 是一個可以讓我們抓取到 DOM 節點的 hooks。 實作上非常簡單,直接來看範例吧: import React, { useRef } from...

鐵人賽 自我挑戰組 DAY 20

技術 在 media query 內使用 float:none 清除浮動效果

float的使用,我們常會用在 desktop 的排版上,不管是要將區塊並排顯示,或是要將選單橫列,常常都會使用到{float:left;}。今天我們要提到的...

鐵人賽 Modern Web DAY 14

技術 [DAY14] 一個蘿蔔一個坑之 JSX 幾個坑

我想說的是 JSX 註解的寫法和一般的 HTML 不一樣 寫程式不寫註解,就像是大腸麵線沒加香菜 雖然能,但吃就是少一味;還有些人特別討厭加 寫註解還是有些...

鐵人賽 Modern Web DAY 23

技術 【Day 23】useMemo

昨天 React.memo 比較像是針對 component 做 memorization,今天要介紹的 useMemo 這個 hooks 則是可以對函式實作...

鐵人賽 Modern Web DAY 17

技術 Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

閱讀本篇文章前,今天什麼都不用想! 直接進入正文,快看下面! 筆者就直接讓油門繼續摧下去~正文開始! 筆者 O.S.:今天又是數學時間,要學好程式可真不...

鐵人賽 自我挑戰組 DAY 19

技術 RWD 做一個左邊固定欄寬右邊自由縮放的版型吧

大家一定常常會看到像是這樣類型的版型,左邊是 menu 的選單,而右邊則是每一則網頁內容,而當我們縮放瀏覽器時,左邊的選單區塊不會有任何變動,縮放的是右邊的網...

鐵人賽 Modern Web DAY 13

技術 [DAY13] Filter 標題的靈感之我真的一滴都不剩了之真想不出

我想說的是 filter 會建立一個經過指定運算判斷後回傳為真的新陣列,就是這麼簡單 關於 filter 在其他地方我好像已經遇到好幾遍,一直沒有有系統地把...

鐵人賽 Modern Web DAY 16

技術 Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

閱讀本篇文章前,仔細想想看 TypeScript 的型別系統與介面之間在語法上的差別與介面或型別的使用有何共通點呢?但意義上又會差在哪? 如果還沒理解完畢的...

鐵人賽 自我挑戰組 DAY 18

技術 RWD 的三欄流體式網頁設計

在前面的章節我們已經介紹過了max-width or min-width以及百分比(%)單位對於 RWD 網站的重要性,現在我們要來設計一個三欄式的流體式網頁...

鐵人賽 Modern Web DAY 22

技術 【Day 22】React.memo

昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與 前一次 state 來...

鐵人賽 Modern Web DAY 12

技術 [DAY 12] 司機我要下車之刪除清單中的服務之按得太久腰受不了

我想說的是 預期結果:刪除清單中選定的服務 使用 filter 對陣列做篩選,並且重新設定服務列表 在我們的努力下,上一次練習中已經可以為所欲為的增加我們想...