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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180130G1HC9F00?refer=cp_1026

同媒体快讯

  • ES6入门到“放弃

    2018-10-23

相关快讯

扫码关注云+社区