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. vue概念

    Vue是单向数据流还是双向数据绑定? Vue是单向数据流不是双向数据绑定 Vue的双向数据绑定不过是语法糖(语法糖本质就是一种新的编码方式,并没有给语言增加新的功能.语法糖目的就是为了让代码更易读,更 ...

  2. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  3. Golang通过反射获取结构体的标签

    Golang通过反射获取结构体的标签 例子: package main import ( "fmt" "reflect" ) type resume struc ...

  4. php登陆ssh执行命令

    <?php $connection=ssh2_connect('172.16.10.3',22);ssh2_auth_password($connection,$user,$pass);$cmd ...

  5. poj1742Coins（多重背包）

    People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar.One day Tony ...

  6. [COCI2017.1]Deda —— 解锁线段树的新玩法

    众所周知,能用线段树做的题一定可以暴力 但考场上也只能想到暴力了,毕竟还是对线段树不熟练. deda 描述 有一辆车上有n个小孩,年龄为1~n,然后q个询问,M X A代表在第X站时年龄为A的小孩会下 ...

  7. 21.线程,全局解释器锁(GIL)

    import time from threading import Thread from multiprocessing import Process #计数的方式消耗系统资源 def two_hu ...

  8. c# Autofac依赖注入

    public class Container { /// <summary> /// IOC容器 /// </summary> public static IContainer ...

  9. LayUI Table复杂表头实现

    LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...

  10. SAP选择屏幕开发（二）(转)

    原文链接:https://blog.csdn.net/wtxhai/article/details/90698683 1.2.SAP屏幕框架的创建        SAP页面设计中的框架不但可以保证SA ...