前提:

下载依赖,配置

  1. 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. Linux nginx 会话保持(session)

    nginx 会话保持(session)有2种算法,一种是自带IP HASH 算法,一种是基于第三方模块sticky模块来实现会话保持 1)ip_hash 简单易用,但是有如下缺点 后端服务器宕机后,s ...

  2. 【ABAP系列】SAP ABAP 字符编码与解码、Unicode

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 字符编码与解码 ...

  3. AssassinGo: 基于Go的高并发可拓展式Web渗透框架

    转载自FreeBuf.COM AssassinGo是一款使用Golang开发,集成了信息收集.基础攻击探测.Google-Hacking域名搜索和PoC批量检测等功能的Web渗透框架,并且有着基于Vu ...

  4. 【AMAD】django-compressor -- 将JS和CSS文件压缩为一个缓存文件

    简介 个人评分 简介 django-compressor1的example: {% load compress %} {% compress css %} <link rel="sty ...

  5. shell脚本中set -e作用

    最近学习shell脚本想到一个问题,如果脚本中出现了一条异常语句,甚至可以影响整个脚本的使用,那么是否有一旦出现问题就可以及时停止的方法呢?在shell脚本中set命令就可以轻松实现.set命令的-e ...

  6. 【计算机视觉】特征脸EigenFace与PCA

    [计算机视觉]特征脸EigenFace与PCA 标签(空格分隔): [图像处理] 版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/lg1259156776/. 说 ...

  7. 43.QQ聊天软件GUI窗口编写

    QQ聊天软件代码功能编写 一,Tkinter聊天界面编写 1,聊天软件客户端界面开发-1 Tkinter的模块(“TK接口”)是标准的Python接口从Tk的GUI工具包 https://i.cnbl ...

  8. 洛谷 题解 P4158 【[SCOI2009]粉刷匠】

    状态: dp[i][j][k][0/1]: 到达第i行时, 到达第j列时, 刷到第k次时, 这一格有没有刷对 转移 换一块木板时肯定要多刷一次 dp[i][j][k][0]=max(dp[i-1][m ...

  9. 【gcd】辗转相除法

    #include<stdio.h> int gcd(int a, int b) { int c; while(b) { c = a % b; a = b; b = c; } return ...

  10. TensorFlow 官方文档 Programmer's Guide 中文翻译 —— 引言

    TensorFlow Programmer's Guide (Introduction) TensorFlow 编程手册 (引言) #(本项目对tensorflow官网上给出的指导手册(TF1.3版本 ...