diff --git a/Appendix03/README.md b/Appendix03/README.md index 92edeed..2b773b3 100644 --- a/Appendix03/README.md +++ b/Appendix03/README.md @@ -32,7 +32,7 @@ ``` $ npm install --save-dev babel-core babel-loader babel-eslint babel-preset-react babel-preset-es2015 eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react webpack webpack-dev-server html-webpack-plugin chai mocha -``` + ``` 2. 測試程式碼 1. describe（test suite）：表示一組相關的測試。`describe` 為一個函數，第一個參數為 `test suite`的名稱，第二個參數為實際執行的函數。 diff --git a/Ch01/front-end-introduction.md b/Ch01/front-end-introduction.md index bbebfc4..fa3928c 100644 --- a/Ch01/front-end-introduction.md +++ b/Ch01/front-end-introduction.md @@ -3,7 +3,7 @@ ![Web 前端工程入門簡介](./images/frameworks.png "Web 前端工程入門簡介") ## 前言 -隨著現代化網頁（Modern Web）開發專業和複雜性的提昇以及對於使用者體驗的要求下，網頁開發已從過去的 Web Develpoer 一夫當關，轉向專業分工，更加細分成網頁前端（Web Front End）、網頁後端（Web Back End）等職位。此外，由於跨平台、跨瀏覽器的需求日益增加，技術變化更迭快速，市場上對於前端工程師（Web Front End Engineer）的需求也與日俱增，前端工程的（Front End Engineering）所要面對的挑戰也越來越多。 +隨著現代化網頁（Modern Web）開發專業和複雜性的提昇以及對於使用者體驗的要求下，網頁開發已從過去的 Web Developer 一夫當關，轉向專業分工，更加細分成網頁前端（Web Front End）、網頁後端（Web Back End）等職位。此外，由於跨平台、跨瀏覽器的需求日益增加，技術變化更迭快速，市場上對於前端工程師（Web Front End Engineer）的需求也與日俱增，前端工程的（Front End Engineering）所要面對的挑戰也越來越多。 ![Web 前端工程入門簡介](./images/html-css-js.png "Web 前端工程入門簡介") diff --git a/Ch01/react-ecosystem-introduction.md b/Ch01/react-ecosystem-introduction.md index 31d9fd7..fb2235f 100644 --- a/Ch01/react-ecosystem-introduction.md +++ b/Ch01/react-ecosystem-introduction.md @@ -17,7 +17,7 @@ NPM（Node Package Manager）是 Node.js 下的主流套件管理工具。在 NP [ES6+](https://babeljs.io/blog/2015/06/07/react-on-es6-plus) 係指 ES6（ES2015）和 ES7 的聯集，在 ES6+ 新的標準當中引入許多新的特性和功能，彌補了過去 JavaScript 被詬病的一些特性。由於未來 React 將以支援 ES6+ 為主，因此直接學習 ES6+ 用法是相對好的選擇，本書的所有範例也將會以 ES6+ 撰寫。 ## Babel -由於並非所有瀏覽器都支援 ES6+ 語法，所以透過 [Babel](https://babeljs.io/) 這個 JavaScript 編譯器（可以想成是翻譯機或是翻譯蒟篛）可以讓你的 ES6+ 、JSX 等程式碼轉換成瀏覽器可以看的懂得語法。通常會在資料夾的 root 位置加入 `.bablerc` 進行轉譯規則 `preset` 和引用外掛（plugin）的設定。 +由於並非所有瀏覽器都支援 ES6+ 語法，所以透過 [Babel](https://babeljs.io/) 這個 JavaScript 編譯器（可以想成是翻譯機或是翻譯蒟篛）可以讓你的 ES6+ 、JSX 等程式碼轉換成瀏覽器可以看得懂的語法。通常會在資料夾的 root 位置加入 `.babelrc` 進行轉譯規則 `preset` 和引用外掛（plugin）的設定。 ## JavaScript 模組化開發 隨著 Web 應用程式的複雜性提高，JavaScript 模組化開發已經成為必然的趨勢，以下簡單介紹 JavaScript 模組化的相關規範。事實上，在一開始沒有官方定義的標準時出現了各種社群自行定義的規範和實踐。 @@ -83,7 +83,7 @@ NPM（Node Package Manager）是 Node.js 下的主流套件管理工具。在 NP [React Router](https://github.com/reactjs/react-router) 是 React 中主流使用的 Routing 函式庫，透過 URL 的變化來管理對應的狀態和元件。若開發不刷頁的單頁式（single page application）的 React 應用程式通常都會需要用到。 ## Flux/Redux -[Flux](https://facebook.github.io/flux/) 是一個實現單項流的應用程式資料架構（architecture），同樣是由 Facebook 推出，並和 React 專注於 View 的部份形成互補。而由 Dan Abramov 所開發的 [Redux](https://github.com/reactjs/redux) 被 React 開發社群認為是 Flux-like 更優雅的作法，也是目前主流搭配 React 的狀態（State）管理工具。讓你在開發複雜的應用程式時可以更方便管理你的狀態（state）。 +[Flux](https://facebook.github.io/flux/) 是一個實現單向流的應用程式資料架構（architecture），同樣是由 Facebook 推出，並和 React 專注於 View 的部份形成互補。而由 Dan Abramov 所開發的 [Redux](https://github.com/reactjs/redux) 被 React 開發社群認為是 Flux-like 更優雅的作法，也是目前主流搭配 React 的狀態（State）管理工具。讓你在開發複雜的應用程式時可以更方便管理你的狀態（state）。 ## ImmutableJS [ImmutableJS](https://facebook.github.io/immutable-js/)，是一個能讓開發者建立不可變資料結構的函式庫。建立不可變（immutable）資料結構不僅可以讓狀態可預測性更高，也可以提昇程式的效能。 diff --git a/Ch03/react-jsx-introduction.md b/Ch03/react-jsx-introduction.md index 1c2c3d0..33b50e1 100644 --- a/Ch03/react-jsx-introduction.md +++ b/Ch03/react-jsx-introduction.md @@ -171,7 +171,7 @@ React.createElement( ) ``` -解析前（特別注意在 JSX 中使用 JavaScript 表達式時使用 `{}` 括起，如下方範例的 `text`，裡面對應的是變數。若需希望放置一般文字，請加上 `''`）： +解析前（特別注意在 JSX 中使用 JavaScript 表達式時使用 `{}` 括起，如下方範例的 `text`，裡面對應的是變數。若需放置一般文字，請加上 `''`）： ```js var text = 'Hello React'; diff --git a/Ch04/react-component-life-cycle.md b/Ch04/react-component-life-cycle.md index 01d615c..9923cb9 100644 --- a/Ch04/react-component-life-cycle.md +++ b/Ch04/react-component-life-cycle.md @@ -30,7 +30,7 @@ } // 將 元件插入 id 為 app 的 DOM 元素中 - ReactDOM.render(, document.getElmentById('app')); + ReactDOM.render(, document.getElementById('app')); ``` 2. 使用 Functional Component 寫法（單純地 render UI 的 stateless components，沒有內部狀態、沒有實作物件和 ref，沒有生命週期函數。若非需要控制生命週期的話建議多使用 stateless components 獲得比較好的效能） @@ -52,7 +52,7 @@ } // 將 元件插入 id 為 app 的 DOM 元素中 - ReactDOM.render(, document.getElmentById('app')); + ReactDOM.render(, document.getElementById('app')); ``` 值得留意的是在 ES6 Class 中 `render()` 是唯一必要的方法（但要注意的是請保持 `render()` 的純粹，不要在裡面進行 `state` 修改或是使用非同步方法和瀏覽器互動，若需非同步互動請於 `componentDidMount()` 操作），而 Functional Component 目前允許 `return null` 值。 喔對了，在 ES6 中也不支援 `mixins` 複用其他元件的方法了。 diff --git a/Ch07/react-redux-real-world-example.md b/Ch07/react-redux-real-world-example.md index d27219c..2b7c3b2 100644 --- a/Ch07/react-redux-real-world-example.md +++ b/Ch07/react-redux-real-world-example.md @@ -81,7 +81,6 @@ ReactDOM.render( ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import ReactDOM from 'react-dom'; import TodoHeaderContainer from '../../containers/TodoHeaderContainer'; import TodoListContainer from '../../containers/TodoListContainer'; diff --git a/Ch09/react-router-redux-github-finder.md b/Ch09/react-router-redux-github-finder.md index 43edda6..464d8a2 100644 --- a/Ch09/react-router-redux-github-finder.md +++ b/Ch09/react-router-redux-github-finder.md @@ -394,7 +394,7 @@ $ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es201 export default Main; ``` - 以下是 `src/components/ResultPage/ResultPage.js`： + 以下是 `src/components/ResultPage/HomePage.js`： ```javascript import React from 'react'; diff --git a/README.md b/README.md index 5f77289..02dbcc2 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ 2. [前端圈简体中文版本 by @blueflylin]( https://github.com/blueflylin/reactjs101) [特別感謝前端圈小夥伴！](http://fequan.com/) -若需翻譯成其他語言版本，請先 `fork` 一份 `repo` 到自己的 Guthub 並另外開新的 `branch`。最後將翻譯版本連結更新在 `master` 分支中 `README.md` 的 `相關連結（Links）` 後發送 `Pull Request`，謝謝您。 +若需翻譯成其他語言版本，請先 `fork` 一份 `repo` 到自己的 GitHub 並另外開新的 `branch`。最後將翻譯版本連結更新在 `master` 分支中 `README.md` 的 `相關連結（Links）` 後發送 `Pull Request`，謝謝您。 ## 目錄（Table of Contents）