! 2000 CSSsprites.com Web FTP app 20% 80% getelementbyid() UI Facebook 2015 3 F8 Web CSSsprites.com Web JavaScript CSS React xi React UI UI 反應 UI 宣告 declare 元件 DOM state JavaScript
xi React Web ios Android Canvas TV UI React 80% Web React HTML React 4 JSX React app JavaScript Browserify Jest ESLint Flow Flux Immutable.js React xii React
第一章 Hello World React React "Hello World" [1] React http://reactjs.com GitHub http:// facebook.github.io/react/ "Download" "Download Starter Kit" ZIP mkdir ~/reactbook mv ~/Downloads/react-0.14.7/ ~/reactbook/react reactbook 1-1
2 Hello World 1-1 React ~/reactbook/react/build/react.js React react.js [2] Hello React World (~/reactbook/01.01.hello.html) <!DOCTYPE html> <html> <head> <title>hello React</title> <meta charset="utf-8"> </head> <body> <div id="app"> <!-- --> </div>
Hello React World 3 <script src="react/build/react.js"></script> <script src="react/build/react-dom.js"></script> <script> // </script> </body> </html> 你可以在隨附的程式碼儲存庫中找到這本書的所有程式碼 (https:// github.com/stoyan/reactbook/) [3] React DOM <script src> <div id="app"> 你總是可以將一般 HTML 內容與其他 JavaScript 程式庫混合 React 應用程式一起使用, 也可以在相同頁面上運用幾個 React 應用程式, 你只需要在 DOM 裡頭的某個地方參照 React, 並且指明 就在這裡施展你的魔法 hello 01.01.hello.html // ReactDOM.render( null, "Hello World!"), document.getelementbyid("app") 01.01.hello.html 1-2
4 Hello World 1-2 React [4] 1-2 Chrome Developer Tools <div id= "app"> placeholder React React API API ReactDOM render() React 0.14 render React HTML DOM canvas Android ios
React.DOM.* 5 component UI React HTML DOM wrapper React.DOM h1 <h1> HTML ) [5] DOM document.getelementbyid("app") React DOM React 一旦跨越這座橋梁, 從 DOM 到達 React, 就不用再擔心 DOM 操作, 因為 React 會負責從元件到底層平台 ( 瀏覽器的 DOM 畫布 原生應用程式等 ) 的轉換工作 你 擔心 DOM, 但並不表示你無法干涉它, 假如你因為任何理由需要回到 DOM 領域,React 也提供你必要的 逃生口 DOM React h1 Hello World! React.DOM.* React.DOM React HTML 1-3 API 注意 React.DOM 與 ReactDOM 之間的差異, 前者是一群現成可用的 HTML 元素, 後者是在瀏覽器中渲染應用程式的機制 ( 想想 ReactDOM. render())
6 Hello World 1-3 React.DOM React.DOM.* "Hello, World!" ReactDOM.render( null, "Hello World!"), document.getelementbyid("app") h1() null DOM [6] { id: "my-heading", }, "Hello World!" ), 1-4 HTML
React.DOM.* 7 1-4 React.DOM HTML "Hello World!" DOM Text [7] {id: "my-heading"}, React.DOM.span(null, "Hello"), " World!" ), 1-5 {id: "my-heading"}, React.DOM.span(null, React.DOM.em(null, "Hell"), "o"
8 Hello World ), " world!" ), 1-5 React.DOM HTML [8] 如你所見, 開始嵌套元件之後, 很快就會有大量的函式呼叫與括號需要注意跟檢查, 為求簡單, 你可以使用 JSX,JSX 是一個需要單獨討論的主題 ( 第四章 ), 但就現在而言, 讓我們先暫時忍受一下單純的 JavaScript 語法, 原因是 JSX 有些爭議 : 人們一開始經常覺得它很討厭 ( 啊, 我的 JavaScript 裡有 XML!), 但稍後便覺得它是不可或缺的 為了讓你稍微感受一下, 下面是使用 JSX 語法的程式碼片段 : ReactDOM.render( <h1 id="my-heading"> <span><em>hell</em>o</span> world! </h1>, document.getelementbyid("app")
DOM 9 DOM DOM class for style class for JavaScript classname htmlfor [9] // // { class: "pretty", for: "me", }, "Hello World!" // // { classname: "pretty", htmlfor: "me", }, "Hello World!" style HTML JavaScript XSS // // { style: "background: black; color: white; font-family: Verdana", }, "Hello World!" // // { style: {
10 Hello World background: "black", color: "white", fontfamily: "Verdana", } }, "Hello World!" CSS JavaScript API fontfamily font-family 10 React DevTools Download the React DevTools for a better development experience: https://fb.me/react-devtools. URL React 1-6 1-6 React DevTools 4
11 "Hello World" React <script> DOM React ReactDOM. render(reactwhat, domwhere) 11 DOM React.DOM. div(attributes, children) React UI