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设备驱动第四篇：从如何定位oops的代码行谈驱动调试方法

    上一篇我们大概聊了如何写一个简单的字符设备驱动,我们不是神,写代码肯定会出现问题,我们需要在编写代码的过程中不断调试.在普通的c应用程序中,我们经常使用printf来输出信息,或者使用gdb来调试程序 ...

  2. HTML5 新属性的讲解

    1.选择器: 标签选择器: class选择器: id选择器: 后代选择器:div li div下所有li 子代选择器:div>li div的所有子一代 li 元素 交集选择器:div.class ...

  3. gitlab+jenkins自动化打包APK

    前置条件: 环境搭建,jenkins需要的插件看这里: gitlab+jenkins自动化打包IOS 配置思路: step1: 搭建sdk,gradle运行环境,参照: CentOS7下安装安装and ...

  4. mysql 开放远程连接权限连不上

    1.my.cof配置了:bind-address=addr  或   skip-networking,需要注释 2.防火墙限制3306端口: iptables -L -n --line-numbers ...

  5. 同余dp

    先验知识: 余数的计算公式:c = a -⌊ a/b⌋ * b 其中,⌊ ⌋为向下取整运算符,向下取整运算称为Floor,用数学符号⌊ ⌋表示 题目: Consider an arbitrary se ...

  6. Unity3D利用Logcat调试安卓

    发布安卓包之后再次测试发生什么问题很难知道怎么了,比如说出现闪退等情况,可以用Logcat检测到,logcat是Android中一个命令行工具,可以用于得到程序的log信息,可以用 logcat 命令 ...

  7. python的包

    1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警觉:这是关于包才有的导入语法 2. 包是目录级的(文件夹级),文件夹是用 ...

  8. sql注入判断流程（结合sqli-labs学习）

    sql注入判断流程(结合sqli-labs学习) 类型一 类型判断 ?id=1 and 1=2 --+ 如果返回结果正常,说明不是数字类型 and 为两方都为真才算争取 ?id=1' --+ 显示不正 ...

  9. SpringMvc和Mybatis整合需要配置的xml

    applicationContext-dao.xml <?xml version="1.0" encoding="UTF-8"?> <bean ...

  10. 线程休眠只会用 Thread.sleep？来，教你新姿势！

    线程休眠是 Java 开发经常会用到的一个手段,就是让当前线程睡一会儿,睡醒之后再继续运行. 咱大多数程序员,多线程虽然学得不好,但线程休眠,无人不知,无人不晓,也都会用,不就是用 Thread.sl ...