React 安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 0.14.7，你可以在官网 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 相关的功能
• browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

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

以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：

如果我们需要使用 JSX，则

第七步、App.jsx 和 main.js

这是第一个 react 组件。后面的章节我们会详细介绍 React 组件。这个组件将输出 Hello World!!!。

App.jsx 文件代码

import React from 'react';

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

            Hello World!!!

            欢迎来到W3Cschool教程学习！！！
         
      );
   }
}

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'))

注意：

如果想要组件可以在任何的应用中使用，需要在创建后使用 export 将其导出，在使用组件的文件使用 import 将其导入。

第八步、运行服务

完成以上配置后，我们即可运行该服务：

$ npm start

通过浏览器访问 http://localhost:7777/，输出结果如下：

---

完整实例下载