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. Linux下安装Tomcat(2)

    Tomcat是一个免费的开源的Serlvet容器,它是Apache基金会的Jakarta项目中的一个核心项目,由Apache,Sun和 其它一些公司及个人共同开发而成.由于有了Sun的参与和支持,最新 ...

  2. 谈谈vue双向数据绑定问题

    vue是MVVM模型,vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.define ...

  3. 13 October

    树链剖分 http://www.lydsy.com/JudgeOnline/problem.php?id=1036 https://oi.men.ci/tree-chain-split-notes/. ...

  4. 4.HTML 常用标签及属性

    1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. ...

  5. How to: Create a Windows Communication Foundation Client

    How to: Create a Windows Communication Foundation Client To create a Windows Communication Foundatio ...

  6. centos R包 tidyverse安装

    tidyverse安装失败,install.packages('tidyverse') 错误原因大概是其中有个依赖包xml2安装不上,解决办法是yum install libxml2-devel,这样 ...

  7. webService接口的py文件打包成exe

    (一)webService接口的py文件打包成exe,在python3.5版本.pyInstaller3.2版本.pywin32-219.win-amd64-py3.5版本打包时报错,原因可能是pyi ...

  8. cron 定时任两种配置方式

    第一种:xml文件方式 <bean id="commonTimer" class="com.course.wx.timer.CommonTimer"> ...

  9. CentOS 7.0 开端口

    >>>  CentOS 7.0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下1.直接关闭防火墙systemctl stop firewalld.serv ...

  10. Leapin' Lizards [HDU - 2732]【网络流最大流】

    题目链接 网络流直接最大流就是了,只是要拆点小心一个点的流超出了原本的正常范围才是. #include <iostream> #include <cstdio> #includ ...