React-Days (Part I)

  • 不敢命名成 DailyReact
  • 從一月底開始的專案,結果只寫出了14天
React 好潮喔,就決定是你了!

這年頭不論前端後端都花樣百出,讓只會用 jQuery 的我有點緊~張,所以真的基於上面的原因就選了 “React.js” 來玩玩。

Facebook 把 React 照顧得蠻好的,官方文件寫得蠻清楚,一開始的教學文件也很簡單易懂,對一個已經有 js 基礎的工程師來說應該不會太困難~ 個人認為一開始困難的點變成是因為有著 jQuery 的基礎,兩者間使用上的邏輯有點相反,這一點讓我蠻混亂的。


React-Days

起初開始這個專案時的想法是,用 React.js 來寫一些常用到的網頁組件,雖然常常看到別人寫的「網頁一百天」等等,但覺得很多內容太不實際了,還來寫一些真的會用上的東西來練習,結果就… 想不到要寫什麼了,所以才只寫到第14天XD

Day-1

這是之前看到過的時鐘網頁,蠻符合 React 的特性,所以就被拿來當成第一個題材了。算是簡單,只是因為不使用 jQeury 的關係所以都以純 Javascript 在寫,很久沒不依賴 jQuery 了TAT

Day-2

左上角,點左上角的三角形。剩下都是某個網站的截圖而已哈哈。網站常見的側邊欄,掌握如何加上/移除 class 就沒問題了,剩下的都是 CSS 的事了。

Day-3

表單填寫,但寫完後開始覺得像是這樣的元件並不需要用上 React。

Day-4

換算台幣與美金的小東西。用 jQuery 接上 Yahoo api 取得 json 檔,在這種 ajax, get, post 好像還是用上 jQuery 會比較方便些。

Day-5

Tab 的切換。同樣也是在操控 class 而已,大致上跟 Day-2 差不多。

Day-6

Slider,這是寫到現在覺得最適合該用 React 的元件,用 jQuery 好像要一直 copy dom 元素放到頭/尾,用 React 的話只要一開始寫好規則,就會決定好前/後一個該出現的圖片,覺得方便。

Day-7

顯示目前垂直滑動進度(唉不知道這個叫什麼),好像是我設定的太簡單了,寫起來也不難,時間真的都花在要怎麼用 JS 寫滑動事件XD

大概也不會真的有長這麼簡陋的網頁就是了XD 好吧第15天來寫一個困難版的好了。


因為只有14天,所以這次就先只寫7天吧,不然就沒有下一篇了QQ

  • 原來 React.js 不是一個框架,只算是 MVC 中的 View 而已。
  • 其實也不過如同 jQuery,只是 JS 中的其一 library。
  • 這潮到出水的 React.js 好像不是我這一般人需要用上的XD

雖然覺得 React 的實質效益好像沒有這麼高,但還是會把 Part II 寫完,然後有想到點子的話會繼續這 React-Days 的,下回見!