8 篇有 "react" 標籤的文章
如何設定 Webpack HMR + React Hot Loader (2020更新)
Hot Module Replacement (HMR) 是 Webpack 提供方便開發過程的功能，讓你修改原始碼時不需要重新載入頁面，這篇文章將會教你如何設定 Webpack Config 使你的專案支援 HMR，增加團隊的開發效率。 目錄 開啟 Webpack HMR…
Read more →如何將 React Native Android App 打包成 apk 並發布上架至 Google Play Store (2020年更新)
React Native Android App 要打包成 apk 並 release 到 Google Play 有許多繁瑣的步驟，這篇文章將會教你如何設定 App Signing、建立 Keystore，設定 Release Config、產生簽署過的APK檔、上傳APK…
Read more →Webpack基礎設定 (支援ES6、ESLint)
這篇教學介紹React專案的基本webpack設定。包含支援ES6需要的Babel，程式碼風格檢查的ESLint和開發工具 webpack-dev-server。 目錄 專案資料夾結構 Overview Webpack基本設定 Babel設定 ESLint…
Read more →正規化 (Normalize) Redux State
這篇教學介紹Redux如何用正規化(normalization)的方式，儲存從API取得的遠端資料。 目錄 TL;DR Normalize the State Shape reducer reducer Why Normalized State? Reducer with…
Read more →Redux Middleware Chain
這篇教學主要是整理Redux middleware的原理，如何實作，以及如何理解middleware chain的順序。 目錄 Middleware 如何實作Middleware logger Redux Promise Apply middlewares Middleware…
Read more →Redux Selector
這篇教學介紹Redux中常用到的Selector函式，其作用是將容器中特定狀態取出。 在裡面，通常會將state經過一番計算後轉換成props，例如：經過filter過濾後的todos。我們通常會寫一個作轉換的工作： 問題是，使用者必須要記得state…
Read more →Redux 如何和 React Router 搭配使用
這篇教學會介紹如何從React元件的props拿到url資訊，以及如何使用React Router內建的的HoC 拿到url資訊。 React Router是一個管理URL的庫，能根據瀏覽器的URL決定要渲染哪些元件。 React Router…
Read more →在 React 元件中使用 d3 圖表
這篇教學將會介紹d3的基本概念，以及分享如何在React元件內整合d3圖表。 目錄 範例 d3簡介 Data Binding Enter, Update and Exit Update enter() exit() 回到正題 - 在React中嵌入d3圖表 React Refs…
Read more →