视频学习地址：
http://www.jtthink.com/course/play/575
官方地址
https://facebook.github.io/react/
cdn路径
<!DOCTYPE html>
<html>
<meta charset=‘utf-8‘>
<head>
<title></title>
<script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
</body>
</html>
demo 1
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example‘)
);
</script>
demo 2 循环
<div id=‘navbar‘></div>
</body>
<script type="text/babel">
var nav_li=[
<li><a href=‘#‘>最新电影</a></li>,
<li><a href=‘#‘>最新评论</a></li>
];
ReactDOM.render(
<ul>{nav_li}</ul>,
document.getElementById(‘navbar‘)
)
</script>
</html>
<script type="text/babel">
var nav_li=[‘最新电影‘, ‘最新评论‘];
ReactDOM.render(
<ul>
{
nav_li.map(function(item){
return <li><a href=‘#‘>{item}</a></li>;
})
}
</ul>,
document.getElementById(‘navbar‘)
)
</script>
绑定事件{匿名函数、函数表达式}
<script type="text/babel">
var aa = function()
{
alert("123");
}
var nav_li=[‘最新电影‘, ‘最新评论‘];
ReactDOM.render(
<ul>
{
nav_li.map(function(item){
return <li><a href=‘#‘ onClick={function(){alert(‘123‘)}}>{item}</a></li>;
return <li><a href=‘#‘ onClick={aa}>{item}</a></li>;
})
}
</ul>,
document.getElementById(‘navbar‘)
)
</script>
但在正式环境中，是不使用这种方式编译的，而是使用nodejs + babel + plugin 来编译react
安装nodejs ：http://nodejs.cn/ 利用npm 安装 babel ：npm install babel-cli -g 安装react专用插件：npm install babel-plugin-transform-react-jsx使用插件编译：babel --plugins transform-react-jsx src/myReact.js --out-file build/myReact.js
配合编译的html：
<!DOCTYPE html>
<html>
<meta charset=‘utf-8‘>
<head>
<title></title>
<script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
</head>
<body>
<div id=‘navbar‘></div>
<script type="text/javascript" src="build/myReact.js"></script>
</body>
</html>
src/myReact.js:
var aa = function()
{
alert("123");
}
var nav_li=[‘最新电影‘, ‘最新评论‘];
ReactDOM.render(
<ul>
{
nav_li.map(function(item){
return <li><a href=‘#‘ onClick={aa}>{item}</a></li>;
})
}
</ul>,
document.getElementById(‘navbar‘)
)
编写组件和内部事件、防止函数重命名，记得利用nodejs + babel + plugin插件编译一下
var NavLI = React.createClass({
myFunc : function(){alert("123")},
render : function()
{
return <ul>
<li><a href=‘#‘ onClick={this.myFunc}>最新电影</a></li>
<li><a href=‘#‘>最新评论</a></li>
</ul>
}
})
ReactDOM.render(
<NavLI />,
document.getElementById(‘navbar‘)
)
嵌套组件和属性
var NavLI = React.createClass({
myFunc : function(){alert("123")},
render : function()
{
return <ul>
<li><a href=‘#‘ onClick={this.myFunc}>最新电影</a></li>
<li><a href=‘#‘>最新评论</a></li>
<li><SearchText abc = "Search" /></li>
</ul>
}
})
var SearchText = React.createClass({
render:function()
{
return <input type="text" placeholder = "请输入文字" className = {this.props.abc} />
}
})
ReactDOM.render(
<NavLI />,
document.getElementById(‘navbar‘)
)
时间： 2024-12-20 12:13:38