iT邦幫忙

鐵人檔案

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

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

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

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

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

[Day 1] 簡介及內容大綱

簡介 React 是 Facebook 開發的一套 JavaScript 函式庫,負責產生與管理網頁前端使用者介面,因其引用 Virtual DOM 的機制與元...

2019-09-16 ‧ 由 谷哥 分享
DAY 2

[Day 2] ES6 前哨戰 - const/let 與 block scope

前言 ES6 尚未問世前,在 JavaScript 中使用變數有很多細節要注意,例如使用與不使用 var 宣告變數的差異、全域變數和區域變數的作用範圍、hois...

2019-09-17 ‧ 由 谷哥 分享
DAY 3

[Day 3] ES6 前哨戰 - object literal extension

前言 在 JavaScript 中最常用的資料結構非 object 莫屬。想要建立一個 object 除了透過 new Object(),使用 object l...

2019-09-18 ‧ 由 谷哥 分享
DAY 4

[Day 4] ES6 前哨戰 - 物件的 destructuring assignment

前言 在上一篇文章中,我們提到了如何透過 object literal extension 讓使用 object literal 建立 object 的語法變得...

2019-09-19 ‧ 由 谷哥 分享
DAY 5

[Day 5] ES6 前哨戰 - 陣列的 destructuring assignment

前言 上一篇介紹了物件的 destructuring assignment,使得存取物件屬性的語法更加簡潔,而除了物件之外,陣列也同樣可以使用 destruct...

2019-09-20 ‧ 由 谷哥 分享
DAY 6

[Day 6] ES6 前哨戰 - rest/spread operator 應用於陣列

前言 在前面介紹了 destructuring assignment 語法,使得存取陣列更加方便,而除了 destructuring assignment 之外...

2019-09-21 ‧ 由 谷哥 分享
DAY 7

[Day 7] ES6 前哨戰 - rest/spread operator 應用於物件

前言 前一篇文章介紹 rest/spread operator 應用於陣列的方法,那是不是也可以應用在物件上呢?當然可以!但在 ES6 中其實只支援陣列的 re...

2019-09-22 ‧ 由 谷哥 分享
DAY 8

[Day 8] ES6 前哨戰 - arrow function

前言 arrow function(箭頭函式) 是 ES6 最重要的改變之一,不但簡化函式的宣告語法,也重新規定函式中的 this 指向的對象,而不會再根據呼叫...

2019-09-23 ‧ 由 谷哥 分享
DAY 9

[Day 9] ES6 前哨戰 - import/export

前言 ES6 引進模組系統,透過 import/export 語法,讓開發者可以將 JavaScript 程式碼模組化,提供一種更易於組織與管理程式碼的方式。...

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

[Day 10] React 保衛戰 - 別怕!JSX 不過是個語法糖!而且還是個晶晶體?!

什麼是 JSX ? JSX 的全名是 JavaScript XML,為 JavaScript 提供一種類似 HTML 的擴充語法,JSX 讓開發者可以用比較簡潔...

2019-09-25 ‧ 由 谷哥 分享