一、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>
Hello World
ReactDOM.render(
Hello,world!,
document.getElementById('root')
);
说明:
1.react 运行需要三个库,而且这三个文件顺序不能变。
2.例子中那一坨不像js也不像html得恶心玩意是啥?这个是FB(facebook)自己搞的JSX语法,相当的简单,只要注意几点就行。
a). 这里类型是babel,babel是什么?把ES6-ES5的工具,这里先知道就好,我们在实际应用中,详细解释。
b).ReactDOM.render(标签,把前面的标签放到哪里)
c).React 需要确保一个组件只能有一个根节点
3.事件和其他
这里我把事件和其它注意事项从2里面单拎出来,因为太重要而且容易犯错
ReactDOM.render(
,
document.getElementById('root')
);
注意事项:
1.单标签闭合
2.事件写法 onclick,onDoubleClick 驼峰命名法
3.函数用 注意外面不加引号,里面
第二个例子,点击计数
varcount=;
functionfnCLick(){
count++;
ReactDOM.render(
总共点击了{count}次
,
document.getElementById('root')
);
}
fnCLick();
2.react类
第三个例子,react是基于状态,时钟,热身
function tick(){
var oDate = new Date();
ReactDOM.render(
::
,
document.getElementById('root')
);
}
setInterval(tick);
开始正式的例子
var B = React.createClass({
a:12,
b:5,
getInitialState:function()},
render:function () {
return (
);
}
});
ReactDOM.render(
,
document.getElementById('root')
);
注意几点·
1.类不是必须的,但是最好用类,因为组件化。
2.render的返回值的括号可以去掉,但是fb说了,最好加上,看着好看。
3.react中的类不用实例化。
3.react数据交互
Hello World
领取专属 10元无门槛券
私享最新 技术干货