iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

使用 React 製作簡易專案管理網站:從基礎到實戰 系列

React 是 Facebook 開發的一套 JavaScript 函式庫,負責產生與管理網頁前端使用者介面,因其引用 Virtual DOM 的機制與元件化的開發,避免繁複的 DOM 操作而提高網頁性能,大幅降低邏輯複雜性、開發難度以及可能產生錯誤的機會。

本系列文章將會先介紹使用 React 時常用的 ES6 語法,接著介紹 React 的基礎用法並且搭配範例程式碼幫助讀者瞭解基本觀念,最後以實際開發的方式帶領讀者們一步步完成像這樣一個簡易的專案管理網站(https://tjcyd.csb.app/),全程使用免費的線上開發工具 CodeSandbox 避免麻煩的環境設定。

鐵人鍊成 | 共 30 篇文章 | 16 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day 21] React 攻城戰 - 資料儲存結構

資料儲存結構 首先來看看簡易專案管理網站的畫面上需要顯示那些資訊: 標題 看板 名稱 底下的卡片 卡片的順序 卡片內容 由於我們不希望資料散落在...

2019-10-06 ‧ 由 谷哥 分享
DAY 22

[Day 22] React 攻城戰 - 資料更新邏輯 action

上一篇文章我們定義好資料的儲存結構: { title: '專案標題', boards: { ids: ['board1', 'board2'],...

2019-10-07 ‧ 由 谷哥 分享
DAY 23

[Day 23] React 攻城戰 - 資料更新邏輯 reducer

上一篇文章我們定義好各種更新資料的 action 物件,這些物件會在呼叫 dispatch 函式傳入 reducer 函式,並且根據 type 屬性以及目前的...

2019-10-08 ‧ 由 谷哥 分享
DAY 24

[Day 24] React 攻城戰 - 根元件和全局樣式

前幾篇文章中,我們定義好資料儲存的結構作為 initialState,以及資料更新的邏輯 reducer,接下來進入元件的部分。 所有的元件都是從根元件長出來的...

2019-10-09 ‧ 由 谷哥 分享
DAY 25

[Day 25] React 攻城戰 - 加入編輯標題功能

在上一篇文章中,我們建立了一個簡單的根元件 App,並且使用 useReducer 將網站標題顯示出來: import React from 'react';...

2019-10-10 ‧ 由 谷哥 分享
DAY 26

[Day 26] React 攻城戰 - 加入新增看板功能

為了加入新增看板的功能,我們要來建立第二個元件取名叫做 AddBoard。在 src/components 資料夾中新增 AddBoard 資料夾,然後在 Ad...

2019-10-11 ‧ 由 谷哥 分享
DAY 27

[Day 27] React 攻城戰 - 顯示看板

顯示看板 我們要將 useReducer 中看板的 state 顯示出來。首先在 src/components 資料夾中新增 Board 資料夾,然後在 Boa...

2019-10-12 ‧ 由 谷哥 分享
DAY 28

[Day 28] React 攻城戰 - 加入刪除看板與編輯看板名稱功能

刪除看板功能 首先在 Board 元件中加入一個叉叉的按鈕: import React from "react"; import styl...

2019-10-13 ‧ 由 谷哥 分享
DAY 29

[Day 29] React 攻城戰 - 加入新增卡片功能

新增卡片功能 在原先的 Board 元件中,加入一個按鈕,在被點擊時,改成顯示一個文字輸入框,讓使用者輸入新卡片的內容: import React from &...

2019-10-14 ‧ 由 谷哥 分享
DAY 30

[Day 30] React 攻城戰 - 顯示卡片

顯示卡片 我們要將 useReducer 中看板的 state 顯示出來。首先在 src/components 資料夾中新增 Card 資料夾,然後在 Card...

2019-10-15 ‧ 由 谷哥 分享