前提:

下载依赖,配置

cnpm i babel-preset-react -D

JSX语法的本质:

还是以 React.createElement 的形式来实现的,并没有直接把 用户写的 HTML代码,渲染到页面上;

语法:

1.如果要在 JSX 语法内部,书写 JS 代码了,那么,所有的JS代码,必须写到 {} 内部。

2.当 编译引擎,在编译JSX代码的时候,如果遇到了`<`那么就把它当作 HTML代码去编译,如果遇到了 `{}` 就把 花括号内部的代码当作 普通JS代码去编译。

3.在{}内部,可以写任何符合JS规范的代码。

4. 在JSX中,有关键字限制,如果要为元素添加`class`属性了,那么,必须写成`className`,因为 `class`在ES6中是一个关键字;和`class`类似,label标签的 `for` 属性需要替换为 `htmlFor`。
5. 在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹,和vue一样。
6. 如果要写注释了,注释必须放到 {} 内部。

react快速上手二(使用JSX语法)的更多相关文章

  1. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  2. 官方 React 快速上手脚手架 create-react-app

    此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...

  3. React:快速上手(7)——使用中间件实现异步操作

    React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...

  4. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  5. React:快速上手(5)——掌握Redux(2)

    React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...

  6. React:快速上手(4)——掌握Redux(1)

    React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...

  7. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  8. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  9. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

随机推荐

  1. SQL-W3School-高级:SQL SELECT INTO 语句

    ylbtech-SQL-W3School-高级:SQL SELECT INTO 语句 1.返回顶部 1. SQL SELECT INTO 语句可用于创建表的备份复件. SELECT INTO 语句 S ...

  2. 关于Java 8新引入语法特性的简要说明

    Java 8在语法上的主要改进就是新增了Lambda Expression以及Method Reference.由于官方网站的介绍稍显罗嗦,而且例子也有些复杂.我这里将提供一些更为浅显.直观的例子来帮 ...

  3. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_10-freemarker静态化测试-基于模板文件静态化

    把resource拷贝到test目录下 只保留文件夹结构和test1.ftl这个模板文件就可以了. 新建一个包 编写测试类 使用freemaker提供的方法生成静态文件 Configuration是i ...

  4. Qt编写安防视频监控系统5-视频回放

    一.前言 一般视频回放都会采用GB28181国标来处理,这样可以保证兼容国内各大厂家的NVR,毕竟在同一的国家标准下,大家都会统一支持国标的,就不需要根据各个厂家的SDK来做兼容处理,烦得很,厂家越来 ...

  5. 图解 HTTP 笔记(七)——HTTPS

    本章主要讲解 HTTPS 的基本原理,以及如何利用 HTTPS 防范 HTTP 通信过程中存在的伪装.窃听.篡改等问题 一.HTTP 的缺点 HTTP 在通信过程中会面临以下三种安全问题: 通信使用明 ...

  6. Python排序算法之选择排序定义与用法示例

    Python排序算法之选择排序定义与用法示例 这篇文章主要介绍了Python排序算法之选择排序定义与用法,简单描述了选择排序的功能.原理,并结合实例形式分析了Python定义与使用选择排序的相关操作技 ...

  7. zookeeper的shell下操作

    zookeeper的shell下操作 进入%ZK_HOME%/bin 执行zkCli.sh [-server ip:port] #如不指定,则连接本机   创建: create [-s] [-e] p ...

  8. grafana的metric的计算语句

    1.磁盘使用率 .other:((node_filesystem_size_bytes{fstype=~ .my: ((node_filesystem_size_bytes{fstype=~ 2.se ...

  9. js模板(template.js)实现页面动态渲染

    template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...

  10. lua数据类型的的操作(三)

    上一章我们学习了lua的数据类型,以及语法的定义,今天我们学习lua的数据类型操作,其实就是lua库一些api的操作,遇到对数据类型处理时,可以根据lua库提供的操作来实现. 一.字符串操作 1.字符 ...