React 教程安裝—JSX—組件=集成所有教程—facebook跨平臺框架
React 是一個用於構建用戶界面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
React 特點
1.聲明式設計 −React採用聲明範式，可以輕鬆描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過 React 構建組件，使得代碼更加容易得到複用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重複代碼，這也是它為什麼比傳統數據綁定更簡單。
閱讀本教程前，您需要了解的知識：
在開始學習 React 之前，您需要具備以下基礎知識：
HTML5
CSS
JavaScript
React 第一個實例
在每個章節中，您可以在線編輯實例，然後點擊按鈕查看結果。
本教程使用了 React 的版本為 15.4.2，你可以在官網 http://facebook.github.io/react/ 下載最新版。
React 實例
<divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );</script>
React 安裝
React 可以直接下載使用，下載包中也提供了很多學習的實例。
本教程使用了 React 的版本為 15.4.2，你可以在官網 http://facebook.github.io/react/ 下載最新版。
你也可以直接使用 BootCDN 的 React CDN 庫，地址如下：
<scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
使用實例
以下實例輸出了 Hello, world!
React 實例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Hello React!</title><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script></body></html>
實例解析：
實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個全新的水平。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
以上代碼將一個 h1 標題，插入 id="example" 節點中。
注意：
如果我們需要使用 JSX，則 <script> 標籤的 type 屬性需要設置為 text/babel。
通過 npm 使用 React
如果你的系統還不支持 Node.js 及 NPM 可以參考我們的 Node.js 教程。
我們建議在 React 中使用 CommonJS 模塊系統，比如 browserify 或 webpack，本教程使用 webpack。
國內使用 npm 速度很慢，你可以使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了：
$ cnpm install [name]
更多信息可以查閱：http://npm.taobao.org/。
使用 create-react-app 快速構建 React 開發環境
create-react-app 是來自於 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。
create-react-app 自動創建的項目是基於 Webpack + ES6 。
執行以下命令創建項目：
$ cnpm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start
在瀏覽器中打開 http://localhost:3000/ ，結果如下圖所示：
項目的目錄結構如下：
my-app/
README.md node_modules/ package.json .gitignore public/ favicon.ico index.html src/ App.css App.js App.test.js index.css index.js logo.svg
嘗試修改 src/App.js 文件代碼：
src/App.js
importReact, {Component}from'react';importlogofrom'./logo.svg';import'./App.css'; classAppextendsComponent{render(){return( <divclassName="App"> <divclassName="App-header"> <imgsrc={logo}className="App-logo"alt="logo" /> <h2>歡迎來到菜鳥教程</h2> </div> <pclassName="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p> </div> ); }}exportdefaultApp;
修改後，打開 http://localhost:3000/ （一般自動刷新），輸出結果如下：
React JSX
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優點：
JSX 執行更快，因為它在編譯為 JavaScript 代碼後進行了優化。
它是類型安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。
使用 JSX
JSX 看起來類似 HTML ，我們可以看下實例:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
我們可以在以上代碼中嵌套多個 HTML 標籤，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。
React 實例
ReactDOM.render( <div> <h1>菜鳥教程</h1> <h2>歡迎學習 React</h2> <pdata-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p> </div> , document.getElementById('example'));
獨立文件
你的 React JSX 代碼可以放在一個獨立文件上，例如我們創建一個 helloworld_react.js 文件，代碼如下：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
然後在 HTML 文件中引入該 JS 文件：
React 實例
<body><divid="example"></div><scripttype="text/babel"src="helloworld_react.js"></script></body>
JavaScript 表達式
我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：
React 實例
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));
在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等於 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.
React 實例
ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));
樣式
React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px 。以下實例演示了為 h1 元素添加 myStyle 內聯樣式：
React 實例
varmyStyle = {fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1style = {myStyle}>H5混合開發</h1>, document.getElementById('example'));
註釋
註釋需要寫在花括號中，實例如下：
React 實例
ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*註釋...*/} </div>, document.getElementById('example'));
數組
JSX 允許在模板中插入數組，數組會自動展開所有成員：
React 實例
vararr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));
HTML 標籤 vs. React 組件
React 可以渲染 HTML 標籤 (strings) 或 React 組件 (classes)。
要渲染 HTML 標籤，只需在 JSX 裡使用小寫字母的標籤名。
varmyDivElement = <divclassName="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。
varMyComponent = React.createClass({/*...*/});varmyElement = <MyComponentsomeProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));
React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標籤。
注意:由於 JSX 就是 JavaScript，一些標識符像 class和 for不建議作為 XML 屬性名。作為替代，React DOM 使用 className和 htmlFor 來做對應的屬性。
React 組件
本章節我們將討論如何使用組件使得我們的應用更容易來管理。
接下來我們封裝一個輸出 "Hello World！" 的組件，組件名為 HelloMessage：
React 實例
varHelloMessage = React.createClass({render: function(){return <h1>HelloWorld！</h1>; }}); ReactDOM.render( <HelloMessage />, document.getElementById('example'));
實例解析：
React.createClass 方法用於生成一個組件類 HelloMessage。
<HelloMessage /> 實例組件類並輸出信息。
注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標籤，否則也會報錯。
如果我們需要向組件傳遞參數，可以使用 this.props 對象,實例如下：
React 實例
varHelloMessage = React.createClass({render: function(){return <h1>Hello{this.props.name}</h1>; }}); ReactDOM.render( <HelloMessagename="Runoob" />, document.getElementById('example'));
以上實例中 name 屬性通過 this.props.name 來獲取。
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
複合組件
我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。
以下實例我們實現了輸出網站名字和網址的組件：
React 實例
varWebSite = React.createClass({render: function(){return( <div> <Namename={this.props.name} /> <Linksite={this.props.site} /> </div> ); }}); varName = React.createClass({render: function(){return( <h1>{this.props.name}</h1> ); }}); varLink = React.createClass({render: function(){return( <ahref={this.props.site}> {this.props.site} </a> ); }}); ReactDOM.render( <WebSitename="菜鳥教程"site=" http://www.runoob.com" />, document.getElementById('example'));
實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的信息，也就是說 WebSite 擁有 Name 和 Link 的實例。
相關推薦
