react基础语法,模板语法,ui渲染,jsx,useState状态管理

创建一个react应用

这里使用create-react-app的脚手架构建项目(结构简洁,基于webpack-cli),

npx create-react-app [项目名称]

使用其他脚手架构建项目可以参考:react框架,使用vite和nextjs构建react项目_vite + react+js项目构建-CSDN博客

 

成功构建后只需要关注两个部分,package.json中的script脚本,start:启动项目

src中的核心文件,index.js: 引入react的依赖,   App.js:根组件

可以先去除多余的文件

index.js

import React from 'react'; // 引入React库
import ReactDOM from 'react-dom/client'; // 引入ReactDOM库
import App from './App'; // 引入App组件const root = ReactDOM.createRoot(document.getElementById('root')); // 创建根节点
root.render(// 严格模式,排错<React.StrictMode><App /></React.StrictMode>
);

app.js


function App() {return (<div className="App"><h1>react基本语法</h1></div>);
}export default App;

以上是精简后的文件目录和文件内容,可以看出核心的引入库为react和react-dom,整个框架也是完全基于js生成的

模板语法

模板语法就是在html结构中使用js变量渲染数据,

function App() {const title = '标题'return (<div className="App"><h1>react基本语法</h1><span>{title}</span></div>);
}export default App;

我们在App组件(函数)定义一个变量,并使用{}插入html结构中,{}的功能就是将html环境转换成js环境 ,

 出来再标签外插值,还可以再标签内设置属性,最终都会变成html的结构

function App() {const title = '标题'const box = 'box'return (<div className="App"><h1>react基本语法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div></div>);
}export default App;

组件渲染时要注意的几点:

  • 一个组件中返回的html结构只能有一个外标签,可以使用<div></div>,<></>,它们的区别是一个最终会被div包裹,一个则不会有任何标签再外圈(template)
  • 对标签元素设置类时使用className而不是class(防止和es6的class关键字搞混)
  • 插入对象时使用{{}},这表示{}中插入的时对象,最常用的就是style属性

 列表渲染和条件渲染


function App() {const title = '标题'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))return (<div className="App"><h1>react基本语法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}</div>);
}export default App;

使用数组中的数据进行列表循环渲染时,使用map方法,map方法有返回值,可以将html的结构返回出来直接插入到组件的渲染结构中(虚拟节点),

function App() {const title = '标题'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))let show = falselet content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>return (<div className="App"><h1>react基本语法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}{content}</div>);
}export default App;

当show为true和false时,span中的内容会相应发生改变,

可以看出在react中循环和条件都是基于原生js的方法实现的

jsx

        jsx语法是js和XML结合的语法,它允许再js中使用类似Html的标签元素作为值,类似于数字,字符串,要注意jsx的标签并不是字符串,所以复制时不需要添加引号,同时使用return返回jsx的标签时,要使用()包裹,因为不使用()js的语法会认为再return这一行函数就结束了,不会读取到后续内容

let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
 return (<div className="App"><h1>react基本语法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}{content}</div>);

同时你也可以将文件改成jsx后缀,因为react集成了jsx语法,所以使用js也可以成功识别出jsx

状态管理

这里用上了一个hooks钩子函数 ,useState,

const [show, setShow] = useState(false)

它接受一个任意值,返回一个数组,里面包含一个由任意值生成的响应式变量,和这个响应式变量的修改方法,

比如上面修改的show变量,使用useState接受false布尔值,复制给show,同时生成setShow方法用来重新赋值show,因为show是只读的不可被直接修改,

import { useState } from "react"function App() {const title = '标题'const box = 'box'const listData = [1, 2, 3, 4, 5]const list = listData.map(item=>(<li key={item}>{item}</li>))const [show, setShow] = useState(false)let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>function fn() {setShow(!show)}return (<div className="App"><h1>react基本语法</h1><span>{title}</span><div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>{list}<button onClick={fn}>click</button>{content}</div>);
}export default App;

此时点击按钮,会改变文字内容

注意:onclick接受一个函数名或者函数体,接受函数名时不能带括号,如果需要传参应该写成函数体的格式

 <button onClick={()=>fn()}>click</button>

到这里react的基本语法就全部展示完了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/373649.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解锁短视频运营新高度:视频号矩阵源码,定时自动发布,畅享高效管理

在数字时代浪潮下&#xff0c;短视频已然成为信息传播的重要渠道。对于内容创作者和企业来说&#xff0c;如何高效地管理和运营短视频账号&#xff0c;实现内容的定时自动发布&#xff0c;成为了一个亟待解决的问题。今天&#xff0c;我们将为您揭秘一款短视频运营的新利器——…

蓝卓创始人褚健:工业软件是数字化转型的灵魂和核心驱动力

如果把“工业3.0”简单理解为就是“自动化”&#xff0c;“工业4.0”理解为是“智能化”&#xff0c;那么“智能化”的实现一定要有软件。如同今天的移动互联网&#xff0c;是因为有大量的APP&#xff0c;所以让人们进入了智能时代。映射到工业、制造业领域&#xff0c;就是要依…

第4章 课程发布:模块需求分析,课程预览(模板引擎 静态页面),课程审核,课程发布(分布式事务,页面静态化:熔断降级),课程搜索(es索引)

1 模块需求分析 1.1 模块介绍 课程信息编辑完毕即可发布课程&#xff0c;发布课程相当于一个确认操作&#xff0c;课程发布后学习者在网站可以搜索到课程&#xff0c;然后查看课程的详细信息&#xff0c;进一步选课、支付、在线学习。 下边是课程编辑与发布的整体流程&#…

PHP全域旅游景区导览系统源码小程序

&#x1f30d;【探索无界&#xff0c;畅游无忧】全域旅游景区导览系统小程序全攻略 &#x1f4f1;【一键启动&#xff0c;智能导览在手】 告别纸质地图的繁琐&#xff0c;迎接全域旅游景区导览系统小程序的便捷时代&#xff01;只需轻轻一点&#xff0c;手机瞬间变身私人导游…

C++ 编译体系入门指北

前言 之从入坑C之后&#xff0c;项目中的编译构建就经常跟CMake打交道&#xff0c;但对它缺乏系统的了解&#xff0c;遇到问题又陷入盲人摸象。对C的编译体系是如何发展的&#xff0c;为什么要用CMake&#xff0c;它的运作原理是如何的比较感兴趣&#xff0c;所以就想系统学习…

CentOS7 安装 git 命令

通过yum源install下载的git版本比较低&#xff0c;不推荐此方式安装。 官网下载最新版git源码&#xff1a;Git 1. 解压安装包 tar -xzvf git-2.45.2.tar.gz 2. 安装相关依赖 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils…

第三方商城对接重构(HF202407)

文章目录 项目背景一、模块范围二、问题方案1. 商品模块2. 订单模块3. 售后4. 发票5. 结算单 经验总结 项目背景 作为供应商入围第三方商城成功&#xff0c;然后运营了一段时间&#xff0c;第三方通知要重构&#xff0c; 需要重新对接打通接口完成系统对接&#xff0c;能贯穿整…

【QT中实现摄像头播放、以及视频录制】

学习分享 1、效果图2、camerathread.h3、camerathread.cpp4、mainwindow.h5、mainwindow.cpp6、main.cpp 1、效果图 2、camerathread.h #ifndef CAMERATHREAD_H #define CAMERATHREAD_H#include <QObject> #include <QThread> #include <QDebug> #include &…

Mybatis的优缺点及适用场景?

目录 一、什么是Mybatis&#xff1f; 二、Mybatis框架的特点 三、Mybatis框架的优点&#xff1f; 四、MyBatis 框架的缺点&#xff1f; 五、MyBatis 框架适用场合&#xff1f; 六、代码示例 1. 配置文件 mybatis-config.xml 2. 映射文件 UserMapper.xml 3. Java 代码…

coco_eval 使用

参考 coco eval 解析 COCO目标检测比赛中的模型评价指标介绍&#xff01; coco 的评估函数对应的是 pycocotools 中的 cocoeval.py 文件。 从整体上来看&#xff0c;整个 COCOeval 类的框架如图&#xff1a; 基础的用法为 # The usage for CocoEval is as follows: cocoGt…

深入解析视频美颜SDK:开发直播平台主播专用的美颜工具教学

本篇文章&#xff0c;笔者将深入解析视频美颜SDK的原理与应用&#xff0c;帮助开发者打造适用于直播平台的专业美颜工具。 一、视频美颜SDK的基础原理 视频美颜SDK其核心技术包括人脸检测、面部特征点识别、图像增强和特效应用等。 二、视频美颜SDK的开发流程 环境搭建 首先…

Redis+Caffeine 实现两级缓存

RedisCaffeine 实现两级缓存 背景 ​ 事情的开始是这样的&#xff0c;前段时间接了个需求&#xff0c;给公司的商城官网提供一个查询预计送达时间的接口。接口很简单&#xff0c;根据请求传的城市仓库发货时间查询快递的预计送达时间。因为商城下单就会调用这个接口&#xff…

人工智能建立在对象存储上的真正原因

tl;dr: 在这篇文章中&#xff0c;我们将探讨 AI 工作负载依赖高性能对象存储的四个技术原因。 1. 对非结构化数据没有限制 在当前的机器学习范式中&#xff0c;性能和能力与计算成比例&#xff0c;计算实际上是数据集大小和模型大小的代理&#xff08;神经语言模型的缩放定律&a…

74HC165芯片验证

目录 0x01 74HC165芯片介绍0x02 编程实现 0x01 74HC165芯片介绍 74HC165的引脚定义如下&#xff0c;长这个样子 ABCDEFGH是它的八个输入引脚&#xff0c;例如你可以将它连接按键&#xff0c;让它来读取8个按键值。也可以将他级联其它的74165&#xff0c;无需增加单片机GPIO引…

Msfvenom制作自己的专属Shell

Msfvenom制作自己的专属Shell 如何通过Msfvenom来生成用户自己的专属Shell?有时候我们上传Shell到目标主机后&#xff0c;不仅我们自己可以连接&#xff0c;其他用户也可以连接&#xff0c;有时候会导致我们丢失该Shell&#xff0c;甚至该shell被用户发现并查杀。 实验环境 …

HTTP 概况

Web的应用层协议是超文本传输协议(HyperTextTransferProtocol&#xff0c;HTTP)&#xff0c;它是 Web的核心。HTTP由两个程序实现:一个客户程序和一个服务器程序。客户程序和服务器程序运行在不同的端系统中&#xff0c;通过交换HTTP报文进行会话。HTTP定义了这些报文的结构以及…

【SVN-CornerStone客户端使用SVN-多人开发-解决冲突 Objective-C语言】

一、接下来,我们来说第三方的图形化界面啊, 1.Corner Stone:图形化界面,使用SVN, Corner Stone的界面,大概就是这样的, 1)左下角:是我们远程的一个仓库, 2)右上角:是我们本地的一些东西, 首先,在我的服务器上,再开一个仓库,叫做wechat, 我在这个里边,新建…

游戏AI的创造思路-技术基础-情感计算(2)

上一篇我们介绍了情感计算的基本支持&#xff0c;本篇将呈现情感计算在游戏AI中的使用实例~~~ 目录 7. 情感计算在游戏AI中的运用实例 7.1. RPG游戏中的运用实例 7.1.1. 实例背景 7.1.2. AI情感计算系统 7.1.3. 引导用户执行任务 7.1.4. 推动游戏剧情发展 7.1.5. 实例效…

如何才能半个月学习完自动化测试,成功跳槽涨薪?

一直想写类似的文章&#xff0c;但是一直没有时间&#xff0c;正好乘此周末&#xff0c;终于可以写写我的见解了<关于如何学习自动化测试>&#xff0c;其实自动化测试的知识很宽泛&#xff0c;具体细分又可以分为&#xff1a;Web自动化测试&#xff08;PythonSelenium&am…

红日靶场----(三)漏洞利用

上期已经信息收集阶段已经完成&#xff0c;接下来是漏洞利用。 靶场思路 通过信息收集得到两个吧靶场的思路 1、http://192.168.195.33/phpmyadmin/&#xff08;数据库的管理界面&#xff09; root/root 2、http://192.168.195.33/yxcms/index.php?radmin/index/login&am…