iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

30天React從入門到入坑 系列

React為近年來最熱門的前端之一,希望這30天能努力學習成為一個初心者,然後掉入前端的萬丈深淵(誤)

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

DAY1:學習React入門簡介先

近幾年前端框架興起,原本希望前端程式可以簡潔易維護,但各框架大量採用es6語言特性,不是所有瀏覽器都支援es6語法,需透過工具轉換成es5語法,讓大部份的瀏覽器...

2017-12-20 ‧ 由 許小威 分享
DAY 2

DAY2:Virtual DOM與JSX

Virtual DOM 傳統頁面開發,都是直接針對DOM進行操作更新。每次元素插入或更改頁面,都會重新描繪DOM,而DOM的描繪速度慢又耗時,所以造成反應時間過...

2017-12-21 ‧ 由 許小威 分享
DAY 3

DAY3:create-react-app_建立與說明

安裝create-react-app之前必須先裝Node.js,如果為了環境乾淨其實可以不需要使用安裝版。以window為例,可以下載Node.js zip檔解...

2017-12-22 ‧ 由 許小威 分享
DAY 4

DAY4:create-react-app_說明目錄結構與檔案

create-react-app新建application目錄結構 react-app/ README.md node_modules/ packa...

2017-12-23 ‧ 由 許小威 分享
DAY 5

DAY5:新朋友Components and Props

components讓你分割UI到單一元件可重復使用,每一個component都是相互隔離並獨立。但也要程式切的好才有可能達到上述功能,簡單來說儘量達到單一職責...

2017-12-24 ‧ 由 許小威 分享
DAY 6

DAY6:state與資料流

props是從父元件到子元件,資料是單向流動。而state只關心元件內部,它是私有的參數只受元件控管。當元件內部使用setState方法時,元件會進行重新繪製。...

2017-12-25 ‧ 由 許小威 分享
DAY 7

DAY7:React Lifecycle

Mounting getDefaultProps-->getInitialState-->componentWillMount-->rend...

2017-12-26 ‧ 由 許小威 分享
DAY 8

DAY8:Handling Events

React事件基於W3C spec定義SyntheticEvent(合成事件),它完全符合W3C標準。不會有任何瀏覽器支援度的問題,React事件援用駝峰式命名...

2017-12-27 ‧ 由 許小威 分享
DAY 9

DAY9:Conditional Rendering

Conditional Rendering簡單來說就是利用if或是conditional operator(三元運算子)來進行有條件式的描繪。主要運用我們先前提...

2017-12-28 ‧ 由 許小威 分享
DAY 10

DAY10:react-router v4

今天裝完react-router,寫完測試代碼要啟動server測試,竟然出現xxx undefined!!上網一查才發現,現行的v4和之前的v3寫法不一樣,而...

2017-12-29 ‧ 由 許小威 分享