React 是 Facebook 開發的一套 JavaScript 函式庫,負責產生與管理網頁前端使用者介面,因其引用 Virtual DOM 的機制與元件化的開發,避免繁複的 DOM 操作而提高網頁性能,大幅降低邏輯複雜性、開發難度以及可能產生錯誤的機會。
本系列文章將會先介紹使用 React 時常用的 ES6 語法,接著介紹 React 的基礎用法並且搭配範例程式碼幫助讀者瞭解基本觀念,最後以實際開發的方式帶領讀者們一步步完成像這樣一個簡易的專案管理網站(https://tjcyd.csb.app/),全程使用免費的線上開發工具 CodeSandbox 避免麻煩的環境設定。
資料儲存結構 首先來看看簡易專案管理網站的畫面上需要顯示那些資訊: 標題 看板 名稱 底下的卡片 卡片的順序 卡片內容 由於我們不希望資料散落在...
上一篇文章我們定義好資料的儲存結構: { title: '專案標題', boards: { ids: ['board1', 'board2'],...
上一篇文章我們定義好各種更新資料的 action 物件,這些物件會在呼叫 dispatch 函式傳入 reducer 函式,並且根據 type 屬性以及目前的...
前幾篇文章中,我們定義好資料儲存的結構作為 initialState,以及資料更新的邏輯 reducer,接下來進入元件的部分。 所有的元件都是從根元件長出來的...
在上一篇文章中,我們建立了一個簡單的根元件 App,並且使用 useReducer 將網站標題顯示出來: import React from 'react';...
為了加入新增看板的功能,我們要來建立第二個元件取名叫做 AddBoard。在 src/components 資料夾中新增 AddBoard 資料夾,然後在 Ad...
顯示看板 我們要將 useReducer 中看板的 state 顯示出來。首先在 src/components 資料夾中新增 Board 資料夾,然後在 Boa...
刪除看板功能 首先在 Board 元件中加入一個叉叉的按鈕: import React from "react"; import styl...
新增卡片功能 在原先的 Board 元件中,加入一個按鈕,在被點擊時,改成顯示一個文字輸入框,讓使用者輸入新卡片的內容: import React from &...
顯示卡片 我們要將 useReducer 中看板的 state 顯示出來。首先在 src/components 資料夾中新增 Card 資料夾,然後在 Card...