第1章?? ?什麼是前端工程師

由於前端要處理的問題相當廣泛，因此如何運用一個好的工具來解決這樣複雜的問題，就成了前端開發相當重要的一課，這也造就了如今前端框架百家爭鳴的狀況，但在介紹這些框架之前，讓我們先來了解一下幾個軟體框架的設計。



第2章?? ?從JavaScript出發

本章節將介紹JavaScript基本語法，重點說明JavaScript各項概念，就算你從未接觸過JavaScript語言，沒有任何JavaScript的開發經驗，只要看完本章節，也可以具備必須的技能，開始撰寫JavaScript。



第3章?? ?非同步處理的時代 ─ ECMAScript 6

在這個章節將會介紹我們常會用到的ES6的語法。



第4章?? ?React起手式

本章將傳授React的基礎功夫，讓我們一起把馬步扎穩，並且享受開發網頁的樂趣。



第5章?? ?事件處理與表單

本章將討論React的事件處理系統，在了解它之前讓我們先來看看真實DOM對事件的處理方式，包含如何綁定事件處理器、DOM事件流等概念。然後再來看看React的合成事件帶來了什麼樣的特性。本章最後一部分將介紹什麼是受控元件與未受控元件，以及受控元件和事件處理器的關係。我們將會以受控的方式來介紹React中表單的設計。



第6章?? ?複合元件

元件是React中的基本單元，而元件組合則是React很重要的設計精神，本章將討論如何組合、嵌套各式各樣的元件，並介紹各種元件間的通訊方式、特殊屬性等等，配合一個簡單的範例來說明這些概念，帶領大家對React有更進一步的認識。



第7章?? ?元件的生命週期

本章將討論React元件從誕生開始一直到消亡之間所經歷的過程，並將此過程整理成一張流程圖以讓讀者可以在一開始就能夠以比較全面的視野來理解元件的生命週期。本章也會對元件setState實例方法的行為進行詳細的說明，認識setState的行為也是剛跨入React的開發者必須經歷的重要課題之一。本章最後會援引React官網所提供的一個時鐘範例並稍作修改，用以觀察React元件的一生。



第8章?? ?專案結構與建置工具

在第四章，我們已經介紹了由CDN，或是直接下載檔案的方式來使用React，在這個章節我們將以專案開發的形式來使用React。



第9章?? ?建構自己的Landing Page

寫Front-End最困難的地方莫過於具備基本的程式能力外，還需要一些基礎的美學素養，因為前端處理的部份往往都跟視覺以及使用者體驗有關，因此這個章節我們就以一個專案的門面開始，使用React從無到有來打造屬於自己的Landing Page，除了認識React元件重複利用的特性，也順便介紹一些基礎的設計技巧。



第10章?? ?Flux與Redux

在React中，元件並不是單獨存在的，在元件之間會有資料的流動，而且這個資料的流動只能從父元件傳遞給子元件，因此我們稱之為單向資料流。當我們的React應用越做越複雜，我們可能會遇到動態資料的處理、儲存資料和更新資料等，此時就需要更好的架構來管理複雜的資料流，並且讓程式的邏輯更容易的預測與了解，本章目標在於介紹資料流的應用程式架構。



第11章?? ?路由

本章將用之前建立好的React環境來針對幾個常用到的功能進行練習。



第12章?? ?Single Page Application ─ 留言板實作

最後一個章節，我們將使用第九章寫好的Landing Page，繼續完成一個標準的SPA（Single Page Application），因此本章的範例，我們將會整合第十章的Redux以及第十一章的路由。更進一步的，還會帶領大家實際操作資料庫的讀寫與RESTful API的基本應用。



附錄A? JSX內建HTML元件

附錄B? React元件支援的事件

附錄C? React元件支援的HTML屬性

附錄D? React元件支援的RDFa屬性

附錄E? React元件支援的SVG屬性