React是一套網頁的前端框架技術,因此開發者除了需要具備HTML與CSS的網頁語法開發經驗外,還需瞭解基本的JavaScript語法。因此本書將從基礎的JavaScript語言開始講起,讓無論是否有JavaScript實際開發經驗的讀者都能簡單上手。
接著將進入本書的重點:React的操作原理與基本架構,並從UI設計與實作面一步步帶領讀者進入React的開發世界。專案面更導入同樣是以JavaScript語言開發的熱門後端框架Node.js,實現第三方模組管理與建構出完整的專案結構。期許讀者能擁有使用JavaScript語言獨立開發Single Page Application的實務能力。另外本書也收錄了一些UI設計的概念與React開發的相關資源,希望能讓你的App專案更為豐富有趣。
本書特色
從JavaScript語法的基礎開始,即使沒有相關概念的讀者也能逐漸上手
章節設計橫跨美術設計與程式開發技術,盡量滿足設計與工程兩個領域方面需求的讀者。
探討網頁全端開發的各個概念,並透過實作的方式帶領讀者逐步完成這些挑戰。
作者簡介:
林為志(Leon Lin)
Hackathon Taiwan與LetSchool共同創辦人,寒食設計創辦人。會寫程式的藝術家及美術設計師,擅長美術、UI設計與油畫,程式開發方面以網頁和物聯網相關技術為主,長期致力於美術與科技相關的跨領域應用。
李健榮(Simen Li)
曾於竹科擔任射頻系統工程師、台北科技大學教師。閒暇之餘喜歡寫寫文章,經營有「E.E.狂想曲」部落格。目前投身於物聯網相關軟硬體設計,也持續地在嵌入式系統、工業機器網路的領域努力學習當中。
王雅慧(Hedy Wang)
愛文西門科技資深系統應用工程師。一位熱愛Node.js與JS的全端開發者,同時也是藍牙智慧物件標準BIPSO的核心貢獻者,目前正致力於物聯網軟硬體與框架的開發實作。
易弼仁(Peter Yi)
愛文西門科技資深系統應用工程師,同時也是開放原始碼(Open Source)社群的開發者,熟悉Node.js與網站系統技術,目前專注於物聯網相關軟體與框架設計。
目錄
第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屬性
第1章 什麼是前端工程師
由於前端要處理的問題相當廣泛,因此如何運用一個好的工具來解決這樣複雜的問題,就成了前端開發相當重要的一課,這也造就了如今前端框架百家爭鳴的狀況,但在介紹這些框架之前,讓我們先來了解一下幾個軟體框架的設計。
第2章 從JavaScript出發
本章節將介紹JavaScript基本語法,重點說明JavaScript各項概念,就算你從未接觸過JavaScript語言,沒有任何JavaScript的開發經驗,只要看完本章節,也可以具備必須的技能,開始撰寫JavaScript。
第3章 非同步處理的時代 ─ ECMAScript 6
在這個章節將會介紹我...