全端開發人員天梯

在上一篇文章JSX基本篇裡面我們已經針對JSX的原理和使用方法做了一些基本的說明，接下來就來談一些實際開發時的使用技巧吧！

JSX與法是React中很特別的一個部分，它可以讓你用JavaScript產出HTML時用最直覺的方式去表達，也就是類似直接撰寫HTML的方式，大幅簡化產出元件的難度，今天我們就來比較深入的了解JSX！

上一篇文章「[React速成班]從TodoList範例學習React(2)-透過實作TodoItems學習props」中，我們學到如何使用props來取得元件傳遞的參數值，也實作了TodoItems及TodoItem元件，藉此了解props的應用。接下來我們將透過實作AddTodoForm部分，來學習React中state的使用。

上一篇文章「[React速成班]從TodoList範例學習React(1)-基本架構」中，我們學到了在React的世界中，一切都是由元件組成的，也在基於這樣概念中把TodoList基本上需要的元件框出來，接下來在這篇文章中我們將實作TodoItems的部分，順便學習React中元件與元件資料傳遞的方法。

除非我們做的都是純靜態的頁面，否則在前端處理資料一定會是一個重要的議題，在React中，對於資料的處理或傳遞有兩個主要的屬性：props和state。而props就是用來作為元件與元件之間傳遞資料的媒介。

接下來終於要開始透過從實做一個TodoList來學習React啦！本篇文章將會先對React的特色簡單做一些基本且必要的介紹，然後先框好我們的TodoList基本的內容，之後在後續文章一個一個去完成它。

單純以程式碼Highlight來說的話，Sublimt Text 3算是個人感覺看起來最舒服的(雖然我還是偏好使用Visual Studio Code)，所以這篇就來快速說明一下如何設定讓Sublime Text 3可以支援JSX檔的Highlight吧！

要讓Visual Studio Code開發React的語法highlight不要亂掉，只需要把.js檔改為.jsx檔即可，不過大部分React的範例還是會用.js檔來完成，這樣會造成我們在閱讀別人程式碼時的不便，所以今天就來介紹一下如何用Visual Studio Code開發React時可以在.js檔內開發JSX也不會造成highlight的問題，另外也介紹一下如何讓Visual Studio Code支援React的intellisense。

俗話說得好，好的IDE帶你上天堂，壞的IDE讓你時程delay住套房。在寫todo list練習之前，先讓我用幾篇文章來介紹一下IDE的部分。React雖然熱門，但畢竟還算是比較新的東西，所以許多常見編輯器或IDE針對React的支援度都還是有限，最常見的問題就是把JSX程式碼存成.js檔時，由於一般都會在裡面插入類似HTML的JSX語法，結果就導致了大部分編輯器語法highlight出錯。不過畢竟React可是當今世上最熱門的library啊，當然許多主流的編輯器還是多少都有支援的。今天就在不要太貪心，只要求語法highlight不要出錯、不管是否有autocomplete、intellisense等其他酷炫功能的條件下，來比較幾款常見的程式編輯器。

如果要說2015年最熱門的前端框架，那肯定非React莫屬了！之前看到一篇PTT上的文章「[心得] 前端/Front-End/F2E面試心得分享(22間)」，作者發表了他個人面試22間公司的心得，其中以可以看到多數的公司現在都開始趨向使用React，其中也有提到一些目前AngularJS的問題，對於已經使用AngularJS一段時間的我來說也頗為感同身受！雖然即將現身(?)的Anular 2會對一些常見的問題進行改善，但跟風學學現在熱門的東西也不是個壞事...所以就決定摸索看看React。