前言 這三十天內,我們學習了 React 及 TypeScript 的基本用法,最後一天想和大家聊聊,筆者是怎麼在專案中使用 TypeScript 的,或許有些...
(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...
昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...
Code Splitting 是一個非常重要的觀念,現代網頁程式漸漸走向使用框架以模組化方式來開發,通常會透過如 webpack 等 bundler 來 ug...
在上一個篇章中介紹了何謂 React element,也講解了 render 出 React element 的方式。 在這個篇章中則要介紹要如何將寫好的 Re...
前言 Product Pain 是 React Native 聆聽社群聲音的重要平台,而在上面 Navigator 是個知名的「Pain」,也催生了 Navig...
(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...
提到 Web 前端的效能優化,有許多的技巧是聚焦在如何減少頁面的「載入時間 Loading Time」,例如 Code Splitting 透過減少需要載入的...
React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
今天開始正式進入系列文的最後一個章節 - Framework, Architecture and Memory Management,探索前端架構與底層實作對...
還記得之前介紹過 redux 的基本用法嗎?因為覺得 React 基礎講的差不多了,今天決定回過頭來講講 redux middleware。 Redux-mid...
Introduction 這個系列會分享我這些年累積下來 React Component 的開發經驗,也藉此機會嘗試一下我發現的新玩具。 這系列不是走理論派,...
React 有幾種偵測Scroll 的方式,通常是用的方式寫 不過有時候你要動到邏輯問題的撰寫方式,你可能就要拆步驟寫: 基本上 是分這三大元素去修改, com...
大家好,經過兩篇 style 的介紹,今天總算要回到處理邏輯的部分了。 一般在開發應用時,常常會需要根據特定 condition 做邏輯判斷,除了一般我們熟知的...
昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與 前一次 state 來...
本篇文章提及以下部分 Material Design 更名MUI Material UI優點 加載字體方法 import元件的方法 Typography-排版...
※取自《大話西遊之仙履奇緣》劇照 這故事要從20年前說起。(現在流行網路上的圖原封不動地抄襲拿來用,若有不小心盜圖侵權,請務必來信告知,本人馬上把圖片下架,關閉...
【前言】 我們昨天跟React說想跟他當好朋友,而且雙方也做了自我介紹了,如果按照少女漫畫的情節應該就可以直接牽手抱抱親親 BUT,人生就是有那個BUT。 ...
在build專案的時候,我們會透過webpack將不同模組的component打包成同一支js,但是當專案的規模越來越大, 程式碼的size就會逐漸肥大,好幾m...
【前言】 不怕我誤人子弟嗎QQ【正文】 昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Link到...
前言 就 Redux 而言,與上一篇的 Counter 不同的地方就是多了 Action 以及 Reducer,而它們也都只是純函數,測試並不會是難點,需要思考...
前言 我偶而間看到了,一個提問,『react is library or framework?』,這句提問似乎,沒什麼特別,但仔細想想,其實也算是一個大問題。今...
React可以手動建立環境,或是自己寫webpack設定,安裝相關的套件,身為初學者的我為了比較快速上手(懶),決定採用官方提供的create-react-ap...
(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的...
接著我們將上一章節介紹到的一律重繪概念與流程替換成具體的 React 程式來解釋: 當我們在 component 裡呼叫 setState 方法來觸發資料更新時...
元件介紹 Radio 是一個單選框元件。讓我們在一組選項當中選擇其中一個選項。當我們的情境是希望用戶可以一次看到所有選項時,可以使用 Radio Button。...
工欲善其事,必先利其器。 為了方便我們後續的元件開發, 我們要先做一些前置動作。 至於要不要採用以下架構,可以自行決定。 想要看完整的專案:https://gi...
當初學者剛接觸 React 時,常常會想要以 inheritance(繼承)的方式來實作 React component。然而 React 官方建議實作 com...
一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...
今日關鍵字:interface 建立動畫格式 延續昨天的interface首先幫我的動畫資料訂定格式 這時如果要設定一個動畫陣列 [Anime1 ,Anime...