From 71b09c61fe9bf08d3cf5dd14655037b01841112b Mon Sep 17 00:00:00 2001 From: kdchang Date: Thu, 17 Nov 2016 21:54:39 +0800 Subject: [PATCH] fix babel-standalone --- Ch02/webpack-dev-enviroment.md | 4 +-- Ch04/props-state-introduction.md | 25 ++++++++++--------- .../src/components/Repos/Repos.js | 2 +- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/Ch02/webpack-dev-enviroment.md b/Ch02/webpack-dev-enviroment.md index f1f76af..c4beb2c 100644 --- a/Ch02/webpack-dev-enviroment.md +++ b/Ch02/webpack-dev-enviroment.md @@ -22,7 +22,7 @@ 以下是 React [官方首頁的範例](https://facebook.github.io/react/index.html)，以下使用 `React v15.2.1`： 1. 理解 `React` 是 `Component` 導向的應用程式設計 -2. 引入 `react.js`、`react-dom.js`（react 0.14 後將 react-dom 從 react 核心分離，更符合 react 跨平台抽象化的定位）以及 `babel-core-browser` 版 script（可以想成 `babel` 是翻譯機，翻譯瀏覽器看不懂的 `JSX` 或 `ES6+` 語法成為瀏覽器看的懂得的 `JavaScript`。為了提昇效率，通常我們都會在伺服器端做轉譯，這點在 production 環境尤為重要） +2. 引入 `react.js`、`react-dom.js`（react 0.14 後將 react-dom 從 react 核心分離，更符合 react 跨平台抽象化的定位）以及 `babel-standalone` 版 script（可以想成 `babel` 是翻譯機，翻譯瀏覽器看不懂的 `JSX` 或 `ES6+` 語法成為瀏覽器看的懂得的 `JavaScript`。為了提昇效率，通常我們都會在伺服器端做轉譯，這點在 production 環境尤為重要） 3. 在 `` 撰寫 React Component 要插入（mount）指定節點的地方：`
` 4. 透過 `babel` 進行語言翻譯 `React JSX` 語法，`babel` 會將其轉為瀏覽器看的懂得 `JavaScript`。其代表意義是：`ReactDOM.render(欲 render 的 Component 或 HTML 元素, 欲插入的位置)`。所以我們可以在瀏覽器上打開我們的 `hello.html`，就可以看到 `Hello, world!` 。That's it，我們第一個 `React` 應用程式就算完成了！ @@ -35,7 +35,7 @@ - + diff --git a/Ch04/props-state-introduction.md b/Ch04/props-state-introduction.md index 64bd7fd..f96044c 100644 --- a/Ch04/props-state-introduction.md +++ b/Ch04/props-state-introduction.md @@ -201,16 +201,16 @@ class TodoApp extends React.Component { this.setState({items: nextItems, text: nextText}); } render() { - return ( -
-

TODO

- -
- - -
-
- ); + return ( +
+

TODO

+ +
+ + +
+
+ ); } } @@ -222,7 +222,7 @@ ReactDOM.render(, document.getElementById('app')); ## Refs 與表單處理 上面介紹了 props（傳入後就不能修改）、state（隨著使用者互動而改變）和事件處理機制後，我們將接續介紹如何在 React 中進行表單處理。同樣我們使用 React 官網範例 A Component Using External Plugins 進行介紹。由於 React 可以容易整合外部的 libraries（例如：jQuery），本範例將使用 `remarkable` 結合 `ref` 屬性取出 DOM Value 值（另外比較常用的作法是使用 `onChange` 事件處理方式處理表單內容），讓使用者可以使用 Markdown 語法的所見即所得編輯器（editor）。 -HTML Markup（記得除了引入 `react` 和 `react-dom` 外還要用 `CDN` 方式引入 `remarkable` 這個 `Markdown` 語法 parser 套件）： +HTML Markup（除了引入 `react` 、 `react-dom` 還要用 `CDN` 方式引入 `remarkable` 這個 `Markdown` 語法 parser 套件，記得如果沒有使用 Webpack 或是 browserify + babelify 等工具需要引入 `babel-standalone` 瀏覽器解析 ES6 語法並於引入 script 加上 type="text/babel"）： ```html @@ -235,9 +235,10 @@ HTML Markup（記得除了引入 `react` 和 `react-dom` 外還要用 `CDN` 方 +
- + ``` diff --git a/Ch05/react-router-example/src/components/Repos/Repos.js b/Ch05/react-router-example/src/components/Repos/Repos.js index a5e3156..d9c1136 100644 --- a/Ch05/react-router-example/src/components/Repos/Repos.js +++ b/Ch05/react-router-example/src/components/Repos/Repos.js @@ -8,7 +8,7 @@ const Repos = (props) => ( ); Repos.propTypes = { - params: React.PropTypes.object, + params: React.PropTypes.Object, }; export default Repos;