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

React 基础案例

news 2026/5/23 5:11:39

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

MakeMeAHanzi完整指南：如何免费获取9000+汉字笔画动画数据

MakeMeAHanzi完整指南&#xff1a;如何免费获取9000汉字笔画动画数据 【免费下载链接】makemeahanzi Free, open-source Chinese character data 项目地址: https://gitcode.com/gh_mirrors/ma/makemeahanzi MakeMeAHanzi是一个免费开源的汉字数据项目&#xff0c;为开发…...

编程新知 2026/5/23 5:01:57

DownloadButton与Auto Layout完美结合：适配各种屏幕尺寸的下载按钮布局

DownloadButton与Auto Layout完美结合&#xff1a;适配各种屏幕尺寸的下载按钮布局 【免费下载链接】DownloadButton Customizable App Store style download button 项目地址: https://gitcode.com/gh_mirrors/do/DownloadButton DownloadButton是一款高度可定制的App …...

编程新知 2026/5/23 4:49:23

量子机器学习噪声挑战与HPQS混合框架解析

1. 量子机器学习中的噪声挑战与HPQS解决方案量子机器学习(QML)作为量子计算与经典机器学习的交叉领域&#xff0c;正在重新定义我们处理复杂模式识别问题的方式。与传统机器学习不同&#xff0c;QML利用量子态的叠加和纠缠特性&#xff0c;理论上可以在某些特定任务上实现指数级…...

编程新知 2026/5/23 4:02:40

手把手教你用8255和12864 LCD搞定微机原理课设：一个公交报站器的完整实现

从零构建基于8255与12864 LCD的智能公交报站系统&#xff1a;硬件驱动与状态机设计实战 在微机原理课程设计中&#xff0c;将理论知识转化为实际项目是检验学习成果的关键。本文将带你完整实现一个具备动态显示、交互控制和状态管理的公交报站系统&#xff0c;重点剖析8255并行…...

编程新知 2026/5/23 2:52:06

基于RL78/G13的电位器ADC采集与串口通信上位机显示系统设计

1. 项目概述与核心思路最近在整理工作室的旧零件&#xff0c;翻出来一块瑞萨电子的RL78/G13开发板&#xff0c;还有几个吃灰的电位器。想着不能浪费&#xff0c;就琢磨着做个简单但能体现MCU基本功的小项目&#xff1a;用这块开发板实时采集电位器的电压&#xff0c;并把数据上…...

编程新知 2026/5/23 2:14:20

Windows 11终极优化指南：Win11Debloat一键提升51%系统性能

Windows 11终极优化指南&#xff1a;Win11Debloat一键提升51%系统性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter an…...

编程新知 2026/5/23 2:02:36

用高效证书管理加固企业数字边界

在当今企业 IT 基础架构的运行中&#xff0c;数字证书已经成为不可或缺的重要组成部分。这在很大程度上源于企业逐渐将 HTTPS 作为默认的数据传输方式&#xff0c;以实现更加安全的通信环境。从安全与隐私角度来看&#xff0c;这无疑是一项积极的改变&#xff0c;因为数据在传输…...

编程新知 2026/5/23 1:46:19

免费中医AI终极指南：仲景大模型如何让普通人也能享受专业中医咨询

免费中医AI终极指南&#xff1a;仲景大模型如何让普通人也能享受专业中医咨询 【免费下载链接】CMLM-ZhongJing 首个中医大语言模型——“仲景”。受古代中医学巨匠张仲景深邃智慧启迪&#xff0c;专为传统中医领域打造的预训练大语言模型。 The first-ever Traditional Chines…...

编程新知 2026/5/23 0:17:51

MySQL高频面试题-02

这一篇的主题:日志双写机制、深分页瓶颈&#xff0c;以及死锁怎么查。上次和大家聊了 B 树和 MVCC&#xff0c;今天这篇我们直接上硬菜。在社招或者大厂面试中&#xff0c;面试官往往不满足于只问你“什么是索引”&#xff0c;他们更喜欢切入高并发、大数量、分布式的真实场景。…...

编程新知 2026/5/22 23:55:57

AI动态简报之技术前沿篇(2026.05.22)

&#x1f4c5; 2026年5月22日 | 关注方向&#xff1a;AI技术突破 大模型创新 AI Agent 生成式AI 多模态AI &#x1f525; 第1条&#xff1a;谷歌I/O 2026三箭齐发——Gemini 3.5 Flash速度碾压4倍、Spark全天候Agent、Omni全栈多模态 核心内容&#xff1a; 谷歌I/O 2026以…...

编程新知 2026/5/22 23:30:22