reactjs基础：jsx小练习

一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

reactjs基础：jsx小练习相关推荐

阿里深资架构师整理的Java 基础知识小抄赶紧收藏
本篇算是 Java 的基础知识小抄吧,之所以说小抄是因为觉得涵盖不是很细很全,但是基本的内容都有,当然后头还会继续完善,只是不会再用笔记录了!按照现在的习惯,先附上一张思维导图: 1. 安装与环境配置 ...
局部配置和全局配置_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...
【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
系列文章目录 [零基础微信小程序入门开发]小程序介绍及环境搭建 [零基础微信小程序入门开发]配置小程序 [零基础微信小程序入门开发]小程序框架一 [零基础微信小程序入门开发]小程序框架二 [零基础微信 ...
视频教程-5小时零基础入门小程序云开发-微信开发
5小时零基础入门小程序云开发码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥29.0 ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
掉进悬崖的小白，捡到python基础秘籍，学习第一周——语法基础，小游戏，无脑循环
掉进悬崖的小白,捡到python基础秘籍,学习第一周--语法基础,小游戏,无脑循环人生苦短,我用python 语言的种类: 语言的发展: 什么是python 搭建 Python开发环境: 集成开发环 ...
如何绘画素描？零基础素描小教程
如何绘画素描?零基础素描小教程!如果说画风是"画力"的话,素描基础是"画力"的必要条件.板绘只是绘画的工具,基础好才能在一些工具上提高画力.为了帮助有兴趣的朋友 ...
Java基础知识小练习合集
基础知识小练习合集: 1.说明基本数据类型变量之间强制类型转换的使用规则和强转可能出现的问题. (1)使用强制转换符: (2)强制类型转换,可能会导致精度损失(降低或溢出) 容量小的数据类型变量→容量 ...
零基础学小程序 —— 模板样式（三）
目录前言 1.什么是 WXSS 2.WXSS 和 CSS 的关系 3. rpx 3-1 什么是 rpx 尺寸单位 3-2 rpx 的实现原理 3-3 rpx 与 px 之间的单位换算 4. 样式导入 ...

reactjs基础：jsx小练习

reactjs基础：jsx小练习相关推荐

最新文章

热门文章