学习主要参考的资料

阮一峰 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>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="bower_components/babel/browser.js"></script>
    <title>Title</title>
</head>
<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>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="bower_components/babel/browser.js"></script>
    <title>Title</title>
</head>
<body>
<div id="test1">
</div>
<script type="text/babel"> ReactDOM.render(<h1>test</h1>,document.getElementById("test1")); </script>
</body>
</html>

简单定义一个组件

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

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

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

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

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

嵌套定义组件

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

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

原文地址：https://www.jb51.cc/react/304814.html

React初学体验