課程大綱：

從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用培訓(xùn)

課程編譯自 Microsoft 的開(kāi)源項(xiàng)目 Frontend Bootcamp，將帶你從 0 到 1 構(gòu)建一個(gè)待辦事項(xiàng) TODO 應(yīng)用。

課程的特點(diǎn)在于，先使用 HTML/CSS/JS 構(gòu)建 Web 應(yīng)用，再使用 TypeScript/React/Fabric 等技術(shù)對(duì)項(xiàng)目進(jìn)行重構(gòu)。

1 HTML 基本概念

2 JavaScript 基本概念

3 HTML/CSS/JS 構(gòu)建 Web 應(yīng)用

4 React 基本概念

5 CSS 基本概念

6 ES6 基本概念

7 TypeScript 基本概念

8 Fabric UI 框架使用

1
HTML 簡(jiǎn)介

1.什么是HTML

2.Web是如何工作的

3.文檔結(jié)構(gòu)

4.常見(jiàn)標(biāo)簽

5.表格

6.表單

7.有序列表和無(wú)序列表

2
CSS 簡(jiǎn)介

1.什么是CSS 2.CSS語(yǔ)法

3.CSS注釋

4.CSS常見(jiàn)選擇器

5.CSS創(chuàng)建

6.CSS常用屬性

3
JavaScript 簡(jiǎn)介

1.什么是JavaScript

2.JavaScript用法

3.JavaScript變量

4.JavaScript函數(shù)

5.JavaScript事件

6.JavaScript邏輯語(yǔ)句

7.JavaScriptfor循環(huán)

8.JavaScriptDOM

4
ES6 簡(jiǎn)介

1.ES6解構(gòu)賦值

2.ES6擴(kuò)展運(yùn)算符

3.ES6箭頭函數(shù)

4.JSfilter()方法

5.JSmap()方法

6.JSforEach()方法

5
React 簡(jiǎn)介

1.React安裝及簡(jiǎn)單操作

2.React元素渲染

3.ReactJSX

4.React組件

5.函數(shù)聲明

6.類(lèi)聲明

7.計(jì)數(shù)器

6
構(gòu)建一個(gè)靜態(tài)頁(yè)面

1.Todo頭部

2.Todo列表

3.Todo列表項(xiàng)

4.Todo底部

7
用戶交互效果

1.添加狀態(tài)到TodoApp

2.拆分TodoListItem組件

3.存儲(chǔ)輸入框的值

4.將輸入框的值存儲(chǔ)到todos中

5.todos的渲染

6.Footer部分

8
TypeScript 簡(jiǎn)介

1.TypeScript安裝及開(kāi)發(fā)工具

2.TypeScript基礎(chǔ)類(lèi)型

3.TypeScript函數(shù)

4.TypeScript接口

9
Todo App 里的 TypeScript

1.傳統(tǒng)js和jsx與ts和tsx的區(qū)別

2.改寫(xiě)之前的準(zhǔn)備

3.編寫(xiě)TodoListProps

4.改寫(xiě)appjs

5.TodoList和TodoListItem部分

6.Header部分

7.Footer部分

10
Fabric UI 庫(kù)

1.開(kāi)始之前的準(zhǔn)備

2.整體布局的修改

3.Header部分

4.TodoList和TodoListItem部分

5.Footer部分