• 只有那些瘋狂到以為自己可以改變世界的人,才能改變這個世界。

    只有那些瘋狂到以為自己可以改變世界的人,才能改變這個世界。

  • 那些會的人就做,那些不會的人就抱怨。

    那些會的人就做,那些不會的人就抱怨。

  • 知之者不如好之者,好之者不如樂之者

    知之者不如好之者,好之者不如樂之者

為何說setState方法是異步的

為何說setState方法是異步的

在學習或使用過一陣子React後,你可能會發現一個在setState方法的特性,以下面這個簡單範例來說明:

觀看全文

JavaScript裡的語句用分號結尾是個選項嗎

JavaScript裡的語句用分號結尾是個選項嗎

在JS裡的分號(;)是什麼作用?總結一下,它既是語句(表達式)的分隔,也可以作為語句的結尾。但只認為分號(;)就一定是語句的結尾是有疑問的…

觀看全文

React Native入門問題與解答

React Native入門問題與解答

這些問題可能是在學習React Native之前會產生的,在這裡分享一些解答給有興趣投入的開發者參考。

觀看全文

React Native設定Android開發環境 - macOS與Windows

React Native設定Android開發環境 - macOS與Windows

以官網說明來設定React Native的Android開發環境時應該是很簡單,但對剛開始的使用者最困難的地方,可能是在環境變數的設定,這篇文章是一些實際安裝過程的細部說明。

觀看全文

Flux - 為React打造的單向資料流架構

Flux - 為React打造的單向資料流架構

這篇文章中沒有半行程式碼,也不需要解說程式碼,只是講一些Flux架構的概念與技術重點。Flux的架構基本上是基於React特性設計而來的一種解決方案,它是React應用要進行規模化的必經之路。這篇文章希望提供一些個人的心得見解,供作網友們參考。

觀看全文

React的野望

React的野望

看到最近React在Github上已經超過5萬個星,這個趨勢應該是銳不可擋了,未來的React發展是如何,相信有很多使用者非常關心,以下的內容是從最近的在網路上看到的文章與影片來看幾個React未來的發展。

觀看全文

SCSS開發的LiveReload議題

SCSS開發的LiveReload議題

LiveReload的中文是"即時/自動重新載入"的意思,指的是在撰寫SASS/SCSS時,在編輯時立即在瀏覽器進行重新載入然後預覽的工作。這個工作原本是個手動或半自動的流程,也就是"編譯成CSS->重新在瀏覽器中重新載入",透過一些機制設定過可以自動來作這件事。

觀看全文

SCSS 15分鐘入門

SCSS 15分鐘入門

SCSS(Sassy CSS,時髦的CSS)是SASS中的一種新式語法,SASS則是一種針對CSS的腳本程式語言,藉由提供程式語言的特性,例如變數、巢狀結構、混合、函式與擴充(繼承)等等,可以預先對CSS進行結構化的工作,最後再編譯的網頁上可使用的CSS語法。

觀看全文

Flow靜態資料類型的檢查工具,10分鐘快速入門

Flow靜態資料類型的檢查工具,10分鐘快速入門

Flow是一種靜態資料類型的輔助檢查工具,Flow的功能是讓現有的JavaScript語法可以作預先資料類型的定義,在開發過程中進行自動檢查,當然在最後編譯時,可以用工具來移除這些標記。在這之前,你可能有聽過TypeScript程式語言,它其中也有靜態資料類型的特性,常常會拿來與Flow作比較。不過,相較於TypeScript是另外制作一套超集(superset)程式語言,最後再經過編譯為JavaScript程式碼來執行。Flow走的則是非強制性與非侵入式的路線,提供了另一種在現有JavaScript應用上的選擇。總結來說,這兩種方式的目的是相似的,各自有優點也有不足之處,不過青菜蘿蔔各有所好,要選擇哪一種方式就看你的選擇。

觀看全文

Promise教學 - Promises/A+標準定義

Promise教學 - Promises/A+標準定義

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。


原生的ES6 Promise是符合Promises/A+標準的

所謂的Promises/A+標準,其實就是個幾千字的一頁網頁而已,裡面的說明與用語並不會太難理解。雖然ES6標準中也有自己的Promise物件標準章節,但因為裡面涉及很多實作技術說明,明顯地用字遣詞艱澀許多,所以在這裡就不多加討論。以下使用Promises/A+標準作為一個開始,來解說Promise的標準裡有什麼內容。這一章僅有定義部份,之後的解說也是會依照Promises/A+標準中的規則來說明。

觀看全文

Promise教學 - Promise物件建立與基本使用

Promise教學 - Promise物件建立與基本使用

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。


Promise物件的建立

ES6 Promise的實作中,會確保Promise物件一實體化後就會固定住狀態,要不就是"已實現",要不就是"已拒絕"

觀看全文

Promise教學 - 基本概念

Promise教學 - 基本概念

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。


異步Callback(回調)

Promise中的所有回調函式,都是異步執行的

我需要再次強調,並非所有的使用callbacks(回調)函式的API都是異步執行的。在JavaScript中,除了DOM事件處理中的回調函式9成9都是異步執行的,語言內建API中使用的回調函式不一定是異步執行的,也有同步執行的例如Array.forEach,要讓開發者自訂的callbacks(回調)的執行轉變為異步,有以下幾種方式:

觀看全文

Promise教學 - 前言

Promise教學 - 前言

本內容是從免費電子書從Promise開始的JavaScript異步生活中轉貼過來,有興趣可以前往閱讀。


一個promise代表一個異步運算的最終結果 ~譯自Promises/A+

Promise語法結構提供了更多的程式設計上的可能性,它是一個經過長時間實戰的結構,在許多知名的函式庫或框架中很早就有見到Promise物件的身影,例如Dojo、jQuery、YUI、 Ember、Angular、WinJS、Q等等,之後Promises/A+社區則提供了統一的標準。在最近新一代的ES6標準中將會包含了Promise的實作,提供原生的語言內建支援,這將是個開始,往後會有愈來愈多API以此為基礎架構在其上。

觀看全文

this

this

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

在其他以類別為基礎的程式語言中,this指的是目前使用類別進行實體化的物件。而JavaScript語言中因為沒有類別這種東西,設計上也不一樣,this的指向的是目前呼叫函式或方法的擁有者(owner)物件,也就是說它與函式如何被調用有關,雖然是同一函式的呼叫,因為不同的物件呼叫,也有可能是不同的this值。

觀看全文

Closure 閉包

Closure 閉包

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

閉包定義

Closure這個字詞是由Close與字尾-ure所構成,-ure有"動作"、"進行"或"結果"的意思,如果close是關閉的意思,clousure就是關閉的結果或動作,它可以作為名詞或動詞使用,中文有"封閉"、"終止"或"結束"的意思。

由於JavaScript語言中的函式是頭等函式(first-class function)的設計,代表函式在語言中的應用上享有與一般原始資料類型的值同等地位,函式可以傳入其他函式作為傳入參數,可以當作另一個函式的回傳值,也可以指定為一個變數的值,或是儲存在資料結構中(例如陣列或物件),在語言中甚至是有自己獨有的資料類型(typeof一個函式回傳值是'function')。

閉包是一種資料結構,包含函式以及記住函式被建立時當下環境。

觀看全文

Callback 回調

Callback 回調

本文章摘錄自從ES6開始的JavaScript學習生活一書中的內容。有興趣可以前往觀看。

Callback(回調)是什麼?

中文翻譯字詞會用"回呼""、"回叫"、"回調",都是聽起來很怪異的講法,Callback在英文是"call back"兩個單字的合體,你應該有聽過"Call me back"的英文,實際情況大概是有客戶打來電話給你,可是你正在電話中,客戶會留話說請你等會有空時再"回電"給它,這裡的說法是指在電信公司裡的callback的涵意。而在程式開發上上,callback它的使用情境其實也是有類似的地方。

觀看全文

Atom打造開發React的環境 - 簡介與套件

Atom打造開發React的環境 - 簡介與套件

前言

本文說明了使用Atom打造開發React時使用的開發工具。Atom需要安裝不少套件才能使用,它並不是一個軟體就完全滿足所有需求的軟體,本文的目的是提供一些安裝與設定的經驗。另外,某些套件也需要進一步設定,尤其是某些特殊使用的軟體,需要另外搭配Node.js才能正常使用。

觀看全文

設定開發React的環境 - React Hot Loader

設定開發React的環境 - React Hot Loader

對照之前的設定開發React的環境文章,經過了一段時間內又有一些新的修改。首先最大的修改部份是原本被棄用的react-hot-loader,現在又復活了,而react-transform-hmr則是被棄用。這兩個用法有一些小差異,本文快速的說明新的樣版文件(boilerplate)的一些設定部份。

觀看全文

React使用ES6 Class

React使用ES6 Class

在React官方的文件中,你是不容易找到使用ES6 Class的方式,來定義React元件的教學或指引。這是一個特別的情況,是官方不認同這樣的作法,還是官方並不建議這樣的作法?

觀看全文

React style guide(Khan Academy)中文翻譯

React style guide(Khan Academy)中文翻譯

前言

本篇翻譯是翻譯React style guide(Khan Academy)的內容。 這篇翻譯遵循了在這個翻譯指引 Translation Guide中的翻譯規則,希望能提供更容易閱讀與理解的翻譯內容。

Khan Academy是一個世界性的非營利教育組織,提供網路免費教學,在Youtube上有超過5600支教學影片。

觀看全文