React.js 練習記錄
用 React.js 寫一些網頁小組件,
主要還是在練習 React,所以在 css 的部分就沒有仔細雕琢囉。
http://github.eddiewen.me/React-Days/
會隨著時間變背景顏色喔
http://github.eddiewen.me/React-Days/DAY-1-Clock/
只有左上角的白箭頭是真的喔
http://github.eddiewen.me/React-Days/DAY-2-LeftDrawer/
表單填寫,但這好像不太需要 React
http://github.eddiewen.me/React-Days/DAY-3-Register/
台幣與美金換算的小工具
....more
http://github.eddiewen.me/React-Days/DAY-4-ExchangeUSD/
點擊上方 Tab row 去切換下方內容資料
http://github.eddiewen.me/React-Days/DAY-5-Tab/
簡單的滑動 Slide~
這用 React 寫蠻不錯的,不用考慮現在是不是第一個 or 最後一個再去進行複製,每一次 state 改變時,DOM 只需要寫入現在顯示的 & 前一個 & 後一個就好。而這個設定在一開始寫 component 時就先寫好後面在改變 state 時都很輕鬆了。
http://github.eddiewen.me/React-Days/DAY-6-Slide/
不知道這叫什麼,右邊會有幾個固定的點點,用來表示現在到這頁第幾個 section。
少了點動畫,但只要加入 jQuery 用動畫跑螢幕位置就行了。
http://github.eddiewen.me/React-Days/DAY-7-NavigationDots/
基於 Day-1 的時鐘改成的倒數計時器喔
http://github.eddiewen.me/React-Days/DAY-8-Timer/
滑鼠移過後會在 div 產生隨機顏色
...more
http://github.eddiewen.me/React-Days/DAY-9-ColorBoxes/
練習 scroll event,動畫依舊是最愛的 Animate.css
http://github.eddiewen.me/React-Days/DAY-10-Scroll/
會跳動的數字
可以在 Component 上設定數字最大值及Interval
http://github.eddiewen.me/React-Days/DAY-11-JumpingNumber/
簡易的世界城市搜尋功能
http://github.eddiewen.me/React-Days/DAY-12-City/
Derek's Subscribe in React.js
....more
http://github.eddiewen.me/React-Days/DAY-13-Subscribe/
Prakhar's Feed Screen in React.js
....more
http://github.eddiewen.me/React-Days/DAY-14-Newsfeed/