react入门
一、react是什么？
还是直接上原话吧
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
翻译成人话，react是用来构建前端界面的，稍微专业一点，澄清一个可能被大家误解的概念，react不是mvc框架，
而是构建mvc里面view这部分的库，至于其他部分采用什么技术react并不限制。
一句话，react就是构建用户界面的。
二、为啥用它
1.因为它火，学它能找好工作涨工资
2.那么为啥它火？因为他牛逼，为啥牛逼，我们下面就说。
三、怎么用？
既然说了它牛逼，那么我们就从三个部分去说说。
1.react初探
涉及到简单的基础知识，比如安装，配置，基础知识和简要的小例子
2.react实际应用
实际上线react应该如何做，比如使用可以构建版本的react，模块化，和压缩等。
3.react 本地应用
我们研究下看看react如何实习它说的用js写原生应用。
四、正式开始
1.react 基础知识
官网：http://reactjs.cn/ （这个知识更新很慢，适合入门）
推荐：https://facebook.github.io/react/（适合开发）
我们开始第一个例子，老规矩hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
说明：
1.react 运行需要三个库，而且这三个文件顺序不能变。
2.例子中那一坨不像js也不像html得恶心玩意是啥？这个是FB（facebook）自己搞的JSX语法，相当的简单，只要注意几点就行。
a).<script type="text/babel"> 这里类型是babel,babel是什么？把ES6-ES5的工具，这里先知道就好，我们在实际应用中，详细解释。
b).ReactDOM.render(标签，把前面的标签放到哪里)
c).React 需要确保一个组件只能有一个根节点
3.事件和其他
这里我把事件和其它注意事项从2里面单拎出来，因为太重要而且容易犯错
ReactDOM.render(
<input type = "button" value ="按钮" onClick ={show} />,
document.getElementById('root')
);
注意事项：
1.单标签闭合
2.事件写法 onclick,onDoubleClick 驼峰命名法
3.函数用 {show} 注意外面不加引号，里面
第二个例子，点击计数
var count = 0;
function fnCLick(){
count++;
ReactDOM.render(
<div>
<input type = "button" value ="按钮" onClick ={fnCLick} />
<br/>
总共点击了{count}次
</div>,
document.getElementById('root')
);
}
fnCLick();
2.react 类
第三个例子，react是基于状态，时钟，热身
function tick(){
var oDate = new Date();
ReactDOM.render(
<div>
{oDate.getHours()}:{oDate.getMinutes()}:{oDate.getSeconds()}
</div>,
document.getElementById('root')
);
}
setInterval(tick);
开始正式的例子
var B = React.createClass({
a:12,
b:5,
getInitialState:function(){return {count:0}},
render:function () {
return (
<h2>{parseInt(this.props.c)+parseInt(this.props.d)}</h2>
);
}
});
ReactDOM.render(
<B c ="3" d="8"/>,
document.getElementById('root')
);
注意几点·
1.类不是必须的，但是最好用类，因为组件化。
2.render的返回值的括号可以去掉，但是fb说了，最好加上，看着好看。
3.react中的类不用实例化。
3.react数据交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/ajax.js"></script>
<script type="text/babel">
var A = React.createClass({
getInitialState:function(){
return {status:'等待登录'}
},
render:function(){
return (
<div>
用户：<input type="text" id="txt1" /><br/>
密码：<input type="password" id="txt2" /><br/>
<span style={{color:'red'}}>{this.state.status}</span><br/>
<input type="button" value="注册" onClick={this.reg}/>
<input type="button" value="登录" onClick = {this.login}/>
</div>
);
},
reg:function(){
var _this = this;
var oT=document.getElementById('txt1');
var oT2=document.getElementById('txt2');
ajax({
url:'user.php',
data:{
act:'add',
user:oT.value,
pass:oT2.value
},
success:function(str){
var json = eval('('+str+')');
_this.setState({status:json.desc});
}
});
},
login:function(){
//登录一样就不写了
}
});
ReactDOM.render(
<A />,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
react只是展示层的东西，跟你用什么数据层没关系，你可以像我一样自己写原生ajax，也可以用jquery或者angular做数据交互。
到此为止，我们基本的angular入门就够用了，但是离实际项目上线还差很远，下面我们说一下实际项目中怎么更精细的使用react和一些全新的技术。
网友评论