当前位置:首页 > 日记 > 正文

从世界reactjs你好

从世界reactjs你好
本文在react.js提供实例和代码(一个脸谱网的工程师来构建Javascript库的用户界面)在高水平的概念。这些概念将在下面的文章中详细阐述。在这里,我必须指出,如果你是一个reactjs专家觉得代码需要改进,请你推荐给我写信,我会及时和适当的更新文章和代码。

在我继续之前发布一些代码例子,我必须提出:reactjs初学者会有一点困难,因为我最近一直用AngularJS代码。到现在为止,我不得不承认,他们帮助我们在UI中做的工作大不相同。主要区别我会发表另一个博客他们之间的对比。
在一个更高的水平,但是,有一些原因,我用了一个稍微险峻的学习路径,当我学习ReactJS:

面向构件:reactjs是面向组件的,这意味着你需要你认为UI元素的一个组成部分。有趣的是,组件可以合并。这意味着一个组件可以有一个或多个内部组件。下面的代码演示了这一点
JSX语法:它使用了一个有趣的JSX(XML)的语法写代码,JSX转换器(预编译器)是用来转换成一个明显的Javascript语法结构
事件代理模型:它遵循事件委托模型来捕获事件

下面是代码中显示的一些关键概念:

装配
事件代理
JSX语法

下面是组件已经实现的内容的简要描述

-输入框元素,用户可以输入它的用户名。在下面的文章中,提到输入框实际上是用户名组件。

- div层的元素,这是用来显示你好,用户名,在下面的文章中,就提到,div层实际上是一个hellotext组件

下面是如何设计它。此外,请找到可以表示以下概念的代码。
SayHello:可以结合元件

打招呼是父组件,包含两个部分。这个父组件是由两个内部组件。组件之一是用户名,它提供给用户的名字输入功能,另一个是hellotext,这是用来显示文字,如你好,世界。这父组件定义以下三种不同的API:

getinitialstate
handlenamesubmit
渲染(这是一个必需的接口,一个组件需要定义渲染来反映如何渲染组件)
/
这是包含两个内部组件的父组件。
组件之一是用户名,它用于允许用户输入他们的名字。
其他成分是hellotext显示/文本如你好,世界

VaR方法sayHello = react.createclass({
用于设置此状态,
访问hellotext组件后 /显示更新的状态

getinitialstate:函数(){
返回数据:‘'} {
},
建议与任何儿童一起捕获事件/事件。
在父级,并设置适当地更新子对象的新状态
HandleNameSubmit:功能(name){
this.setstate({数据:名称});
},
渲染方法包括 /两部件如用户名和hellotext

渲染:函数(){
返回(

);
}
});

用户名组件

用户名组件有以下两种方法:

HandleChange:用来捕捉onchange事件
渲染:用于渲染组件
VaR的用户名= React.createClass({
HandleChange:函数(){
VaR的用户名= this.refs.username.getdomnode()Value.trim();
This.props.onNameSubmit({用户名:用户名});
This.refs.username.getDOMNode()价值= '';
返回false;
},
渲染:函数(){
返回(
);
}
});

hellotext组件

有hellotext组件的渲染组件只有一个方法
渲染:包含代码显示的hellotext成分含量

无功hellotext = react.createclass({
渲染:函数(){
返回(

你好,{这个。道具。数据}

);
}
});

如果你想得到所有的代码,我把代码在GitHub上喂reactjs页。请自由发表意见或提出建议。

相关文章

一种将中文与CSS代码空间对齐的方

一种将中文与CSS代码空间对齐的方

对齐,空间,中文,方法,代码,本文主要介绍利用CSS代码空间中国对齐的方式,包括# X3000和伪元素。 使用一些空格来实现一些不同的中文对齐或宽度: 其中的一个国营油井服务公司;和EMSP;,由于一个好的特点,所以它可以登上舞台的网络!这个角色是什么如上…

jQuery检测元素是否存在代码共享。

jQuery检测元素是否存在代码共享。

检测,元素,是否存在,代码,电脑软件,代码中可能存在这样一种情况,根据元素是否存在,执行不同的操作,因此有必要确定指定的元素是否存在。 匹配元集合可以通过$(选择器)获得,并且匹配元素集的长度属性可以得到集合中匹配元素的数量,因此,如果判断长度…

PS抠图:磁性套索工具使用的方法

PS抠图:磁性套索工具使用的方法

抠图,方法,工具使用,套索,磁性,大家都知道,第一步是学习PS图象处理软件掌握PS抠图,其次是以小编的经验教你如何选择抠图方法,以及每一种抠图技巧是如何使用和操作,从简单的方法一个一个先进的方法,希望能帮助学习PS的朋友,这是你在PS抠图磁性套索…

如何在QQ空间获取大豆QQ技巧

如何在QQ空间获取大豆QQ技巧

空间,大豆,技巧,如何在,电脑软件,当你每天在QQ空间签到的时候,你会看到我的大豆秀。那么你知道什么是大豆,什么样的奖品可以交换吗萧边会告诉你大豆的具体用途和如何得到它的文章。 大豆是您每天在QQ空间签到或完成指定任务的专属得分,它可以…

2015伤心的QQ签名伤感签名

2015伤心的QQ签名伤感签名

伤感,伤心,电脑软件,QQ,突然发现寂寞也许是一个即将开口的话题,但什么也没说。 两。世界上最幸福的事是和你一起拥有一个疯狂的爱人。 三,莫名的心情不好,不想说没有道理的话。 四、只想等到你会改变,如果你没有后悔至少晚上陪我。 五,永远不要…

为什么我的手机短信已经发出去了,还

为什么我的手机短信已经发出去了,还

常见问题,手机短信,还没有,去了,电脑软件,由于运营商网络因素的影响,短时间内可能会出现短消息的延迟或丢失,导致QQ安全中心不能及时收到您的短信或发送短信,无法及时到达您的手机。 如果您不停地发短信,请使用其他安全验证手段或一段时间后再…

解决Chrome浏览器输入背景透明性问

解决Chrome浏览器输入背景透明性问

背景透明,浏览器,输入,性问题,电脑软件,这篇文章与大家分享的方式来解决输入:WebKit的Chrome浏览器自动填充自定义风格。如何在Chrome浏览器中设置输入的背景是透明的。这个方法很简单,在这里推荐给大家。 当您使用Chrome浏览器设计网页时,您…

520浪漫爱情个性签名经典签名

520浪漫爱情个性签名经典签名

个性签名,浪漫爱情,经典,电脑软件,520 5月20日,我爱你浪漫的日子。相对于她,他在你心中表现你的感情吗我希望你有喜欢的人物签名,欢迎阅读。 你是我心中的魔法高手,可以长一点或更短一点,心情会好还是坏,事情会变得简单还是复杂,也会变傻。太阳要…

PHP类的定义和继承用法的示例

PHP类的定义和继承用法的示例

义和,继承,示例,电脑软件,PHP,本文演示了PHP类的定义和继承用法,供大家参考: * *类 * / 类人{ 公开名称; 公共年龄; 功能__construct(namec美元,$ AGEC){ 美元->名称= $ namec; $this->age = $agec; } GetMessage(){保护功能 返回名称:$; } 功能__tost…

PHP中名称空间的详细描述

PHP中名称空间的详细描述

描述,名称空间,详细,电脑软件,PHP,总结 名称空间支持PHP的经历了一个艰难的旅程。幸运的是,PHP介绍从PHP代码5.3.the应用结构命名空间已经从PHP命名空间的引入大大提高。许多编程语言有命名空间很久以前的概念,和PHP支持的命名空间是晚一点…

jQuery的结束()方法使用了详细的解决

jQuery的结束()方法使用了详细的解决

解决方案,方法,结束,使用了,详细,结束()方法的定义和用法: 在结束()方法返回到最新的破坏性操作之前,要匹配的元素列表将更改为前一个的状态。 如果没有破坏性操作,将返回一个空集合。 破坏性操作的概念:任何改变匹配元素的操作: 美元()。Css(颜色) …

浅谈Javascript中字符编码转换问题

浅谈Javascript中字符编码转换问题

编码转换,字符,浅谈,电脑软件,Javascript,要得到一个字符编码的Unicode字符,可以使用string.charcodeat(指数)的方法,它的定义是: strobj.charcodeat(指数) 指数是在strobj对象指定的字符的位置(基于0个指标),并返回0和65535之间的值,例如一个16位整…