前提:

下载依赖,配置

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. 利用socket实现聊天-Android端核心代码

    实体类与服务端报错一致,包括包名 package loaderman.im.bean; /** * 一个聊天消息的JavaBean * * */ public class ChatMsgEntity ...

  2. Objective-C中的self与LLVM Clang新引入的instancetype

    我们知道,大部分面向对象语言对于一个类的成员方法都有一个隐含的参数.在C++.Java.C#和JavaScript中是this,而在Objective-C中则是self.当然,由于Objective- ...

  3. Qt编写自定义控件30-颜色多态按钮

    一.前言 这个控件一开始打算用样式表来实现,经过初步的探索,后面发现还是不够智能以及不能完全满足需求,比如要在此控件设置多个角标,这个用QSS就很难实现,后面才慢慢研究用QPainter来绘制,我记得 ...

  4. node.js运行内存堆溢出的解决办法

    我是在将一组80多列13万多行的数据通过node-xlsx的时候出现的内存堆溢出的情况. 解决办法时将: node app.js 改成: node --max_old_space_size=10000 ...

  5. EasyNetQ使用(二)【连接RabbitMQ,SSL连接,Logging】

    如果你连接过关系数据库,例如SQL Server.你会发现EasyNetQ处理connections有点奇怪.和关系数据库通讯一直都是通过client开始的.Client 打开一个连接, 发出一个SQ ...

  6. 神经网络与数字货币量化交易系列(1)——LSTM预测比特币价格

    首发地址:https://www.fmz.com/digest-topic/4035 1.简单介绍 深度神经网络这些年越来越热门,在很多领域解决了过去无法解决的难题,体现了强大的能力.在时间序列的预测 ...

  7. HOG算法总结

    1.HOG特征提取所针对的图像的尺寸是固定的.输入的图像应首先resize到这个尺寸. 2.尺寸的划分3个等级:window,block,cell window即输入的需要提取特征的图片大小.然后将w ...

  8. 【ARM-Linux开发】打包解包命令

    tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...

  9. get_object_var 返回一个数组

    语法:get_object_var($object),返回一个数组.获取$object对象中的属性,组成一个数组 实例: <?php class person{ public $name=&qu ...

  10. eNSP——交换机基础配置

    原理: 交换机之间通过以太网电接口对接时需要协商一-些接口参数, 比如速率.双工模式等.交换机的全双工是指交换机在发送数据的同时也能够接收数据,两者同时进行.就如平时打电话一样,说话的同时也能够听到对 ...