Skip to content

eddiewentw/React-Days

Repository files navigation

React Days

React.js 練習記錄

用 React.js 寫一些網頁小組件,
主要還是在練習 React,所以在 css 的部分就沒有仔細雕琢囉。

http://github.eddiewen.me/React-Days/


Day-1 Clock

會隨著時間變背景顏色喔
http://github.eddiewen.me/React-Days/DAY-1-Clock/

Day-2 Drawer

只有左上角的白箭頭是真的喔
http://github.eddiewen.me/React-Days/DAY-2-LeftDrawer/

Day-3 Register

表單填寫,但這好像不太需要 React
http://github.eddiewen.me/React-Days/DAY-3-Register/

Day-4 ExchangeUSD

台幣與美金換算的小工具
....more
http://github.eddiewen.me/React-Days/DAY-4-ExchangeUSD/

Day-5 Tab

點擊上方 Tab row 去切換下方內容資料
http://github.eddiewen.me/React-Days/DAY-5-Tab/

Day-6 Slide

簡單的滑動 Slide~
這用 React 寫蠻不錯的,不用考慮現在是不是第一個 or 最後一個再去進行複製,每一次 state 改變時,DOM 只需要寫入現在顯示的 & 前一個 & 後一個就好。而這個設定在一開始寫 component 時就先寫好後面在改變 state 時都很輕鬆了。
http://github.eddiewen.me/React-Days/DAY-6-Slide/

Day-7 Navigation Dots

不知道這叫什麼,右邊會有幾個固定的點點,用來表示現在到這頁第幾個 section。
少了點動畫,但只要加入 jQuery 用動畫跑螢幕位置就行了。
http://github.eddiewen.me/React-Days/DAY-7-NavigationDots/

Day-8 Timer

基於 Day-1 的時鐘改成的倒數計時器喔
http://github.eddiewen.me/React-Days/DAY-8-Timer/


####:ghost: 開始嘗試 ES2015

Day-9 ColorBoxes

滑鼠移過後會在 div 產生隨機顏色
...more
http://github.eddiewen.me/React-Days/DAY-9-ColorBoxes/

Day-10 React Scroll

練習 scroll event,動畫依舊是最愛的 Animate.css
http://github.eddiewen.me/React-Days/DAY-10-Scroll/

Day-11 Jumping Number

會跳動的數字
可以在 Component 上設定數字最大值及Interval
http://github.eddiewen.me/React-Days/DAY-11-JumpingNumber/

Day-12 City

簡易的世界城市搜尋功能
http://github.eddiewen.me/React-Days/DAY-12-City/

Day-13 Subscribe

Derek's Subscribe in React.js
....more
http://github.eddiewen.me/React-Days/DAY-13-Subscribe/

Day-14 Newsfeed

Prakhar's Feed Screen in React.js
....more
http://github.eddiewen.me/React-Days/DAY-14-Newsfeed/

Releases

No releases published

Packages

No packages published