React 安裝

React 可以直接下載使用，下載包中也提供了很多學(xué)習(xí)的實例。

本教程使用了 React 的版本為 0.14.7，你可以在官網(wǎng) http://facebook.github.io/react/ 下載最新版。

你也可以直接使用W3Cschool教程的 React CDN 庫，地址如下：

使用實例

以下實例輸出了 Hello, world!

嘗試一下 ?

實例解析：

實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 browser.min.js：

• react.min.js - React 的核心庫
• react-dom.min.js - 提供與 DOM 相關(guān)的功能
• browser.min.js - 用于將 JSX 語法轉(zhuǎn)為 JavaScript 語法

ReactDOM.render(
	
Hello, world!
,
	document.getElementById('example')
);

以上代碼將一個 h1 標(biāo)題，插入 id="example" 節(jié)點中。

注意：

如果我們需要使用 JSX，則

第七步、App.jsx 和 main.js

這是第一個 react 組件。后面的章節(jié)我們會詳細介紹 React 組件。這個組件將輸出 Hello World!!!。

App.jsx 文件代碼

import React from 'react';

class App extends React.Component {
   render() {
      return (
         

            Hello World!!!

            歡迎來到W3Cschool教程學(xué)習(xí)！??！
         
      );
   }
}

export default App;

我們需要引入組件并將其渲染到根元素 App 上，這樣我們才可以在瀏覽器上看到它。

main.js 文件代碼

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'))

注意：

如果想要組件可以在任何的應(yīng)用中使用，需要在創(chuàng)建后使用 export 將其導(dǎo)出，在使用組件的文件使用 import 將其導(dǎo)入。

第八步、運行服務(wù)

完成以上配置后，我們即可運行該服務(wù)：

$ npm start

通過瀏覽器訪問 http://localhost:7777/，輸出結(jié)果如下：

---

完整實例下載