当前位置： 首页 > news >正文

React 基础案例

news 2026/3/27 12:51:53

React的特点：

1、声明式编程

2、组件化开发

3、多平台适配yuan

原生实现：

    <h2 class="title"></h2><button class="btn">改变文本</button><script>let msg = "Hello World";const titleEl = document.querySelector(".title");titleEl.innerHTML = msg;const btnEl = document.querySelector(".btn");btnEl.addEventListener("click", (e) => {msg = "Hello React";titleEl.innerHTML = msg;});</script>

React实现：

React开发必须依赖三个库

1、react：包含react所必须的核心代码

2、react-dom：react渲染在不同平台所需要的核心代码

3、babel：将jsx转换成React代码的工具

（1）引入依赖

1、直接CDN引入

2、下载后，添加本地依赖

3、npm管理（脚手架使用）

  <body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">let msg = "Hello World";function btnClick() {msg = "Hello React";render();}// 渲染的内容，挂载的对象function render() {ReactDOM.render(<div><h2>{msg}</h2><button onClick={btnClick}>改变文本</button></div>,document.getElementById("app"));}render();</script></body>

代码组件化 

<body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">// 封装App组件 想让app是个组件必须先继承class App extends React.Component {// 构造器定义属性constructor() {super(); // 初始化父类实例，才可以使用this// 当数据变化引起页面的变化，不能直接定义在对象里面,必须写在state对象里面this.state = {msg: "Hello World",};}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.btnClick.bind(this)}>改变文本</button></div>);}btnClick() {//直接修改页面不会发生变化 this.state.msg = "Hello React";// 必须通过一个函数执行 数据更新操作render函数this.setState({msg: "Hello React",});}}ReactDOM.render(<App />, document.getElementById("app"));</script></body>

（2）使用脚手架

原生使用的是命令式编程，react使用的是声明式编程

命令式编程：每做一个操作，都是计算机（浏览器）一步步命令

声明式编程：表明想要做什么，应该做什么，但是不指定具体怎么做

相关文章：

React 基础案例

React的特点&#xff1a; 1、声明式编程 2、组件化开发 3、多平台适配yuan 原生实现&#xff1a; <h2 class"title"></h2><button class"btn">改变文本</button><script>let msg "Hello World";const titleEl d…...

编程日记 2024/5/14 6:44:33

【Python探索之旅】选择结构（条件语句）

文章目录 条件结构&#xff1a; 1.1 if单分支结构 1.2 if-else 多分支结构 1.3 if-elif 多重结构&#xff1a; 完结撒花​ 前言 Python条件语句是通过一条或多条语句的执行结果&#xff08;True或者False&#xff09;来决定执行的代码块。 Python提供了顺序、选择、循环三…...

编程日记 2024/5/14 6:43:31

Recommender ~ Collaborative filtering

Using per-item features User j 预测 movie i&#xff1a; Cost Function: 仅求和用户投票过的电影。 常规规范化&#xff08;usual normalization&#xff09;&#xff1a;1/2m 正则化项&#xff1a;阻止过拟合 在知晓X的前提下&#xff0c;如何学习w&#xff0c;b参数…...

编程日记 2024/5/14 6:42:30

我觉得POC应该贴近实际

今天我看到一位老师给我一份测试数据。 这是三个国产数据库。算是分布式的。其中有两个和我比较熟悉&#xff0c;但是这个数据看上去并不好。看上去第一个黄色的数据库数据是这里最好的了。但是即使如此&#xff0c;我相信大部分做数据库的人都知道。MySQL和PostgreSQL平时拿出…...

编程日记 2024/5/14 6:41:29

AI 情感聊天机器人工作之旅 —— 与复读机问题的相遇与别离

前言&#xff1a;先前在杭州的一家大模型公司从事海外闲聊机器人产品&#xff0c;目前已经离职&#xff0c;文章主要讨论在闲聊场景下遇到的“复读机”问题以及一些我个人的思考和解决方案。文章内部已经对相关公司和人员信息做了去敏&#xff0c;如仍涉及到机密等情况&#xf…...

编程日记 2024/5/14 6:40:28

如何使用ArcGIS Pro进行选房分析

无论是研究城市规划布局还是寻找理想的住房&#xff0c;都需要综合考虑购物、医疗、教育和休闲等多方面因素&#xff0c;此时我们的GIS软件就可以派上用场了&#xff0c;这里为大家介绍一下如何使用 ArcGIS Pro 进行选房分析&#xff0c;希望能对你有所帮助。 数据来源 教程所…...

编程日记 2024/5/14 6:39:26

android图标底色问题，debug与release不一致

背景 在android 8&#xff08;sdk 26&#xff09;之前的版本&#xff0c;直接使用图片文件作为图标&#xff0c;开发时比较容易控制图标&#xff0c;但是不同的安卓定制版本就不容易统一图标风格了。 在android 8及之后的版本&#xff0c;图标对应的是ic_launcher.xml&#x…...

编程日记 2024/5/14 6:38:25

如何提高自己的全局视野？

以下是一些可以帮助提高全局视野的方法&#xff1a; 1. 广泛学习不同领域知识&#xff1a;包括但不限于技术相关的各个领域、业务知识、行业动态等&#xff0c;拓宽知识面。 2. 参与大型项目&#xff1a;积极投身到复杂的、规模较大的项目中&#xff0c;在实践中感受和理解系…...

编程日记 2024/5/14 6:35:20

element ui的确认提示框文字样式修改

修改确认提示框文字样式修改&#xff0c;使用message属性修改&#xff1a; 例&#xff1a; js代码&#xff1a; this.$msgbox({title: 确定要删除吗?,message: this.$createElement(p, null, [this.$createElement(span, { style: color: red }, 该素材一旦删除&#xff0c;…...

编程日记 2024/5/14 6:34:19

Typescript 哲学 - ts模块使用最佳实践

ts的作用域 默认是全局&#xff08;global&#xff09;&#xff0c;这也是为什么在 两个ts文件声明同一个变量报错变量名冲突&#xff0c;解决方法是使某个文件以模块的形式存在&#xff08;文件顶层使用 export 、import &#xff09; In TypeScript, just as in ECMAScript 2…...

编程日记 2024/5/14 6:33:18

自动驾驶决策规划——坐标转换

以下内容来自b站up主忠厚老实的老王&#xff0c;视频链接&#xff1a;自动驾驶决策规划算法序章 总纲与大致目录_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1hP4y1p7es/?spm_id_from333.999.0.0&vd_sourced36e625f376908cfa88ef5ecf2fb0ed8侵删。 决策规划算法…...

编程日记 2024/5/14 6:32:17

信创应用软件之邮箱

信创应用软件之邮箱 文章目录 信创应用软件之邮箱采用信创邮箱的必要性信创邮箱采购需求国产邮箱业务形态国产邮箱代表性品牌CoremailRichmail安宁eyouUMail拓波 邮件安全的发展阶段 采用信创邮箱的必要性 邮箱是天然的数据存储空间&#xff0c;党政和央国企客户在使用过程中存…...

编程日记 2024/5/14 6:30:14

TriCore: Architecture

说明 本文是 英飞凌 架构文档 TriCore TC162P core archiecture Volume 1 of 2 (infineon.com) 的笔记&#xff0c;稍作整理方便查阅&#xff0c;错误之处&#xff0c;还请指正&#xff0c;谢谢 :) 1. Architecture 2. General Purpose & System Register 名词列表&#…...

编程日记 2024/5/14 6:29:11

16进制与不同进制之间计算加减乘除的比较快的方法

方法&#xff1a; 1.加分、减法&#xff1a; 将所有的进制的数转成目标进制的数&#xff0c;然后按位加。 如 0x123 0x1234 0x1357 2.乘法、除法&#xff1a; 将所有的进制的数转成二进制数&#xff0c;然后进行移位。 如 0x123456 乘 32&#xff08;十进制&#xff09;…...

编程日记 2024/5/14 6:27:10

责任链模式：原理与实现解析，及其应用场景代入

责任链模式的作用&#xff1a;复用和扩展&#xff0c;在实际的项目开发中比较常用&#xff0c;特别是框架开发中&#xff0c;我们可以利用它们来提供框架的扩展点&#xff0c;能够让框架的使用者在不修改框架源码的情况下&#xff0c;基于扩展点定制化框架的功能。 这里主要介…...

编程日记 2024/5/14 6:26:09

从心理学角度看，GPT 对人有什么影响？

开启个性化AI体验&#xff1a;深入了解GPT的无限可能 导言 GPT 与我们日常生活的融合标志着技术进步的重大飞跃&#xff0c;为提高效率和创新提供了前所未有的机遇。然而&#xff0c;当我们与这些智能系统日益紧密地交织在一起时&#xff0c;探索它们对个人产生的细微的心理影响…...

编程日记 2024/5/14 6:25:07

【C语言/数据结构】栈：从概念到两种存储结构的实现

目录 一、栈的概念 二、栈的两种实现方式 1.顺序表实现栈 2.链表实现栈 三、栈的顺序存储结构及其实现 1.栈的声明 2.栈的初始化 3.栈的销毁 4.栈的压栈 5.栈的弹栈 6.栈的判空 7.返回栈顶元素 8.返回栈的长度 四、栈的链式存储结构及其实现 1.栈的声明 2.栈的…...

编程日记 2024/5/14 6:24:06

47. UE5 RPG 实现角色死亡效果

在上一篇文章中&#xff0c;我们实现了敌人受到攻击后会播放受击动画&#xff0c;并且还给角色设置了受击标签。并在角色受击时&#xff0c;在角色身上挂上受击标签&#xff0c;在c里&#xff0c;如果挂载了此标签&#xff0c;速度将降为0 。 受击有了&#xff0c;接下来我们将…...

编程日记 2024/5/14 6:22:04

C语言/数据结构——每日一题（环形链表）

一.前言 今天在力扣上刷到一道链表题——环形链表https://leetcode.cn/problems/linked-list-cycle 想着和大家们分享一下。让我们直接开始今天的分享吧。、 二.正文 1.1题目描述 1.2题目分析 这道题是想让我们做出分析&#xff0c;该链表是不是带环链表&#xff0c;如果是…...

编程日记 2024/5/14 6:20:02

vue：网页icon无法显示

logo文件放在public文件夹下&#xff0c;在html里设置icon。 本地源码运行后发现网页icon无法显示我们设置的logo&#xff0c;而是显示了浏览器默认icon。 这个问题不需要解决&#xff0c;部署后网页icon显示就正常了。...

编程日记 2024/5/14 6:19:01

AI大模型入门指南：泛化、通用、涌现三大特征解析，小白也能学会收藏！

本文深入浅出地介绍了AI大模型的主要特征&#xff0c;包括泛化性、通用性和涌现性&#xff0c;并以ChatGPT为例&#xff0c;阐述了其如何通过巨量参数和深度网络结构展现强大的自然语言理解和生成能力。文章还详细分类并介绍了云侧大模型&#xff08;如通用大模型和行业大模型&…...

编程新知 2026/3/27 12:46:49

gemma-3-12b-it实际作品：10张不同领域测试图的图文理解准确率统计表

gemma-3-12b-it实际作品&#xff1a;10张不同领域测试图的图文理解准确率统计表 1. 测试背景与方法 最近我在实际使用gemma-3-12b-it模型时&#xff0c;对其图文理解能力产生了浓厚兴趣。这个由Google推出的多模态模型号称能够同时处理文本和图像输入&#xff0c;并生成准确的…...

编程新知 2026/3/27 12:32:47

自动驾驶中的点云处理：Voxel-based与Pillar-based方法实战对比（附代码示例）

自动驾驶中的点云处理&#xff1a;Voxel-based与Pillar-based方法实战对比&#xff08;附代码示例&#xff09; 在自动驾驶技术快速发展的今天&#xff0c;点云数据处理已成为环境感知系统的核心环节。激光雷达扫描产生的海量三维点云数据&#xff0c;如何被高效、准确地转化为…...

编程新知 2026/3/27 12:30:47

实践指南：如何使用Cisco DefenseClaw保护你的AI Agent安全

一、背景&#xff1a;AI Agent安全面临的新挑战 最近&#xff0c;开源AI代理框架OpenClaw遭遇了大规模供应链攻击&#xff0c;超过800个恶意技能被植入ClawHub技能市场。这个事件被命名为"ClawHavoc"&#xff0c;它暴露了AI Agent生态的安全漏洞。 作为开发者&#x…...

编程新知 2026/3/27 12:22:29

Vue 3 Teleport：打破 DOM 层级的“传送门”

Vue 3 Teleport&#xff1a;打破 DOM 层级的“传送门” 在现代前端开发中&#xff0c;组件化是构建复杂用户界面的基石。我们习惯于将 UI 拆分成一颗颗独立的组件&#xff0c;像搭积木一样组合成完整的页面。然而&#xff0c;这种嵌套结构在带来逻辑内聚性的同时&#xff0c;也…...

编程新知 2026/3/27 11:44:08

解锁智能导航核心：从基础到进阶的路径规划实践指南

解锁智能导航核心&#xff1a;从基础到进阶的路径规划实践指南 【免费下载链接】PathPlanning Common used path planning algorithms with animations. 项目地址: https://gitcode.com/gh_mirrors/pa/PathPlanning 路径规划算法是机器人导航、自动驾驶和游戏AI等领域的…...

编程新知 2026/3/27 11:34:00

嵌入式系统的启动流程与初始化详解

嵌入式系统的启动流程与初始化详解 为什么启动流程如此重要 作为科技创业者&#xff0c;我深知在嵌入式产品开发中&#xff0c;启动流程的设计和优化直接影响产品的用户体验和可靠性。一个快速、稳定的启动流程不仅能提升产品的竞争力&#xff0c;还能减少客户的等待时间&#…...

编程新知 2026/3/27 10:41:48

DoL-Lyra构建系统：5分钟学会自动化游戏MOD打包

DoL-Lyra构建系统&#xff1a;5分钟学会自动化游戏MOD打包 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS DOL-CHS-MODS&#xff08;Degrees of Lewdity汉化美化整合包&#xff09;是一款专为Degree…...

编程新知 2026/3/27 10:31:45

如何打造个人游戏云：5步掌握Sunshine跨平台串流技术

如何打造个人游戏云&#xff1a;5步掌握Sunshine跨平台串流技术 【免费下载链接】Sunshine Sunshine: Sunshine是一个自托管的游戏流媒体服务器&#xff0c;支持通过Moonlight在各种设备上进行低延迟的游戏串流。 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine…...

编程新知 2026/3/27 8:36:35

A-59F 多功能语音处理模组：覆盖全场景人群，让每一次语音都清晰无噪

在门禁对讲、会议扩音、车载通话、导游喊话、监护设备、智能工牌等各类语音设备中&#xff0c;啸叫刺耳、环境嘈杂、回音不断、拾音模糊、通话断续是所有人共同的痛点。一款真正解决问题的核心硬件 ——A-59F 多功能语音处理模组&#xff0c;它集成扩音防啸叫、AI ENC 降噪、AE…...

编程新知 2026/3/27 8:28:32