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. H700关闭Direct PD Mapping

    Attached Enclosure doesn't support in controller's Direct mapping modePlease contact your system sup ...

  2. Trailing Zeroes (III) -；lightoj 1138

    Trailing Zeroes (III)   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Y ...

  3. s6tu

    # -*- coding: utf-8 -*- # @Time : 2018/03/30 15:20 # @Author : cxa # @File : liuuchnagtu.py # @Softw ...

  4. 虚拟机中安装Linux_Centos7操作系统（最小化安装）

    我们打开之前安装的VM, 点击 “创建新的虚拟机”: 我们选 典型 安装  简单点 然后下一步: 我们稍后安装操作系统 ,点下一步: 这里选 Linux 然后下拉 选CentOS 64位,然后下一步: ...

  5. P1982小朋友的数字

    传送 手疼qwq 翻译一下题面.就是说,给n个数,第i个数(包括第i个)以及之前的数构成的最大子段和是i的特征值,i以前(不包括i)的数中最大的分数j+特征值j是i的分数,求所有人中的最大分数. (好 ...

  6. redhat 修改yum源

    问题现象: 现有的yum安装git失败,提示yum源连接失败 Error Downloading Packages: git--.el6_4..x86_64: failure: Packages/gi ...

  7. C++ 编写的DLL导出的函数名乱码含义解析

    C++编译时函数名修饰约定规则: __stdcall调用约定:   1.以"?"标识函数名的开始,后跟函数名:     2.函数名后面以"@@YG"标识参数表的 ...

  8. Python程序打包为可执行文件exe

    Python程序打包为可执行文件exe,pyinstaller应用 山重水复疑无路,柳暗花明又一村. 本来是向老师提交一个python程序,因为第一次所以就很尴尬只把源码给老师了,应该是打包成一个可执 ...

  9. poj3614Sunscreen

    Description To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her ...

  10. [7期]美少妇(msf)和独角兽(unicorn)

    MSF 全称:metasploit-framework    渗透大杀器,黑客工具排名第一(靠前),尤其在内网中.在校期间大学生先跟本校安全部沟通好,一起实验. 得不到校方理解与认可的上SRC或者自己 ...