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>

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