在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
React Component Lifecycle & State vs Props <好讀版> 前言 這篇要介紹的是 React Nati...
有了地圖之後，我們就可以開始讓蛇在上面爬了，今天我們的目標是畫出蛇的頭，並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...
如果 npm start 後遇到錯誤.. 人品不好的時候執行 npm start 卻出現錯誤..NPM start returns error, “There...
在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...
Hi！大家好！一天做一點點的感覺有點像以前買的科學雜誌XD，要從創刊號慢慢蒐集到最後，把所有的贈品都留下來才能組合出一個完整的東西，哈哈！ 話說剛露營回來，不知...
在上一篇的章節中，我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡，我們來探討看看一個延伸的情境：如果我們想基...
今天要介紹如何即時得到使用者輸入的色碼，並即時 render 到氣球上。DEMO 建立 Component 首先，建立一個 Balloon component...
前言 大家好我是Andy，今年又回來參加鐵人賽了，希望今年也能順利地完賽XDD 這次要帶給大家的是資料視覺化的技能，使用的是最麻煩同時也最彈性的 D3.js，同...
經過了前兩篇章的洗禮，相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲：use...
昨天 Day13 我們已經把畫面區塊規劃出來了，今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系，這邊我的做法是把地圖切成...
【前言】 終於先把基本的redux告一段落了......可是工作上的進度還是大延遲(嘆氣【正文】 採用以往的方式撰寫action、reducer的確可行，但...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點，並且以 props 作為 component 層層往下的...
前言 在 Day03 了解怎麼建立自己的最簡單的 component 後，我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法， createSi...
有使用過React的同學都知道，用React做輸入控制的時候， 通常做法是建立一個input的state， 具體如下： import { useState }...
Pure JS React 日曆 使用 new Date 製作日曆 更新：我後來改寫的更加簡潔，並且抽離成hook詳情可參考 前端野人 顯示日期 需要注意m...
前篇介紹了 Flux 的單向資料流架構模型其實網路上有很多函式庫都在提供 API 實現 Flux 模型其中有一個特別好用的今天就要來了解這個資料流的函式庫 -...
Hihi！大家好！這樣子的開頭還要在鐵人賽結束前繼續用下去，請大家多多包涵XD，昨天我們已經能夠從Redux中取到資料了，今天要來說說該怎麼把透過React來觸...
元件介紹 Infinite scroll 能在面對多筆資料時，讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料，對於後端的資料計算、資料...
前幾天介紹了資料管理用的 context 以及 Redux，今天要來介紹一下要如何不透過伺服器切換頁面，直接在 React 中切換。 React router...
昨天我們已經讓蛇的頭部可以動起來，並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體，讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...
鐵人賽剩下 5 天，接下來我想聚焦在一些經驗分享，畢竟除了學習技術以外，適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師， Github 自...
React可以手動建立環境，或是自己寫webpack設定，安裝相關的套件，身為初學者的我為了比較快速上手(懶)，決定採用官方提供的create-react-ap...
終終終於來到了每天朝思暮想的第三十天了，ㄛ天吶，這一路走來真的很漫長，不過每次回頭看看都會有覺得什麼時候發那麼多篇去了！的感覺XD，在打這段話的時候我覺得還滿適...
今天講解把如何模組化程式碼 前提：我們目前所有的程式碼都放在 index.html 裡面，分別嵌入了 React, React-dom, babel 的 CDN...
在build專案的時候，我們會透過webpack將不同模組的component打包成同一支js，但是當專案的規模越來越大， 程式碼的size就會逐漸肥大，好幾m...
元件介紹 Tooltip 是一個文字彈出提醒元件，當 active 狀態時，會顯示對該子元件描述的文字。 參考設計 & 屬性分析 位置 相對於被包覆的子...
元件介紹 Dropdown 是一個下拉選單元件，當頁面上的選項過多時，可以用這個元件來收納選項，透過滑鼠事件來觸發選單彈出，點擊選項會執行相對應的命令。 參考設...
元件介紹 Tabs 是一個選項卡切換元件，能夠在同一層級的內容組別當中導航、切換。此元件由兩個部分構成，一個是讓使用者點擊的導覽頁籤 Tab，一個是對應的內容...
Zet
沒一村
Taiming
dc88
神Q超人
TSAI
陳奕帆 Andy Chen
Hyora
MichaelHo
洪啟瑞
時雨
莫力全 Kyle Mo
Lieutenant
iThome鐵人賽
看影片追技術