React jsx文件介绍与使用方式
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
显而易见的，使用jsx的前提是对于js的语法和使用有一定的了解。
1. 相通点
1）import引入方式
import React, { useState, useEffect, useRef } from 'react';2）语法
声明、赋值、函数及ES6语法通用。
2. 不同处：（先jsx后js）
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);直白点，我们可以在jsx里面直接编辑html的结构，并且不必加入繁琐的啰嗦的多重引号，只需一对（）即可。
上述代码如果看着陌生，那么你可以参照下面的js写法进行对照学习：
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);基于其书写方式，我们自然可以想象的到在html结构内使用变量赋值，此时你需要根据react的要求书写变量（是Class类实现或hook实现的数据绑定；前者需要带着this，后者可以直接书写变量名）。
【露一手】
实际上，jsx帮助我们在代码结构上更易读，组件化的结果是jsx的贡献之一，在拿到react项目中的代码后，不必费力地阅读，打开jsx，找到render（class方式）或者function中的return（hook式），其中的DOM和绑定的数据方法一目了然，也就有了如下的组件写法：
{isDisplayDetail && <Enter options={options} goBack={handleBack} />}（新的内容）
本人是从Vue岗位后转到React岗位上，所以在实际工作环境中遇到的问题，常常先思考Vue下的实现，然后通过阅读React的文档进行”转译“，实际上，这个方式并不会导致更多的错误，而是更快地学习到React下的解决办法；
承上，举例说明：
v-for是我们在vue当中最常用的指令之一了，在react中如何实现呢？
{
BoxList.map(item => (
<div key={item.id} onClick={handleCheck} className={style.item} data-id={item.id}>
<img src={item.isActive ? selectImg : unSelectImg} />
<p>{item.name}</p>
</div>
))
}BoxList是一个 [ ] 数组对象，通过Array变量的map操作，ES6的箭头函数
我们可以充分地相信，jsx是一项改变前端书写模式的”技术“。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
这篇文章主要为大家详细介绍了React如何实现移动端锚点跳转组件附带吸顶效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-01-01
这篇文章主要介绍了react项目优化配置,主要包括优化配置CDN，优化路由懒加载，结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了react跳转后路由变了页面没刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了从零开始最小实现react服务器渲染详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了列表页常见的hook封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了React通过classnames库添加类,在vue中添加class是一件非常简单的事情，你可以通过传入一个对象, 通过布尔值决定是否添加类，本文给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
React中使用react-player 播放视频或直播的方法
这篇文章主要介绍了React中使用react-player 播放视频或直播，本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细，需要的朋友可以参考下2022-01-01
jsoneditor二次封装实时预览json编辑器组件react版
这篇文章主要为大家介绍了jsoneditor二次封装实时预览json编辑器组件react版示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React冒泡和阻止冒泡的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
React styled components样式组件化使用流程
styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化2023-02-02
最新评论