Javascript新時代學習建議


前言

本文提供了一些現在剛入門要學習Javascipt的學習者的建議。這些是我個人目前的理解,以及心得感想。

閱讀全文

React常見問答集整理


前言

整理幾個常問的問題與解答,參考資源均來自網路上,如有建議或誤解請再指正。

2016/3/21更新其中的一些說明,並加上Github庫的連結。

閱讀全文

解構賦值(Destructuring assignment)


前言

解構賦值(Destructuring assignment)是一個在ES6中新的特性語法,用於取出陣列或物件中的資料。它的解譯只有一小段英文:

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

這句後面的mirrors the construction of array and object literals,代表這個語法的使用情況 - 如同鏡子一般,對映出陣列或物件記號上的結構出來。也就是樣式(pattern)式的語法。

解構指派(Destructuring assignment)很容易就可以學習,但也有很深入的用法,尤其是與ES6其他的特性配合時會顯得複雜不易理解。這篇文章只整理一些初步的說明而已。愈到後面就稍微複雜些,也會更佳挑戰你對Javascript的基礎知識。這個特性在其他的程式語言中應該是早就有了,學過來用的。

閱讀全文

展開運算子(Spread Operator)與其餘參數(Rest parameters)


前言

展開運算子(Spread Operator)與其餘參數(Rest parameters)是ECMAScript 6中的其中一種新特性。也是懶人必學的Javascript新語法之一。這兩種特性的語法是一樣的,都是(...)三個點,我們常常在文字聊天時,這個(...)常用來代表了"無言"、"無窮的想像"或"後面其他的"的意思。

簡單摘要一下這個語法的內容:

  • 符號是三個點(...)
  • 都與陣列有關
  • 一個是用在函式的參數,一個是用在運算中

閱讀全文

何為與為何React


React 是什麼

一個當紅的名詞 - "React 一套用於建立使用者介面的Javascript函式庫"。

沖著Facebook響亮的招牌,很多人好奇這是什麼東西?函式庫?有什麼新功能?用在什麼地方?

網路上談及React的新聞與教學如雨後春筍般紛紛出現,但很多並未在真正的重點說明,有可能只是一小段程式碼的試作,有的是某個應用的教學,有的則是談談其中的一些功能特色。

這篇文章,主要在談論React是個什麼東西,也是對我內心的許多問題的解答追尋,把它摘錄與寫下來。這篇文章裡面沒半行程式碼,也不是在討論程式碼的。

閱讀全文

設定開發React的環境


前言

有很多方式可以設定開發React所需的環境,我把目前的結果摘要放上來,但是有可能現在比較適合,之後會不會改變或還有其他更好的方式,那就不一定了。如果有錯誤或有不詳盡之處,再留言或寫信給我吧。

閱讀全文

Sublime Text 3打造開發React的環境


前言

本文是設置Sublime Text 3如何打造一個開發React的環境。主要提供了幾個功能:

  • 語法高亮度顯示
  • 語法檢查
  • 程式片段(Snippets)
  • 自動完成代碼

不過缺少了一些功能,例如HTML轉換JSX之類的,目前沒有看到有可以使用的這些外掛。就加減使用了。

2016/1/29 加上自動完成套件和(Zen Coding)Emmet支援JSX的說明

閱讀全文

箭頭函式 Arrow Functions


前言

ECMAScript 6在2015年終於制訂好標準規格,我們簡稱ES2015或ES6規格。這對Javascript市場又起了一大震憾,現階段可以透過像babel的編譯器來編輯給ES5(目前大部份的新瀏覽器都支援的規格)使用,也有很多的教學文件可以參考。但瀏覽器各家還在努力中,大概還需要至少一兩年的時間,才能完成大部份的新標準實作。在這之前,雖然還有很多路要走。

ES6的新特性很多,這裡研究其中的一個新特性 - "Arrow Functions",我使用的是Typescript。

閱讀全文