文档章节

从零开始学React(2)——React语法

筱飞
 筱飞
发布于 2016/05/16 15:17
字数 298
阅读 131
收藏 0

前一章内容是从零开始学React(1)——  http://my.oschina.net/u/2608629/blog/675631

第一章,我们会使用render()方法了,这里。我们做更深入的研究。

先上demo

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="hello_name"></div>
<script type="text/babel">
	var names=["Joey","Harry","Roxie"];
	ReactDOM.render(
		<div>
			{names.map(function (name){
				return <div>Hello {name}!</div>
			})}
		</div>,
		document.getElementById("hello_name")
		)
</script>
</body>
</html>

上图运行结果如下:

在JXS语句中,有2个标签我们要熟练掌握。<>和{}。<>这个符号是html中最经常遇到的,代表标签。在JXS中,所有被<>括起来的内容。都会被解析为HTML内容。

相对的{},这个符号被javascript解析,{}这个符号也挺好玩的,EL表达式,Jquery,angular等需要替换变量的地方使用的都是这个。

就像HTML中,内容嵌套一样,在JXS语句中,<>和{}也是相互嵌套。然后生成了我们想要的HTML页面。

map():是一个遍历方法,在React中,可以把数组的一个个元素取出来。

接下来的一章是从零开始学React(3)——数组 http://my.oschina.net/u/2608629/blog/675799

© 著作权归作者所有

筱飞
粉丝 15
博文 145
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
从零开始学React(3)——数组

前一章是从零开始学React(2)——React语法 http://my.oschina.net/u/2608629/blog/675744 在JXS中,我们可以把要显示的内容放入一个数组。然后,打印出来。即使数组中放的元素有嵌套关系也没...

筱飞
2016/05/16
351
0
从零开始学React(1)——HelloWorld

一,React是什么 React只是一个javascript 库,只不过它是facebook公司编写并发布的。 React 起源于 Facebook 的内部项目,因为 FB 对市场上所有 JavaScript MVC 框架,都不满意,就决定自己...

筱飞
2016/05/16
193
0
从零开始学React(4)——自定义组件

前一章是从零开始学React(3)——数组 http://my.oschina.net/u/2608629/blog/675799 从这一章开始,难度就加大了。首先,我们看一下什么是组件(component)。 React 允许将代码封装成组件(c...

筱飞
2016/05/16
511
3
前端战五渣学React——JSX & React.createElement() & React.ReactElement()源码

最近《一拳超人》动画更新第二季了,感觉打斗场面没有第一季那么烧钱了,但是剧情还挺好看的,就找了漫画来看。琦玉老师真的厉害!!!打谁都一拳,就喜欢看老师一拳把那些上来就吹牛逼的反派...

戈德斯文
06/06
0
0
React Flow代码静态检查

Flow Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以用于所有前端开发的项目而不仅仅局限于...

溜达向日葵
2018/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos config的deleteConfig

序 本文主要研究一下nacos config的deleteConfig ConfigController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/ConfigController.java @Controller@Re......

go4it
昨天
5
0
面试:原来Redis的五种数据类型底层结构是这样的

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在Redis中会涉及很多数据结构,比如SDS,双向链表、字典、压缩列表、整数集合等等。Redis会基于这些数据结构自定义一个对象系统...

ccww_
昨天
7
0
java发送html模板的高逼格邮件

最近做了一个监测k8s服务pod水平伸缩发送邮件的功能(当pod的cpu/内存达到指定阈值后会水平扩展出多个pod、或者指定时间内pod数应扩展到指定数量),一开始写了个格式很low的邮件,像下面这样...

码农实战
昨天
11
0
php-fpm配置文件详解/MariaDB密码重置、慢查询日志

来源:https://blog.csdn.net/Powerful_Fy php-fpm主配置文件路径:/usr/local/php-fpm/etc/php-fpm.conf #位于安装php安装目录下的etc/目录中,该文件中最后一行将配置文件指向:include=/...

asnfuy
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部