React18 基础入门API、JSX语法糖_react18 入门学习-CSDN博客

本站和网页 https://blog.csdn.net/qq_43472877/article/details/128114335 的作者无关，不对其内容负责。快照谨为网络故障时之索引，不代表被搜索网站的即时页面。

React18 基础入门API、JSX语法糖_react18 入门学习-CSDN博客
React18 基础入门API、JSX语法糖
最新推荐文章于 2023-01-20 18:18:16 发布
_七七
最新推荐文章于 2023-01-20 18:18:16 发布
阅读量599
收藏
点赞数
分类专栏：
React
文章标签：
javascript
react.js
前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/128114335
版权
React
专栏收录该内容
27 篇文章
0 订阅
订阅专栏
文章目录
一、react的一次使用react.development.jsreact-dom.development.jsReact.createElement()
二、三个APIReact.createElement()ReactDOM.createRoot()root.render() 渲染页面
三、JSX（JavaScript Syntax Extension）、babelbabelJSX使用注意事项
一、react的一次使用
react.development.js
react 是react核心库，只要使用react就必须要引入 下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js
react-dom.development.js
react-dom 是react的dom包，使用react开发web应用时必须引入 下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js
注意引用先后顺序 先引用react核心库，再引用react-dom
React.createElement()
用来创建一个react元素
参数1：元素名（组件名） 参数2：元素中的属性 设置事件的时候 需要使用驼峰和箭头函数 {onClick:()=>{alert('123')}} class属性设置 需要使用className 参数3：元素的子元素
// 创建一个React元素
const button = React.createElement('button', {
type: 'button',
className: 'hello',
onClick: () => {
alert('你点我干嘛')
}, '点我一下');
二、三个API
React.createElement()
React.createElement(type, [props], […children])
用来创建React元素React元素无法修改
ReactDOM.createRoot()
createRoot(container[, options])
用来创建React的根容器，容器用来放置React元素
root.render() 渲染页面
root.render(element)
当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM 节点中。
// 创建第一个div
const div = React.createElement('div', {}, '我是一个div', button);
// 获取根元素
const root = ReactDOM.createRoot(document.getElementById('root'));
// 将元素在根元素中显示
root.render(div);
// 老版本的React中使用方法
// ReactDOM.render(div, document.getElementById('root'));
三、JSX（JavaScript Syntax Extension）、babel
React.createElement()语法糖
JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为以调用React.createElement()创建元素的代码。
需要配合babel使用，babel转换jsx为react元素
babel
babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js
<head>
<meta charset="UTF-8">
<title>JSX</title>
<script src="script/react.development.js"></script>
<script src="script/react-dom.development.js"></script>
<!-- 引入babel -->
<script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!--设置js代码被babel处理-->
<script type="text/babel">
// 创建一个React元素 <button>我是按钮</button>
// 命令式编程
// const button = React.createElement('button', {}, '我是按钮');
// 声明式编程，结果导向的编程
// 在React中可以通过JSX（JS扩展）来创建React元素，JSX需要被翻译为JS代码，才能被React执行
// 要在React中使用JSX，必须引入babel来完成“翻译”工作
// const button = <button>我是按钮</button>;
// React.createElement('button', {}, '我是按钮');
/*
* JSX就是React.createElement()的语法糖
* JSX在执行之前都会被babel转换为js代码
* */
const div = <div>
我是一个div
<button>我是按钮</button>
</div>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(div);
</script>
</body>
JSX使用注意事项
JSX不是字符串，不要加引号JSX中html标签应该小写，React组件应该大写开头JSX中最外层有且只有一个根标签JSX的标签必须正确结束（自结束标签必须写/）在JSX中可以使用{}嵌入表达式
有值的语句的就是表达式
const name = '孙悟空';
const ele = <h1>Hello {name}</h1>;
const ele2 = <h1>Hello {孙悟空}</h1>;
const ele3 = <h1>1 + 1 = {1 + 1}</h1>;
{} 中也可以调用函数
function fn(){
return '哈哈';
const ele = <h1>{fn()}</h1>
没有返回值的语句，像if、for等语句是不能出现在JSX中的！但是在if、for等里边写JSX是可以的：
let ele;
let isLogin = true;
if(isLogin){
ele = <h1>欢迎光临！</h1>;
}else{
ele = <h1>请登录！</h1>
let eles = [];
for(let i=0; i<5; i++){
eles.push(<h2>我是第{i}个h2</h2>);
如果表达式是空值、布尔值、undefined，将不会显示在JSX中，属性可以直接在标签中设置
注意：class需要使用className代替style中必须使用对象设置style={{background:‘red’}}
<head>
<meta charset="UTF-8">
<title>JSX的注意</title>
<script src="script/react.development.js"></script>
<script src="script/react-dom.development.js"></script>
<!-- 引入babel -->
<script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
* JSX的注意事项
* 1. JSX不是字符串，不要加引号
* 2. JSX中html标签应该小写，React组件应该大写开头
* 3. JSX中最外层有且只有一个根标签
* 4. JSX的标签必须正确结束（自结束标签必须写/）
* 5. 在JSX中可以使用{}嵌入表达式
* - 有值的语句的就是表达式
*/
const name = '孙悟空';
function fn() {
return 'hello';
const div1 = <div>
{name} <br />
{1 + 1} <br />
{fn()} <br />
{NaN} <br />
</div>
/* 6. 如果表达式是空值、布尔值、undefined，将不会显示
* 7. 在JSX中，属性可以直接在标签中设置
* 注意：
* class需要使用className代替
* style中必须使用对象设置
* style={{background:'red'}}
*/
const div2 = <div
id="box"
onClick={() => {
alert('哈哈')
}} className="box1"
style={{ backgroundColor: "yellowgreen", border: '10px red solid' }}
我是一个div
</div>;
优惠劵
_七七
关注
关注
点赞
收藏
觉得还不错?
一键收藏
打赏
知道了
评论
React18 基础入门API、JSX语法糖
下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js。下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js。babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js。// 在React中可以通过JSX（JS扩展）来创建React元素，JSX需要被翻译为JS代码，才能被React执行。
复制链接
扫一扫
专栏目录
React JSX语法使用案例
04-21
React JSX语法使用案例，使用前需要 cnpm install 安装组件
React 18 新特性-入门教程
小司机的奥拓
06-09
2464
现在终于等到了 ，所以我打算好好看看新版本的这些特性，到底香不香😋！新版本新项目当然是要创建一个新的 的 应用咯，这里为了方便直接使用官方脚手架了😊：
一切准备就绪，开卷(bushi)！想必大家对 API 都不会陌生吧，先上一段怀旧代码：
咦！？居然，可以正常执行，不是说废弃了吗，难道是我版本没整对？不要慌！ 官方为了能让大家平稳的过渡并切换到 可以说也是用心良苦，当我执行上面这段代码就会悄悄地在控制台给我报个错，就像这样：什么意思呢？我给大家翻译一下：还想用是吧，滚去用 吧🤡。 它不香吗！下...
参与评论
您还未登录，请先
登录
后发表或查看评论
react-ReactcreateElement和JSX替代语法糖
08-15
React.createElement和JSX替代语法糖
React18有哪些新特性——XDM、开卷
李俊标的博客
03-30
1252
昨天，3月29日，React团队发布文章， React 18现在可以在npm上使用！
一起来看看React 18有哪些新特性。
并发渲染
如果要用一个词来概括整个React 18 版本，那就是concurrency（并发）。并发是一种底层功能，在这次更新中提供了许多功能。例如Suspense以及新功能startTransition()和useDeferredValue()ApI。
并发意味着任务可以重叠，在系统进入下一个状态之前，不必完全完成一个状态更新，并发允许我们在多个状态之间来回切换。但是
linjunc#react-study#React 入门学习（一）-- 基础知识以及 jsx语法1
07-25
声明式编码，组件化编码React 的一些主要优点？它提高了应用的性能可以方便在客户端和服务器端使用由于使用 JSX，代码的可读性更好使用React，编写 UI
React18学习
a9874561328的博客
01-20
320
react学习笔记，主要记述本人认为常用的知识点，可能会有纰漏和问题欢迎讨论
JavaScript的React框架中的JSX语法学习入门教程
11-25
在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript...
react 转换JSX语法的插件brower.js
09-04
如果是要直接在HTML上编辑，需要下载react.js与react-dom.js。如果要使用JSX语法，则需要使用转换JSX语法的插件。这里使用brower.js brower,js：将使用的JSX语法转换成JavaScript语法
React 基础一：JSX、Babel、单项数据流和脚手架
JimmyLuo17的博客
01-18
735
JSX
react是用一种假冒的DOM（它表示用来组成网页页面的HTML树）结构来创立app的，react称之为虚拟DOM。
JSX语法让我们在使用JavaScript来描述HTML的时候，让代码看起来更加的像原生HTML。但请记住JSX事实上会被编译成JavaScript。
在JSX中，我们不能使用class关键字来为一个元素申明样式类，但react允许我们用className这个关键字来为一个元
React框架相关知识点
weixin_30252155的博客
01-28
637
React的起源和发展
起初facebook在建设instagram（图片分享）的时候嘞，因为牵扯到一个东东叫数据流，那为了处理数据流并且还要考虑好性能方面的问题嘞，Facebook开始对市场上的各种前端MVC框架去进行一个研究，然而并没有看上眼的，于是Facebook觉得，还是自己开发一个才是最棒的，那么他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，他们就自己开发了一套，果然...
一文吃透React v18 全部 Api
油墨香^-^的博客
08-10
414
在之前的几篇文章中，有自定义hooks、HOC、虚拟DOM和diff算法，多多少少都有React官方Api做为基础条件，我的这个专栏的目的就是对React的深入，就是希望对React有一个全面的提升写这篇文章的主要目的有：提升知识广度，要想深入React就必须全面了解React，首先要学会用，要知道，如果连知道都不知道，谈何深入？React v18对react-dom的改动还是比较大的，并且新增了五个hooks,逐一盘点一下，看看做了那些改动。............
【黑马教程】React中启用JSX语法
03-27
本代码为 黑马教程 P15，15： https://www.bilibili.com/video/av37668737/?p=15 的实现代码， 配置过程请详看 ：https://blog.csdn.net/wgf5845201314/column/info/35882
react系列（13）ES6语法糖
@黄小泽的个人博客
11-07
1262
语法糖（Syntactic sugar），是指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会，本篇将介绍几个react常用的几个ES6语法糖。
箭头函数
箭头函数是指使用 '=>' 来定义函数。
正常的Function函数定义如下：
var myFun = function(...
Vue 3.0中jsx语法的使用
01-21
尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 项目创建 npm init vite-app vite-vue cd vite-vue npm install npm run dev 我们发现创建...
浅谈JSX语法糖
wgh2820777641的博客
04-18
624
浅谈JSX语法糖
jsx简单觉得来说就是在javascript里面使用html文档。
JSX是一种语法糖，全称：javascript xml。
JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。
看下面的DOM结构：
<div class='app' id='appRoot'>
<h1 class='title'>...
深度解锁React Hook 常用Api
qq_38629292的博客
07-15
315
前言HOOK作为React16.8的新增特性，相信绝大多数react开发者都已经了解或者上手过。本文希望通过对这些常用API的使用案例说明，和大家一起去深度解锁HOOK。
关于React18 RC你需要知道的
shadowfall的博客
03-16
707
关于React18 RC你需要知道的
React是一个用于构建用户界面的 JavaScript 库,为什么再次强调呢?因为react18依然践行着他所坚持的理念,如何更好更快更优雅的进行用户界面的构建!
并发Rendering
如果要用一个词来总结整个React 18的发布，那一定是并发性。 并发性是一种幕后功能，它为这次更新中的许多特性提供了强大的支持，比如Suspense 和新的startTransition()和useDeferredValue()等api。
并发基本上意味着任务可以重叠。 与必须完全
react
qq_43887817的博客
09-28
293
react
什么是JSX语法？什么是React组件
最新发布
08-24
JSX是JavaScript语法扩展，用于在React中编写UI组件。它允许我们在 JavaScript 代码中编写类似HTML的结构，将组件的结构和逻辑紧密地组合在一起。
React组件是构建用户界面的独立、可重用的代码片段。它们将界面分解为更小的部分，每个部分都有自己的状态和行为。组件可以接收属性（props）作为输入，并根据这些属性渲染出相应的 UI。组件还可以包含其他组件作为其子组件，从而构建更复杂的界面。React组件是React应用的核心构建块。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
_七七
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
722
原创
1万+
周排名
1941
总排名
115万+
访问
等级
1万+
积分
161
粉丝
598
获赞
197
评论
2227
收藏
私信
关注
热门文章
新视野大学英语(第三版) 读写教程4 课后答案
247753
selenium 报错 DeprecationWarning: executable_path has been deprecated, please pass in a Service object
72530
ZooKeeper启动错误：ZooKeeper audit is disabled
36279
Java BigDecimal类的一般使用、BigDecimal转double
28797
JAVA Stream流的forEach遍历
28715
分类专栏
JavaScript
38篇
webpack
小程序
React
27篇
Node.js
4篇
TypeScript
6篇
HTML5+CSS
35篇
Vue
21篇
AJAX
2篇
JQuery
23篇
uni-app
1篇
大数据数仓
12篇
Python
4篇
Spring
12篇
软件测试
11篇
SpringSecurity
1篇
SpringBoot
15篇
HTTP&Request&Response&Servlet
22篇
Tomcat
4篇
JSON
5篇
SpringMVC
5篇
Redis&Jedis
17篇
Java
227篇
Docker
1篇
ZooKeeper
2篇
MongoDB
9篇
Git
5篇
JSP
8篇
Nginx
7篇
cookie&session会话技术
3篇
Maven
12篇
JVM
1篇
filter&listener
9篇
synchronized
3篇
XML
6篇
Bootstrap
5篇
SPSS
2篇
JDBC
18篇
MyBatis
14篇
MySQL/HIVE
64篇
MATLAB
4篇
Linux
11篇
最新评论
Springboot使用Pagehelper时thymeleaf遍历each时的问题、视图model无法正常遍历问题、thymeleaf Pagehelper 分页遍历出错
m0_64516425:
guys.list得list点不出来
Git 常用命令总结
CSDN-Ada助手:
哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)提升标题与正文的相关性。
MySQL 排序查询ORDER BY、ASC、DESC
JDG.Knight:
总结的很好
Java 字节流写数据、字节流换行与追加写入、字节流写数据加异常处理
一支小菜鸟:
我想问一下这个finally只有在字节流这里能用，还是说他是异常处理的一个通用功能
MATLAB 三次埃尔米特插值、三次样条插值、插值算法人口预测
時崎くるみ:
大佬大佬，能加个联系方式吗，我想请教一下怎么用
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
python持续集成jenkins
postman持续集成
pytest使用
2023
11月
4篇
10月
1篇
08月
1篇
05月
6篇
04月
3篇
03月
4篇
02月
14篇
01月
8篇
2022年81篇
2021年42篇
2020年544篇
2019年16篇
目录
目录
分类专栏
JavaScript
38篇
webpack
小程序
React
27篇
Node.js
4篇
TypeScript
6篇
HTML5+CSS
35篇
Vue
21篇
AJAX
2篇
JQuery
23篇
uni-app
1篇
大数据数仓
12篇
Python
4篇
Spring
12篇
软件测试
11篇
SpringSecurity
1篇
SpringBoot
15篇
HTTP&Request&Response&Servlet
22篇
Tomcat
4篇
JSON
5篇
SpringMVC
5篇
Redis&Jedis
17篇
Java
227篇
Docker
1篇
ZooKeeper
2篇
MongoDB
9篇
Git
5篇
JSP
8篇
Nginx
7篇
cookie&session会话技术
3篇
Maven
12篇
JVM
1篇
filter&listener
9篇
synchronized
3篇
XML
6篇
Bootstrap
5篇
SPSS
2篇
JDBC
18篇
MyBatis
14篇
MySQL/HIVE
64篇
MATLAB
4篇
Linux
11篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
_七七
你的鼓励将是我创作的最大动力
¥1
¥2
¥4
¥6
¥10
¥20
扫码支付：¥1
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值