为何jsx文件必须引入react

为何jsx文件必须引入react

本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

所以我们如果使用了JSX,我们其实就是在使用React,所以我们就需要引入React。

JSX语法的转换

const title = <h1 className="title">Hello, world!</h1>;

这段代码并不是合法的js代码,它是一种被称为jsx的语法扩展,通过它我们就可以很方便的在js代码中书写html片段。

本质上,jsx是语法糖,上面这段代码会被babel转换成如下代码:

const title = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, world!'
);
Image placeholder
前端答疑
未设置
  28人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

React 基础_JSX

JSX简介 JSX是一种用于描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI。 JSX语法 基本语法 JSX的基本语法和XML语法相同,都是使用成对的标签构成一个树状结构的

react jsx是什么?

什么是JSX?JSX即JavaScriptXML,是一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的

xlsxwriter 操作 Excel

xlsxwriter简介 用于以Excel2007+XLSX文件格式编写文件 优点 文本,数字和公式写入,速度很快,占用内存小 支持诸如格式设置,图像,图表,页面设置,自动过滤器,条件格式设置等功能

xlsxwriter 操作 Excel

xlsxwriter简介用于以Excel2007+XLSX文件格式编写文件,相较之下PhpSpreadsheet支持更多的格式读写。优点文本,数字和公式写入,速度很快,占用内存小 支持诸如格式设置,图

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

引入css文件不起作用?

引入css文件不起作用?按F12查看开发者工具中显示,有common.css,但是页面上的样式却没有改变,代码如下: Vue介绍 ... 解决方法:加了rel属性后就好了,rel是关联的意

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

2019全球PostgreSQL生态报告出炉,PG为何从RDBMS中脱颖而出?

墨墨导读:本文是近期ScaleGrid发布的2019PG趋势报告,从不同的角度解读了PostgreSQL如何在众多优秀的RDBMS中脱颖而出,原文:https://scalegrid.io/blog/

15 个 Docker 初学者必须掌握的命令

这篇文章我基本上不会做put操作。如果你认为这些命令缺少了什么其他方面重要的东西,那么你需要自行检查Docker文档(https://docs.docker.com/) pull pull命令和gi

看完秒变5G专家!关于5G,你必须知道的事儿……

本文转自|鲜枣课堂   什么是5G    5G,就是5thGenerationMobileNetworks(第五代移动通信网络),也可以称为5thGenerationWirelessSystems(第

2020年前必须掌握的数据库面试问题~

一、为什么用自增列作为主键1、如果我们定义了主键(PRIMARYKEY),那么InnoDB会选择主键作为聚集索引。如果没有显式定义主键,则InnoDB会选择第一个不包含有NULL值的唯一索引作为主键索

vue项目开发必须要搭脚手架么?

vue是一个渐进式的前端框架,渐进式也就意味着你可以在使用过程中,引入自己需要的一系列外部资源。这也就意味着,你可以自己搭建自己的框架,如果不用vue-cli,你可以自己搭建开发框架,需要vuex、需

会唱歌的程序员为何如此受欢迎?

 作者 朱小五爱奇艺的独家综艺《乐队的夏天》总决赛终于落下了帷幕,虽然决赛过程有些“曲折”,但是我最喜欢的刺猬乐队,仍然凭借自己的硬实力,最终排在第二名!值得一提的是,这只乐队的吉他手兼主唱也是一位程

字节跳动(今日头条),为何战斗力如此凶猛?

有没有研究过今日头条?还有没有上升空间?早些时候,「今日头条」还是这间公司最重要的产品,自从「抖音」日活跃用户量(DAU)接近「今日头条」后,这间公司对外的名称由今日头条 改为 字节跳动。字节跳动是母

SAP CEO孟鼎铭为何在任职十年之际选择退出?

2019年10月11日,SAP宣布执掌时间长达9年多的孟鼎铭(BillMcDermott),将辞去首席执行官职位。公司启动了长期继任者计划,SAP执行董事会成员JenniferMorgan和柯睿安(C

数据库,主键为何不宜太长长长长长长长长?

回答星球水友提问:沈老师,我听网上说,MySQL数据表,在数据量比较大的情况下,主键不宜过长,是不是这样呢?这又是为什么呢? 这个问题嘛,不能一概而论:(1)如果是InnoDB存储引擎,主键不宜过长;

原生线程池这么强大,Tomcat 为何还需扩展线程池?

前言Tomcat/Jetty是目前比较流行的Web容器,两者接受请求之后都会转交给线程池处理,这样可以有效提高处理的能力与并发度。JDK提高完整线程池实现,但是Tomcat/Jetty都没有直接使用。

2019年度总结:支付宝为何多次亮相各大国际顶会

2019年,是人工智能与机器学习技术快速发展的一年。对于蚂蚁金服而言,过去一年的人工智能技术、产品、解决方案及研究成果已经在NeurIPS、KDD、ICML、SIGMOD、SIGIR等各大国际顶会上陆

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我