react学习笔记1

# 1、hello world

 

学习一个语言，最好的方式，我们需要去官网去查看文档（https://facebook.github.io/react），通过JSFiddle,便可以看到最简单的demo.
目前为止最新版本为15.3.0，后续没有特别说明，我们都是基于该版本。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>react</title>
　　<style>
　　　　.styleT{
　　　　　　color: #f40;
　　　　}
　　</style>
　　<script src="../build/react.js"></script>
　　<script src="../build/react-dom.js"></script>
　　<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
　　<div id="example"></div>
　　<script type="text/babel">

　　var Hello = React.createClass({
　　　　render:function(){
　　　　　　return <h1 className="styleT">Hello,{this.props.name}</h1>;
　　　　}
　　});
　　ReactDOM.render(
　　　　<Hello name="苍老师" />,
　　　　document.getElementById("example")
　　);
　　</script>
</body>
</html>

　　

需要注意的点：
+ 引入文件 ：当前版本需要引入react\react-dom\browser三个文件，版本不同，引入文件有出入。
　　- 问题来了，我们browser的为啥要用，文件这么大？它的作用是使浏览器支持babel，你可以使用ES2015（javascript下一代标准ECMAScript 6）进行编码。如果你用ES5，可以不引入。
+ ReactDOM.render该方法的两个参数
　　- dom节点，(并不是真正的dom节点，是个实例而已)需要注意的是class不在支持样式，因为关键字的原因，应该用className
　　- 需要插入的节点。
+ 传参，“苍老师”

# 2、事件

 

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Event</title>
　　<script src="../build/react.js"></script>
　　<script src="../build/react-dom.js"></script>
　　<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
　　<div id="main"></div>
　　<script type="text/babel">
　　　　var Btn=React.createClass({
　　　　　　render:function () {
　　　　　　　　return <div><button onClick={this.onClick}>显示与隐藏</button>    <span ref="tip">看我消失～～!</span></div>;
　　　　　　},
　　　　　　onClick:function(evt){
　　　　　　　　var ele=ReactDOM.findDOMNode(this.refs.tip);
　　　　　　　　if(ele.style.display=="none"){
　　　　　　　　　　ele.style.display="inline";
　　　　　　　　}else{
　　　　　　　　　　ele.style.display="none";
　　　　　　　　}
　　　　　　}
　　　　});


　　　　var Ipt=React.createClass({
　　　　　　render:function (){
　　　　　　　　return （
　　　　　　　　　　<div>
　　　　　　　　　　　　<input onChange={this.onChange} /> 
　　　　　　　　　　　　<span ref="infoShadow">{this.state.inputVal}</span>
　　　　　　　　　　</div>
　　　　　　　　）;
　　　　　　},
　　　　　　onChange:function(evt){
　　　　　　　　this.setState({
　　　　　　　　　　inputVal:evt.target.value,
　　　　　　　　});
　　　　　　},
　　　　　　getInitialState:function(){
　　　　　　return {
　　　　　　　　inputVal:"默认的字符"
　　　　　　}
　　　　},
　　});

　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<Btn />
　　　　　　　　<br/><br/><br/><br/>
　　　　　　　　<Ipt />
　　　　　　</div>,
　　　　　　document.getElementById('main')
　　);
　　</script>
</body>
</html>

　　


注意点：
+ type类型为text/babel，而非text/JSX
+ 渲染React组件,声明变量采用首字母大写（老纸用小写，踩坑了，半天死活没效果，也不报错）
+ React.createClass() 接受的参数为对象，{ xxx }
+ 绑定事件为 onXxx={this.fn}
+ 查找节点ReactDOM.findDOMNode
　　- 接受参数为虚拟dom节点this.refs.xxx
　　- ref="xxx"(我暂时理解为id)
+ 状态
　　- 状态初始化 getInitialState:fn(){return {xxx:"初始化"}}
　　- 改变状态 setState({xxx:"改变后的状态"})
+ 创建组件虚拟dom的结构，一行显示为一坨，很恶心
　　- 放在小括号内 （虚拟dom...）注意接触是分号

posted on 2016-08-18 20:57  要饭的  阅读(221)  评论(0)  编辑  收藏  举报