接下来我们就要讲到JSX语法了，在我们讲它之前，我们先引入一个概念叫语法糖。
    听到这个名字首先我们可能会想到一个词叫”糖衣炮弹“，那么什么叫糖衣炮弹呢，就是给你说各种好听的话，来迷惑你，但是稍微一体会对方这句话的意思，才能发现内藏的恶毒含义，其实这个词来源于医学，我们吃的药片可能很酷，很难入口，于是医药公司就在很苦的药外层包了一层糖衣，让我们把药片含在嘴里的时候，发现好甜，但是其里面的真正起药物作用的是里面很苦的心。
    那么到底什么是语法糖呢？其实就是一种比较简单的语法，它对这门语言的功能其实没有影响，但是可以让程序员更方便的去使用它，通畅了来说，语法糖可以增加程序的可读性，从而减少程序代码出错的机会。
    好了，我们接下来再回头来看我们的JSX语法，首先我要告诉大家的是JSX语法就是一种语法糖，它存在的目的就是让我们程序员使用起来更简单，代码可读性更强，实际上没”药用价值“。
const element=<h1>Hello,World!</h1>;
上述代码在我们传统js里面是不可以的，等号后面的内容必须用双引号包起来：
const element="<h1>Hello,World!</h1>”;
注意：有同学不认识const建议先去学习一下es6，不会es6的话，再往后寸步难行，在这里简单介绍一下const，我们可以把它理解成var声明变量，只不过const声明的变量不允许被修改。
    上述不加引号的标签语法就叫JSX（JavaScript XML）。
    JSX语法的原则是遇到尖括号“<”，按照解析HTML的方式解析，遇到花括号“{}”则按照解析JavaScript方式解析，如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello,World</title>
</head>
<body>
    <div id="root"></div>
    <!--注意这里有个div#root-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // 注意这里改成type="text/babel"
        const name='yang';
        const element=<h1>Hello,{name}</h1>;
        //花括号里面当js去解析
        ReactDOM.render(
            //渲染方法，这里暂时不需要看懂，只需要明白这个方法是将element放进了#root中
            element,
            document.getElementById('root')
        )
 
 
    </script>
</body>
</html>
    我们可以认为所谓的JSX语法，其实本质就是XML与JavaScript结合的一种语法而已；
 
 
我们还要了解一下如果不用JSX语法，我们的代码将写成什么样子？
使用JSX：
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
不使用JSX:
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
显而易见，上面使用JSX更简单，所以我们认为JSX语法是语法糖。 

小白学习React官方文档看不懂怎么办？2.JSX语法的更多相关文章

  1. 小白学习React官方文档看不懂怎么办？

    最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发. 我们首先打开React官方网站——https://react.docschina.org/doc ...

  2. 小白学习React官方文档看不懂怎么办？3.元素渲染

    直接上代码 const element = <h1>Hello, world</h1>; ReactDOM.render(     element,      document ...

  3. React官方文档笔记之快速入门

    快速开始 JSFiddle 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack. 要用 webpack 安装 React DOM 和构建你的包: ...

  4. 学习android 官方文档

    9.29 1. 今天,FQ,看到android studio中文网上有一个FQ工具openVPN,我就使用了. 之前用过一个FQ工具开眼,但由于网速慢,我就弃用了. 2. 现在,我就可以FQ去andr ...

  5. requests库的学习——跟随官方文档

    发送GET请求: import requests r=requests.get("http://www.kekenet.com/") 如果需要传递参数可以有以下几种方法: impo ...

  6. 照着官方文档学习react

    笨人学习法 10000个小时策略来学习,因为笨.先照着官方文档敲一遍,写一遍. 准备 先要准备环境.搭建一个基于webpack的react环境:Hello ReactJS. demo: https:/ ...

  7. 看官方文档学习springcloud搭建

    很多java的朋友学习新知识时候去百度,看了之后一知半解,不知道怎么操作,不知道到底什么什么东西,那么作为java码农到底该怎么学习额 一  百度是对还是错呢? 百度是一个万能的工具,当然是对也是错的 ...

  8. 学习h264 的语法规则，如何才能看懂H264 的官方文档

    1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...

  9. webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了

    __dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...

随机推荐

  1. 学习了解Shiro框架

    有关Shiro安全框架 实现权限的几种方式 1)通过表来实现 2)shiro框架 3)Spring Security框架 shiro有哪些主要功能 1.授权 访问控制的过程,即确定谁有权访问 2.身份 ...

  2. 整洁的 Table View 代码

    Table view 是 iOS 应用程序中非常通用的组件.许多代码和 table view 都有直接或间接的关系,随便举几个例子,比如提供数据.更新 table view,控制它的行为以及响应选择事 ...

  3. SpringBoot 开发案例之参数传递的正确姿势

    前言 开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼. 姿势 学习参数传递的正确姿势,先说怎么做,再说为什么,本质上还是复 ...

  4. 百万年薪python之路 -- 函数初始练习

    1.整理函数相关知识点 2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func(lst): lst = lst[1::2] return l ...

  5. 基于Groovy搭建Ngrinder脚本调试环境

    介绍 最近公司搭建了一套压力测试平台,引用的是开源的项目 Ngrinder,做了二次开发,在脚本管理方面,去掉官方的SVN,引用的是Git,其他就是做了熔断处理等. 对技术一向充满热情的我,必须先来拥 ...

  6. （五）Unity插件生成

    1)新建空的AndroidStudio工程,但是新建过程时最小SDK版本要与unity一致,如下图所示,本次操作均为api16 2)创建Library,如下图所示,新建module,然后选择Andro ...

  7. ARToolKit-unity

    ARToolKit为开源的AR库,相对于高通和easyAr有几点特点: 1)开源 2)识别项目可以动态添加(详细在后) 3)识别文件可以本地生成 4)目前只能识别图片(目前为.jpg格式) 下边开始详 ...

  8. gulp源码分析

    一.整体结构分析 整体结构 通过在nodejs环境对源码的打印,我们最终得到的gulp实例行如下图.那么我们gulp实例上的属性和方法是如何生成的呢? Gulp { domain: null, _ev ...

  9. JAVA中的NIO (New IO)

    简介 标准的IO是基于字节流和字符流进行操作的,而JAVA中的NIO是基于Channel和Buffer进行操作的. 传统IO graph TB; 字节流 --> InputStream; 字节流 ...

  10. uWSGI+django+nginx 的工作原理流程与部署历程

    一.前言 献给和我一样懵懂中不断汲取知识,进步的人们. 霓虹闪烁,但人们真正需要的,只是一个可以照亮前路的烛光 二.必要的前提 2.1 准备知识 django 一个基于python的开源web框架,请 ...