React一些必須要知道的基礎

標籤：組件   大項目   模組   world   需要   turn   instagram   市場   通過   

     React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 架構，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。

1、JSX文法

React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 文法擴充。

ReactDOM.render(<div><h1>菜鳥教程</h1><h2>歡迎學習 React</h2>    <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>    </div>,document.getElementById(‘example‘));

我們可以在以上代碼中嵌套多個 HTML 標籤，需要使用一個 div 元素包裹它（有且只能有一個最外層標籤），執行個體中的 p 元素添加了自訂屬性 data-myattribute，添加自訂屬性需要使用 data- 首碼。　　

2、組件的應用

通過 React 構建組件，使得代碼更加容易得到複用，能夠很好的應用在大項目的開發中。React的核心就是組件，所謂組件，即封裝起來的具有獨立功能的UI組件。React推薦以組件的方式去重新思考UI構成，將UI上每一個功能相對獨立的模組定義成組件，然後將小的組件通過組合或者嵌套的方式構成大的組件，最終完成整體UI的構建。例如，Facebook的instagram.com整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套的大量其它組件，大家有興趣可以看下它背後的代碼。下面我們來看一個組件的例子：

 var HelloMessage = React.createClass({        render: function() {          return <h1>Hello World！</h1>;        }      });      ReactDOM.render(        <HelloMessage />,        document.getElementById(‘example‘)      );

React.createClass 方法用於產生一個組件類 HelloMessage。

 

　

React一些必須要知道的基礎