学习主要参考的资料

阮一峰 http://www.jb51.cc/article/p-rkowmlmt-bnx.html
视频：React中文站中的视频连接 http://react-china.org/t/reactjs/584
具体的视频的地址为：
http://www.tudou.com/plcover/ah20h1-t4V4/?spm=a2h1s.8267934.videoKw.A

start

使用bower 下载react，首先下载bower，然后下载React

bower install React

React JSX 解析

JSX 语法转为 JavaScript 语法，使用babel

JSX 详细的讲解菜鸟教程中写的还是比较的详细 http://www.runoob.com/react/react-jsx.html

bower install babel

目录的结构

<!DOCTYPE html>
<@H_502_32@html lang="en">
<@H_502_32@head>
    <@H_502_32@Meta charset="UTF-8">
    <@H_502_32@script src="bower_components/react/react.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/react/react-dom.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/babel/browser.js"></@H_502_32@script>
    <@H_502_32@title>Title</@H_502_32@title>
</@H_502_32@head>
<@H_502_32@body>

react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

第一个简单的React

将H1标签中的内容插入到id 为 test1的目录中

<!DOCTYPE html>
<@H_502_32@html lang="en">
<@H_502_32@head>
    <@H_502_32@Meta charset="UTF-8">
    <@H_502_32@script src="bower_components/react/react.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/react/react-dom.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/babel/browser.js"></@H_502_32@script>
    <@H_502_32@title>Title</@H_502_32@title>
</@H_502_32@head>
<@H_502_32@body>
<@H_502_32@div id="test1">
</@H_502_32@div>
<@H_502_32@script type="text/babel"> ReactDOM.render(<@H_502_32@h1>test</@H_502_32@h1>,document.getElementById("test1")); </@H_502_32@script>
</@H_502_32@body>
</@H_502_32@html>

简单定义一个组件

将定义的MessageBox这个组件渲染到id为test2的标签中

<!DOCTYPE html>
<@H_502_32@html lang="en">
<@H_502_32@head>
    <@H_502_32@Meta charset="UTF-8">
    <@H_502_32@script src="bower_components/react/react.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/react/react-dom.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/babel/browser.js"></@H_502_32@script>
    <@H_502_32@title>Title</@H_502_32@title>
</@H_502_32@head>
<@H_502_32@body>
<@H_502_32@div id="test2">
</@H_502_32@div>

<@H_502_32@script type="text/babel"> var MessageBox= React.createClass({ render:function () { return (<@H_502_32@h2>wangwang</@H_502_32@h2>); } }) ReactDOM.render(<@H_502_32@MessageBox/>,document.getElementById("test2")); </@H_502_32@script>
</@H_502_32@body>
</@H_502_32@html>

给组件增加一个点击事件，是不是感觉很简单的

<@H_502_32@script type="text/babel"> var MessageBox= React.createClass({ clikme:function () { alert("click me") },render:function () { return (<@H_502_32@h2 onClick={this.clikme}>wangwang</@H_502_32@h2>); } }) ReactDOM.render(<@H_502_32@MessageBox/>,document.getElementById("test2")); </@H_502_32@script>

嵌套定义组件

使用两个定义好的组件进行使用哦~

<!DOCTYPE html>
<@H_502_32@html lang="en">
<@H_502_32@head>
    <@H_502_32@Meta charset="UTF-8">
    <@H_502_32@script src="bower_components/react/react.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/react/react-dom.js"></@H_502_32@script>
    <@H_502_32@script src="bower_components/babel/browser.js"></@H_502_32@script>
    <@H_502_32@title>Title</@H_502_32@title>
</@H_502_32@head>
<@H_502_32@body>
<@H_502_32@div id="test2">
</@H_502_32@div>
<@H_502_32@script type="text/babel"> var MessageBox = React.createClass({ render:function () { return ( <@H_502_32@div> <@H_502_32@h1>hello word</@H_502_32@h1> <@H_502_32@MessageBox2/> </@H_502_32@div> ); } }); var MessageBox2= React.createClass({ render:function () { return (<@H_502_32@h2>wangwang</@H_502_32@h2>); } }) ReactDOM.render(<@H_502_32@MessageBox/>,document.getElementById("test2")); </@H_502_32@script>
</@H_502_32@body>
</@H_502_32@html>

React初学体验