ReactJS 前端框架

從零開始的 React 教學 Part 6 - React.memo

從零開始的 React 教學 Part 5 - PureComponent 中提到 PureComponent 透過 shallow comparison 加速比較 props / state 的速度，為 React 應用(application)帶來更好的效能。

p.s. 雖然 PureComponent 提升比較速度，但也犧牲比較時的精準度，使用時一定要理解何謂 shallow comparison, 才不會帶來預期外的 bug

不過 PureComponent 需要以繼承 PureComponent 類別(class) 的方式實作 Class Component ，對於某些 Functional Components 來說，沒辦法這樣進行。

所幸， React 也有提供 React.memo API ，讓開發者能夠將 Functional Component 用 React.memo 包裝起來，達到類似 PureComponent 的作用。

本文將介紹 React.memo API 如何使用，以及使用上應注意的點。

Posted on Oct 13, 2022 in ReactJS 前端框架 by Amo Chen ‐ 3 min read

從零開始的 React 教學 Part 3 - Class Components 一文介紹 Class Components, React 讓開發者們透過繼承 React.Component 類別並且實作少數方法就能夠實作 React 元件(component)。

但除了 React.Component , React 還提供另外 1 個 React.PureComponent 類別，開發者們也可以選擇繼承該類別實作 React 元件。

React components can be defined by subclassing React.Component or React.PureComponent.

不過這 2 個類別行為存在若干差異，如果沒有透徹了解就很容易造成 bug 或者效能上的問題。

Posted on Oct 5, 2022 in ReactJS 前端框架 by Amo Chen ‐ 4 min read

先前的文章中都是以 class 形式製作 React 組件(component)，但對於一些不需要狀態(state)的組建而言，使用 class 製作 React 組件不免有點多餘。所幸對於這種單純的組件，可以使用 function 進行開發。

Last updated on Oct 2, 2022 in ReactJS 前端框架 by Amo Chen ‐ 2 min read

從零開始的 React 教學 Part 2 中，我們學會利用 Webpack 編譯含有 JSX 的 React 專案，讓我們能夠利用 JSX 語法提高開發 React 的效率。

本篇會將從零開始的 React 教學 Part 1 中的範例改成 JSX 語法呈現，並且模組化部分組件(components) ，從而達到較高的可維護性。

最後再加上新的外掛 babel/plugin-proposal-class-properties ，讓我們能夠使用 Arrow function 更加簡化 React 程式碼。

Last updated on Oct 2, 2022 in ReactJS 前端框架 by Amo Chen ‐ 3 min read

繼從零開始的 React 教學 Part 1 之後，本篇將進入如何運用前端開發工具讓開發 React 應用更加有效率。

Last updated on Oct 2, 2022 in ReactJS 前端框架 by Amo Chen ‐ 5 min read

近來常使用 React 開發前端，但無奈前端的開發工具五花八門，比較熟悉後端技術的開發者應該會相當不習慣，因此本文記錄我使用 React 開發前端的演進過程。

本文會從一個簡單而且不需要使用任何前端工具的 React 範例開始，然後慢慢地一個個地導入現今前端常用的開發工具(例如 Webpack, Babel) 等等，至於其他較深入的 React 功能則不多加贅述，希望可以讓其他與我相同不懂前端技術的朋友，在開始前端生涯之前有個好文章能夠參考。

Last updated on Oct 2, 2022 in ReactJS 前端框架 by Amo Chen ‐ 6 min read