react入門參考資料

ReactJS簡介

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。更多關於react的中文介紹請參這篇文章.

學習react須要具有的一些知識棧：

   你須要瞭解JavaScript, HTML5 及 CSS.僅管 ReactJS 並不使用 HTML, 可是它使用的JSX語法 與 HTML很是類似，若是有這些知識的基礎，會對後面的學習很是有幫助。在接下來的例子中，我將會用到一些EcmaScript 2015 的語法，因此提早進補一下這方面的知識也是頗有益處的。

學習react須要準備的開發環境：

   雖然我推薦使用mac系統做爲react開發環境，可是windows系統也能夠知足當前的學習條件。本教程須要nodejs的支持，請自行安裝。教程相關代碼請從個人github.com上拉取相關代碼到本地。而後在終端（命令行）中輸入npm install && npm start

下面開始react的學習之旅。

1. 瞭解jsx的用法，首先新建一個App.jsx的文件。下面的例子中，咱們返回一個div容器，須要注意的是，僅管咱們返回的內容很像是一段html代碼，但它不是真的htm，記住這一點很重要。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

打開瀏覽器訪問localhost:8080/index.html  若是以前的準備工做沒有問題的話，此時，你應當能夠看到頁面上顯示出了Hello World !!! 這沒有什麼特別的，不是嗎？若是咱們要返回多個dom元素，須要有一個元素來包圍裏邊的元素。下面咱們用一個div來包圍h1,h2,和p元素來演示一下。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}

export default App;

保存這後，瀏覽器自動刷新了頁面。這神奇的效果，得益於咱們的自動化構建方式，若是你對這一塊的實現有興趣，請自行查補webpack、webpack-dev-server相關內容。

咱們能夠用html相似的方式給元素添加自定義的屬性，你須要加上一個data-前綴。下面我要演示一下如何給元素添加自定義屬性。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}

export default App;

若是要添加變量或者表達式，須要使用大括號{}。示例以下：

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}

export default App;

　須要注意的是，不能夠在表達式中使用if else , 可是可使用三目運算符 ? :  

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

下面演示在jsx語法中，如何給元素添加行內樣式，這和jquery中css()的用法很是相似。

import React from 'react';

class App extends React.Component {
   render() {

      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }

      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}

export default App;

如何使用註釋，使用{} //單行註釋， /**/  多行註釋

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}

export default App;

到這裏，關於jsx的用法就差很少能夠結束了，下一節演示組件的用法。

本章文件連接http://www.tutorialspoint.com/reactjs/reactjs_jsx.htm 可能須要FQ

2 組件的用法

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

export default App;

新建一個main.js文件，內容以下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

3 經過狀態機實現組件之間變量的傳遞，this.state  這是react中一個很是重要的對象，與之很是相似的一個對角是this.props, 它們常常會用到，我有必要簡單說一下它們的區別。state，經常使用於組件內部狀態的變化，而props，經常使用於向子組件傳遞變量。

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
				
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
				
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
	
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) ⇒ <TableRow key = {i} data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}

export default App;

在循環組件內容時，使用key = {i} 是一個經常使用的優化技巧。　

props 初次露面，下面的例子沒有什麼表明性，更像是state的用法。

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         "content": "Content from state..."
      }
   }
	
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}

export default App;

　下面展現props的真正用法，更新一下main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

更新一下App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

咱們在App組件上添加的headerProp和contentProp這兩個屬性能夠在App組件內經過this.props拿到。

再來一個props和state一塊兒使用的例子，相對有點複雜，須要仔細看代碼。

App.jsx的內容更新以下：

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from props...",
         "content": "Content from props..."
      }
   }
	
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}

export default App;

main.js還原成老樣子：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

原文連接http://www.tutorialspoint.com/reactjs/reactjs_props_overview.htm

(未完待續....)