JSX：

1.全称：JavaScriptXML，

2.react定义的一种类似于XML的JS扩展语法：XML+JS

3.作用：用来创建react虚拟DOM（元素）对象

　　var ele=<h1>Hello,world!</h1>

　　注意：他不是一个字符串，也不是HTML/XML，它最终产生的就是一个JS对象

4.标签名/属性任意：HTML标签/属性或者其他标签/属性

5.基本语法规则：

　　遇到 < 开头的代码   以标签语法解析

　　遇到 { 开头的代码   以JS语法解析；标签中的JS必须用{}包裹起来

6.babel.js的作用

　　浏览器不能直接解析JSX代码，需要babel转译为JS代码才能运行；

　　在使用JSX代码之前加type=“text/babel”声明

将数据数组转化为标签数组：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>work2</title>

    <script src="../js/react.development.js"></script>

    <script src="../js/react-dom.development.js"></script>

    <script src="../js/babel.min.js"></script>

    <script type="text/babel">

        const names = ['jquery','angular','aepto','react','vue'];

        //将数据数组转换为标签数组，使用map方法

        const ul=(

            <ul>

                {names.map((name,index)=><li key={index}>{name}</li>)}

            </ul>

        );

        reactDom.render(ul,document.getElementById("example1"))

    </script>

</head>

<body>

<h2>这是个例子</h2>

<div id="example1"></div>

</body>

</html>

效果：

react-jsx和数组的更多相关文章

  1. Airbnb React/JSX 编码规范

    Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明 ...

  2. React(JSX语法)-----JSX基本语法

    JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...

  3. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  4. react state为数组时插入值

    react state为数组时,如何插入值.在react里,一切皆是状态state,如果想通过改变state修改渲染效果,只能yongsetState.但是setState又是key:value格式, ...

  5. 在react jsx中，为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  6. 在react jsx中使用if判断

    在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...

  7. react jsx 数组变量的写法

    1.通过 map 方法 var students = ["张三然","李慧思","赵思然","孙力气","王萌 ...

  8. Ch03 React/JSX/Component 簡介

    Facebook 本身有提供 Test Utilities,但由于不够好用,所以目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme,其可以与市面上常见的测试工具(Mocha.Karm ...

  9. react功能实现-数组遍历渲染

    在react中如何将一个数组遍历,并且逐个渲染在页面上? 1.在jsx渲染中,如果这个变量是一个数组,则会展开这个数组的所有成员. var arr = [ <h1>Hello world! ...

  10. React:JSX 深入

    React入门的的时候,我们(我自己啦)喜欢都跟着例子来,用标签的语法写JSX,比如:<Mycomponent  key={this.props.id}  onClick={this.props ...

随机推荐

  1. 学习日记4、datagrid多行删除

    1.前台展现单选框datagrid代码 $('#List').datagrid({ url: '@Url.Action("GetList")', width: $(window). ...

  2. 简易的Web自动化链接测试（Xenu）

    1.理解链接需要测试的测试点: [1] 要测试的链接页面是否存在 [2] 确定存在链接页面,然后就考虑跳转后的页面是不是对应需求的页面[3] 保证Web系统上没有孤立的页面(没有链接指向该页面) 2. ...

  3. django缓存优化（一）

    在配置之前,先介绍一个实用的工具: 当我们进入虚拟环境,在shell中进行操作的时候,往往要导入django的各种配置文件: from django.x import xxxx 这时我们可以借助dja ...

  4. jmeter(二十)：Logic Controller：逻辑控制器（上）

    逻辑控制器用来控制采样器(samplers)的执行顺序,根据实际需要定制执行规则.在控制器层级下面的所有的采样器都会当做一个整体,执行时也会一起被执行. Logic Controller种类: 以上L ...

  5. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  6. 初学Cadence 一

    点击打开 Design Entry CIS 弹出 不要选 OrCAD Capture,这个组件和OrCAD Capture CIS 相比少了很多东西,对元件的管理不方便.选 OrCAD Capture ...

  7. Red Hat Linux下安装JDK

    1. 下载Linux平台的JDK 下载对应操作系统的jdk,操作系统是32位的就下32位的jdk,64位的就下64位的jdk.下错了装不上的. 下载地址:http://www.Oracle.com/t ...

  8. WEB服务端安全---认证会话与访问控制

    一.认证与会话管理 认证:简而言之就是通过一定的凭证认出用户是谁.认证过程中按凭证数量可简单分为 ‘单因素认证’.‘双因素认证’或多因素认证.一般来说,多因素认证强度更高,但是用户体验上会比单因素认证 ...

  9. (appium+python)UI自动化_09_unittest批量运行测试用例&生成测试报告

    前言 上篇文章[(appium+python)UI自动化_08_unittest编写测试用例]讲到如何使用unittets编写测试用例,并执行测试文件.接下来讲解下unittest如何批量执行测试文件 ...

  10. 【Unity知识点】安卓游戏如何在切后台后继续运行

    解决方法很简单,在android项目AndroidManifest.xml文件中的activity中添加如下内容: android:configChanges="fontScale|keyb ...