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

第2课：JSX语法与组件基础

news 来源：原创 2025/8/29 5:57:46

第2课：JSX语法与组件基础

学习目标

深入理解JSX语法
掌握组件的基本结构和用法
学习使用Props传递数据
掌握React中的样式添加方法
创建任务卡片组件

一、JSX语法深入

1. 什么是JSX？

JSX是JavaScript XML的缩写，它允许我们在JavaScript中编写类似HTML的代码。

特点：

不是字符串也不是HTML
最终会被转译为普通的JavaScript函数调用
必须返回单个根元素

2. JSX基础规则

示例代码 (`src/JsxDemo.jsx`):

function JsxDemo() {const name = "React新手";const element = <h2>你好, {name}!</h2>;return (<div className="jsx-container">{element}<p>当前时间是: {new Date().toLocaleTimeString()}</p><img src="https://via.placeholder.com/150" alt="示例图片" /></div>);
}export default JsxDemo;

function JsxDemo() {const name = "React 新手";const element = <h1>你好，{name}!</h1>;return (<div className="jsx-demo">{element}<h1>JSX Demo</h1><p>当前的时间是：{new Date().toLocaleTimeString()}</p></div>);
}export default JsxDemo;
// // import React from 'react'

重要规则：

必须有一个根元素包裹（如<div>或<>）
属性名使用camelCase（如className代替class）
JavaScript表达式用{}包裹
标签必须闭合（如<img />）

3. 在App中使用JsxDemo组件

修改App.js:

import JsxDemo from './JsxDemo';function App() {return (<div className="App"><JsxDemo /></div>);
}

在这里插入图片描述

二、组件Props基础

1. 什么是Props？

Props是组件的输入参数，用于父组件向子组件传递数据。

创建带Props的组件 (`src/Greeting.js`):

function Greeting(props) {return <h1>你好, {props.name}!</h1>;
}// 或者使用解构语法
// function Greeting({ name }) {
//   return <h1>你好, {name}!</h1>;
// }export default Greeting;

function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
// // import React from 'react'

2. 使用组件并传递Props

修改App.js:

import Greeting from './Greeting';function App() {return (<div className="App"><Greeting name="张三" /><Greeting name="李四" /></div>);
}

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'function App() {return (<>{/* <div><a href="https://vite.dev" target="_blank"><img src={viteLogo} className="logo" alt="Vite logo" /></a><a href="https://react.dev" target="_blank"><img src={reactLogo} className="logo react" alt="React logo" /></a></div><h1>Vite + React</h1><div className="card"><button onClick={() => setCount((count) => count + 1)}>count is {count}</button><p>Edit <code>src/App.jsx</code> and save to test HMR</p></div><p className="read-the-docs">Click on the Vite and React logos to learn more</p><div className="App"><h1>我的第一个React应用</h1><p>欢迎来到任务管理系统！</p></div><HelloWorld /><Introduction /> */}<JsxDemo /><div className='App'><Greeting name="John" /><Greeting name="Jane" /><Greeting name="Doe" /></div></>)
}export default App

在这里插入图片描述

三、样式添加方法

1. 内联样式确保 InlineStyleDemo.jsx 文件存在且导出组件：

function InlineStyleDemo() {const style = {color: 'blue',backgroundColor: 'lightgray',padding: '10px',border: '1px solid #ccc', // 可添加更多样式};return <div style={style}>这是内联样式示例</div>;
}
export default InlineStyleDemo;

import InlineStyleDemo from './InlineStyleDemo.jsx'; // 新增导入

app.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'function App() {return (<><div className='App'><Greeting name="John" /><Greeting name="Jane" /><Greeting name="Doe" /></div><div className='App'><h1>内联样式示例</h1><InlineStyleDemo /></div></>)
}export default App

在这里插入图片描述

2. CSS样式表

创建Card.css:

.card {border: 1px solid #ccc;border-radius: 8px;padding: 16px;margin: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
color: #333;
font-size: 1.2em;
margin-bottom: 8px;
}
.card-content {color: #555;font-size: 1em;line-height: 1.5;
}
.card-footer {text-align: right;font-size: 0.9em;color: #777;margin-top: 16px;
}

在组件中引入:新建一个Card.jsx

import './Card.css';function Card() {return (<div className="card"><h3 className="card-title">卡片标题</h3><p>卡片内容...</p></div>);
}

import './Card.css';function Card(props) {return (<div className="card"><h2 className="card-title">{props.title}</h2><p className="card-content">{props.content}</p></div>);
}

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'
import Card from './Card.jsx';function App() {return (<><div className='App'><Greeting name="John" /><Greeting name="Jane" /><Greeting name="Doe" /></div><div className='App'><h1>内联样式示例</h1><InlineStyleDemo /></div><div className='Card'><h1>卡片组件示例</h1><Card title="卡片标题" content="这是卡片的内容。" /><Card title="卡片标题2" content="这是卡片的内容2。" /></div></>)
}export default App

在这里插入图片描述

3. CSS Modules (推荐)

创建Card.module.css:

.error {color: red;
}

使用方式:

import styles from './Card.module.css';function Card() {return <div className={styles.error}>错误信息</div>;
}

四、实战练习：创建任务卡片组件

1. 创建TaskCard组件

新建src/TaskCard.js:

import './TaskCard.css';function TaskCard({ title, description, completed }) {return (<div className={`task-card ${completed ? 'completed' : ''}`}><h3>{title}</h3><p>{description}</p><span>{completed ? '✅ 已完成' : '❌ 未完成'}</span></div>);
}export default TaskCard;

import "./Card.css";function TaskCard({ task, onDelete }) {return (<div className="card"><h2 className="card-title">{task.title}</h2><p className="card-content">{task.content}</p><button className="delete" onClick={() => onDelete(task.id)}>删除</button></div>);
}
export default TaskCard;
// // import React from 'react'


```bash
在这里插入代码片


### 2. 添加样式
新建`src/TaskCard.css`:
```css
.task-card {border: 1px solid #ddd;border-radius: 8px;padding: 16px;margin: 10px 0;background-color: #f9f9f9;
}.task-card.completed {background-color: #e8f5e9;border-color: #a5d6a7;
}.task-card h3 {margin-top: 0;color: #333;
}.task-card p {color: #666;
}

3. 在App中使用

修改App.js:

import TaskCard from './TaskCard';function App() {return (<div className="App"><TaskCard title="学习React" description="完成第二课的学习" completed={false} /><TaskCard title="购物" description="买牛奶和面包" completed={true} /></div>);
}

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'
import Card from './Card.jsx';
import TaskCard from './TaskCard.jsx'function App() {return (<><div className='TaskCard'><h1>任务卡片示例</h1><TaskCard task={{ id: 1, title: "任务1", content: "这是任务1的内容" }} onDelete={(id) => console.log(`删除任务 ${id}`)} /><TaskCard task={{ id: 2, title: "任务2", content: "这是任务2的内容" }} onDelete={(id) => console.log(`删除任务 ${id}`)} /><TaskCard task={{ id: 3, title: "任务3", content: "这是任务3的内容" }} onDelete={(id) => console.log(`删除任务 ${id}`)} /></div></>)
}export default App

在这里插入图片描述

五、练习任务

创建一个UserCard组件，接收并显示以下props:
- name (用户名)
- age (年龄)
- avatar (头像URL)
- isOnline (是否在线)
为UserCard添加样式：
- 在线用户卡片使用绿色边框
- 离线用户卡片使用灰色边框
- 头像显示为圆形
- 名字使用较大字体
在App组件中使用UserCard显示至少3个不同的用户

六、常见问题解答

Q: 为什么我的样式没有生效？
A: 检查：

是否正确引入了CSS文件
类名是否拼写正确
是否有更高优先级的样式覆盖

Q: 如何传递多个props？
A: 可以像这样传递多个属性：

<UserCard name="张三" age={25} isOnline={true} />

Q: 必须为每个组件创建单独的CSS文件吗？
A: 不是必须的，但这是推荐的做法，尤其是使用CSS Modules时。

七、课程总结

今天我们学习了：

JSX的核心语法和规则
组件Props的概念和使用方法
React中的三种样式添加方式
创建了一个可重用的TaskCard组件

课后作业

完成UserCard组件的创建和样式设计
尝试为TaskCard添加更多props（如dueDate截止日期）
探索CSS Modules的更多用法（如组合类名）

下一节课我们将学习状态管理和事件处理，让我们的组件变得可交互！

附加资源

React JSX官方文档
CSS Modules文档
React样式解决方案比较

第2课：JSX语法与组件基础

第2课：JSX语法与组件基础学习目标深入理解JSX语法掌握组件的基本结构和用法学习使用Props传递数据掌握React中的样式添加方法创建任务卡片组件一、JSX语法深入 1. 什么是JSX？ JSX是JavaScript XML的缩写，它允许我们在JavaScript中编写…...

编程日记 2025/8/29 5:57:46

DevOps与Docker的关系

DevOps 与 Docker 是相辅相成的关系。DevOps 是一种强调开发（Development）与运维（Operations）之间协作的文化、实践和工具链，而 Docker 是一种容器化技术，为 DevOps 的实现提供了高效的技术支撑。 Docker …...

编程日记 2025/8/29 5:54:37

嵌入式AI简介

嵌入式AI是一种将人工智能算法部署在终端设备中运行的技术，使智能硬件能够在本地实时完成感知、交互和决策功能，无需依赖云端计算。以下是其核心要点： 一、核心特点 1. 本地化处理：数据在设备端直接处理，无需联网&a…...

编程日记 2025/8/28 12:44:28

多GPU训练

写在前面限于财力不足，本机上只有一个 GPU 可供使用，因此这部分的代码只能够稍作了解，能够使用的 GPU 也只有一个。多 GPU 的数据并行：有几张卡，对一个小批量数据，有几张卡就分成几块，每个 …...

编程日记 2025/8/28 1:13:01

JVM虚拟机篇（三）：JVM运行时数据区与方法区详解

JVM虚拟机篇（三）：JVM运行时数据区与方法区详解 JVM虚拟机篇（三）：JVM运行时数据区与方法区详解一、引言二、JVM运行时数据区2.1 概述2.2 各部分的作用与交互2.2.1 堆与其他区域的关系2.2.2 方法区与其他区域…...

编程日记 2025/8/27 9:45:26

参考https://segmentfault.com/a/1190000044555330 命令行创建一个新的Rust项目cargo new --lib rust_python_ext 配置Cargo.toml [package] name "rust_python_ext" version "0.1.0" edition "2024"[lib] name "rust_python_ext"…...

编程日记 2025/8/28 13:23:29

Pod的调度

在默认情况下，一个Pod在哪个Node节点上运行，是由Scheduler组件采用相应的算法计算出来的，这个过程是不受人工控制的。但是在实际使用中，这并不满足的需求，因为很多情况下，我们想控制某些Pod到达某些节点上&…...

编程日记 2025/8/28 7:07:50

系统思考：思考的快与慢

在做重大决策之前，什么原因一定要补充碳水化合物？人类的大脑其实有两套运作模式：系统1：自动驾驶模式，依赖直觉，反应快但易出错；系统2：手动驾驶模式，理性严谨，…...

编程日记 2025/8/27 16:50:51

[ 计算机网络 ] | HTTP协议(一)

目录前置知识： URL URL的URLENCODE和URLDECODE HTTP协议的宏观格式如何保证报文是完整的？怎么做序列，反序列化的？ 前置知识： URL 我们把数据给别人，别人把数据给我们，不是在做IO嘛~&am…...

编程日记 2025/8/27 7:25:24

大模型快速 ASGI 服务器uvicorn

基础概念类 1. 什么是 Uvicorn，它的作用是什么？ 答案：Uvicorn 是一个基于 Python 的快速 ASGI（异步服务器网关接口）服务器。它的主要作用是作为 Web 应用程序的服务器，负责接收客户端的请求，并…...

编程日记 2025/8/28 19:20:44

android studio 基础

1.android Module not specified 今天做一个实验时出现：Android Studio Run/Debug configuration error: Module not specified，要想解决这个问题： 1、打开根目录的 settings.gradle，删除 include :exampleapp 2、在 Android Stu…...

编程日记 2025/8/28 3:03:11

python爬虫爬取淘宝热销(热门)零食商品加数据清洗、销量、店铺及词云数据分析_源码及相关说明文档；售后可私博主

TOC 如有侵权,联系删除一、环境说明使用前必须检查以下环境 （1）python编译环境 （2）python脚本执行所需要的库，具体看代码（main.py）import导入的部分库 （3）确保电脑可…...

编程日记 2025/8/26 23:49:13

Android /proc/meminfo解释

高通8295设备 msmnile_gvmq:/proc # cat meminfo MemTotal: 16433968 kB MemFree: 7709832 kB…...

编程日记 2025/8/27 18:05:02

VScode 玩 MCP的server

vscode 1.99版本刚支持MCP server，我就测试了一下翻到一个gitte的MCP sever 我本身是Mac版本1.99居然没更新agent，所以我就直接用1.100版本的vscode inside了来掩饰一下了点击setting，然后你要edit一下这个json配置文件主要修改的其实是…...

编程日记 2025/8/28 4:08:24

详解 MySQL 索引的最左前缀匹配原则

MySQL 的最左前缀匹配原则主要是针对复合索引（也称为联合索引）而言的。其核心思想是：只有查询条件中包含索引最左侧（第一列）开始的连续一段列，才能让 MySQL 有效地利用该索引。一、复合索引的结构复合…...

编程日记 2025/8/28 10:15:26

ROS Master多设备连接

Bash Shell Shell是位于用户与操作系统内核之间的桥梁，当用户在终端敲入命令后，这些输入首先会进入内核中的tty子系统，TTY子系统负责捕获并处理终端的输入输出流，确保数据正确无误的在终端和系统内核之中。Shell在此过程不仅仅是…...

编程日记 2025/8/27 20:35:33

【Mysql】数据库备份与恢复

一、备份类型物理备份：直接对数据库的数据文件、日志文件、索引文件进行备份逻辑备份：对数据库对象（库、表）以SQL语句的形式导出进行备份二、备份工具 1、使用tar、gzip等方式压缩打包数据库文件（完全备份、物理冷…...

编程日记 2025/8/28 11:21:21

Java HttpURLConnection修仙指南：从萌新到HTTP请求大能的渡劫手册

一、筑基篇：初识HttpURLConnection 1.1 基础开光（创建连接） URL url new URL("https://api.example.com/data"); HttpURLConnection conn (HttpURLConnection) url.openConnection(); // 注意！此处可能抛出Malforme…...

编程日记 2025/8/24 16:58:12

python 重要易忘语言基础

Collections 1、Counter 计数器 counter:计数器类似字典统计可迭代对象中元素的出现次数, Counter({b: 3, c: 2, a: 1, d: 1}) 相当于字典{b: 3, c: 2, a: 1, d: 1} a.items() 取键值对对应为dict_items([(a, 1), (b, 3), (c, 2), (d, 1)]) 也可以是 list(a.items…...

编程日记 2025/8/27 10:34:20

【新能源汽车研发测试数据深度分析：从传感器到智能决策的硬核方法论】

摘要： 本文系统性解构新能源汽车（NEV）研发测试中的数据采集、处理及分析全链条，覆盖传感器融合、大数据清洗、AI算法优化等核心技术，并引入行业顶级案例（如特斯拉Autopilot验证、宁德时代BMS算法迭代&#…...

编程日记 2025/8/27 12:56:56

GD32H759IMT6 Cortex-M7 OpenHarmony轻量系统移植——接管中断修改为不接管

笔者在去年利用国庆时间，将Cortex-M7 的国产厂商兆易创新GD32H459移植OpenHarmony轻量系统，但是适配不太完善——只能选择liteos-m接管中断。这样导致使用中断非常麻烦。于是笔者最近将接管中断模式修改为不接管，这样可以方便的使用gd32提供的…...

编程日记 2025/8/26 13:01:51

MySQL基础学习笔记

学习笔记 1. 基础小知识1.1 数据库分类1.2 下载安装、变量配置过程（略）1.3 连接命令1.4 连接mysql服务端的软件选择1.4.1 要求不高的话，选择有很多1.4.2 适合做企业级管理的工具（适合团队协作）1.4.3 总结 1.5 编程语言…...

编程日记 2025/8/26 1:32:12

[Linux]进程状态、僵尸进程处理回收、进程优先级 + 图例展示

目录一、进程状态 1.一般操作系统学科的进程状态二、Linux操作系统的进程状态运行状态（R） 睡眠状态（S） 深度睡眠状态（D） 暂停状态（T） 追踪暂停状态&#x…...

编程日记 2025/8/28 0:27:16

2022 年 6 月青少年软编等考 C 语言七级真题解析

目录 T1. 有多少种二叉树思路分析T2. 城堡问题T3. 快速堆猪思路分析T4. 重建二叉树思路分析T1. 有多少种二叉树题目链接：SOJ D1189 输入 n ( 1 < n < 13 ) n\ (1<n<13) n (1<n<13)，求 n n n 个结点的二叉树有多少种形态？思路分析此题考查 C a…...

编程日记 2025/8/28 9:42:15

flutter修改 Container 中的 Text 和 Image 的样式

在Flutter中，Container 是一个常用的布局组件，它可以包含子组件（如文本、图片等），并允许你通过设置各种属性来自定义样式。如果你需要修改 Container 中的 Text 和 Image 的样式，可以通过以下方式实现。 1.…...

编程日记 2025/8/28 10:01:04

零基础入门unity游戏开发——动画篇】Animation动画窗口，创建编辑动画

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把【零基础入门unity游戏开发】分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、…...

编程日记 2025/8/27 6:09:45

【设计模式】命令模式

简介假设你有一个智能家居遥控器，上面有多个按钮，每个按钮对应不同的设备操作（如开灯、关灯、调空调温度）。命令模式的解决方案是： 将每个操作（如“开灯”）封装成一个独立的命令对象&#x…...

编程日记 2025/8/28 10:07:45

Python作业3 字符田字格绘制

字符田字格绘制：编写程序,用字符方式打印输出一个简单的田字格,要求采用函数方式,以田字格宽度为参数,能够根据参数绘制任意大小的田字格。 def draw(n):line 3 * n 1for i in range(1, line 1):if i % 3 1:print(n * " —— —— ", end"&quo…...

编程日记 2025/8/28 1:57:32

文章记单词 | 第23篇（六级）

一，单词释义 occupy /ˈɒkjupaɪ/v. 占用，占领，使忙碌thermal /ˈθɜːml/adj. 热的，热量的，保暖的；n. 热气流persistent /pəˈsɪstənt/adj. 执着的，坚持不懈的，持续存在的wee…...

编程日记 2025/8/28 6:16:48

【算法】滑动窗口

什么是滑动窗口算法？ 滑动窗口算法本质上就是双指针的一种情况，当两个指针进行移动的方向是同一个方向，并且这两个指针并不会向后回退，一直是往一个方向进行移动的。这也就是滑动窗口的使用场景。滑动窗口算法的一般步骤进窗…...

编程日记 2025/8/27 8:15:38

可视化工具

在PyTorch中，可视化工具对于模型调试、性能分析和结果解释至关重要。以下是常用的可视化工具及其应用场景： 1. 训练过程监控 TensorBoard (PyTorch官方集成) 用途：跟踪训练指标（损失、准确率）、可视化模型结构、分析…...

编程日记 2025/8/27 21:49:36

hashtable遍历的方法有哪些

在 Java 中，遍历 Hashtable（或其现代替代品 HashMap）有多种方式，以下是 6 种常用方法的详细说明和代码示例： 1. 使用 keySet() 增强 for 循环 Hashtable<String, Integer> table new Hashtable<>(); // …...

编程日记 2025/8/28 22:24:30

LeetCode --- 443周赛

题目列表 Q1. 到达每个位置的最小费用 Q2. 子字符串连接后的最长回文串 I Q3. 子字符串连接后的最长回文串 II Q4. 使 K 个子数组内元素相等的最少操作数一、到达每个位置的最小费用题目要求返回从队尾到达任意位置的最小费用，规则：如果下标 i i i …...

编程日记 2025/8/27 12:26:21

从零构建大语言模型全栈开发指南：附录与资源-3.面试与进阶-200道大模型面试真题与职业发展路线图-基础理论篇50题

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲附录与资源-3. 面试与进阶：200道大模型面试真题与职业发展路线图一、大模型面试真题分类与解析1. 基础理论篇（50+题精选）2. 进阶实战篇（50+题精选）3. 应用场景篇（70题精选）二、职业发展路线图1. …...

编程日记 2025/8/27 23:18:24

使用Android Studio开发基于Java+xml的安卓app之环境搭建

以下是使用Android Studio搭建基于Java和XML的Android应用开发环境的详细步骤： 一、系统要求操作系统：Windows 7/8/10/11（64位）内存：建议8GB及以上磁盘空间：至少5GB空闲（建议预留10GB以上&…...

编程日记 2025/8/27 1:17:27

GD32H759IMT6 Cortex-M7 OpenHarmony轻量系统移植——4.1版本升级到5.0.3

编程日记 2025/8/25 22:33:48

学习汇编随手记

学习汇编随手记前言本笔记是关于王爽汇编的笔记，覆盖不全，到了内中断就完结了，听从学长建议，我跑去学xv6了，x86告辞。 1. 寄存器 1.1 寄存器初步 (A,B,C,D)X是通用寄存器，通常存放一般性数据&#x…...

编程日记 2025/8/27 22:30:52

打造高效英文单词记忆系统：基于Python的实现与分析

在当今全球化的世界中，掌握一门外语已成为必不可少的技能。对于许多学习者来说，记忆大量的英文单词是一个漫长而艰难的过程。为了提高学习效率，我们开发了一个基于Python的英文单词记忆系统。这个系统结合了数据管理、复习计划、学习统计和测试练习等多个模块，旨在为用户提…...

编程日记 2025/8/28 19:27:23

【漫话机器学习系列】182.噪声修正线性单元（Noisy ReLU）

噪声修正线性单元（Noisy ReLU）详解 1. 引言在深度学习中，修正线性单元（ReLU, Rectified Linear Unit） 是一种常见的激活函数，具有计算简单、梯度稳定等优点。然而，ReLU 也有一些缺点&#xf…...

编程日记 2025/8/28 9:37:55

连续数据离散化与逆离散化策略

数学语言描述： 在区间[a,b]中有一组符合某分布的数据： 1.求相同区间中另一组符合同样分布的数据与这组数据的均方误差 2.求区间中点与数据的均方误差 3.求在区间中均匀分布的一组数据与这组数据的均方误差一：同分布数据随机映射假设在…...

编程日记 2025/8/28 16:26:16

《安富莱嵌入式周报》第352期：手持开源终端，基于参数阵列的定向扬声器，炫酷ASCII播放器，PCB电阻箱，支持1Ω到500KΩ，Pebble智能手表代码重构

周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版 https://www.bilibili.com/video/BV1DEf3YiEqE/ 《安富莱嵌入式周报》第352期：手持开源终端&#x…...

编程日记 2025/8/27 23:42:57

游戏引擎学习第205天

回顾我们今天要实现的是一些实体浏览功能，原本是昨天就计划好的，但因为渲染上的一些问题耽搁了一些时间。实际上，我们遇到的并不是一个真正的bug，尽管我们花了大约40分钟才搞清楚，最终发现它只是渲染方式的一个正常…...

编程日记 2025/8/29 2:57:15

Boost库搜索引擎项目（版本1）

Boost库搜索引擎项目开源地址 Github：https://github.com/H0308/BoostSearchingEngine Gitee：https://gitee.com/EPSDA/BoostSearchingEngine 版本声明当前为最初版本，后续会根据其他内容对当前项目进行修改，具体见后续版本…...

编程日记 2025/8/28 15:06:11

复古千禧Y2风格霓虹发光酸性镀铬金属短片音乐视频文字标题动画AE/PR模板

踏入时光机，重温 21 世纪初大胆、未来主义和超光彩的美学！这是一个动态的 After Effects 模板，旨在重现千禧年的标志性视觉效果——铬反射、霓虹灯发光、闪亮的金属和流畅的动态图形。无论您是在制作时尚宣传片、怀旧音乐视频还是时尚的社交媒…...

编程日记 2025/8/20 0:14:49

如何高效使用 Ubuntu 中文官方网站

Ubuntu 中文官方网站一、快速导航与核心模块首页焦点区顶部菜单栏：快速访问「下载」「文档」「支持」「商店」等核心功能。轮播图区：展示最新版本（如 Ubuntu 24.04 LTS）和特色功能（如 Ubuntu Pro 订阅服务）。搜索框：支持中文关键词搜索（如 "边缘计算"），…...

编程日记 2025/8/28 20:56:32

简单多状态dp问题 + 总结（一）

文章目录按摩师题解代码打家劫舍II题解代码删除并获得点数题解代码粉刷房子题解代码按摩师题目链接题解 1. 细节处理：题目是有没有客人的时候，所有n等于零时返回零 2. 状态表示：到达i位置时的最长预约时长 3. 状态转移方程&#xf…...

编程日记 2025/8/28 0:49:35

2022 CCF CSP-S2.假期计划

题目 4732. 假期计划算法标签: 搜索, 枚举, 贪心思路最多转车 k k k次等价于路线长度小于等于 k 1 k 1 k1, 经过的点没有限制, 注意到点的数量 2500 2500 2500, 因此 n 2 n ^ 2 n2的时间复杂度是可以考虑的, 边的数量 10000 10000 10000, n m n \times m nm时间复杂…...

编程日记 2025/8/29 0:24:00

STM32低功耗模式详解：睡眠、停机、待机模式原理与实践（下） | 零基础入门STM32第九十三步

主题内容教学目的/扩展视频低功耗模式什么是低功耗，模式介绍，切换方法。为电池设备开发做准备。师从洋桃电子，杜洋老师 📑文章目录一、低功耗模式基本工作原理1.1 功耗层级对比1.2 工作流程二、睡眠模式实践2.1 测试程序解析2.…...

编程日记 2025/8/29 1:44:55

【Docker】在Orin Nano上使用Docker

1、安装Docker 1）使用 SDKManager 烧写系统时，选择NVIDIA Container Runtime，将会安装Docker，并将 NVIDIA GPU 暴露给容器中的应用程序，这样可以在Docker中使用GPU等NVIDIA的特性。 2）使用命令安装添加源 distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \…...

编程日记 2025/8/27 4:28:43

C# 程序脱壳，去除强签名StrongNameRemove

由于.net程序的运行机制，利用Reflector，ilspy等反射工具很容易就能看到原代码。很多程序都做了代码混淆，加壳。代码混淆后反编译乱码，不容易理解；加壳使反编译工具不能正常反射，提示无效的程序集。需要做…...

编程日记 2025/8/19 8:57:07

第2课：JSX语法与组件基础

学习目标

一、JSX语法深入

1. 什么是JSX？

2. JSX基础规则

示例代码 (src/JsxDemo.jsx):

3. 在App中使用JsxDemo组件

二、组件Props基础

1. 什么是Props？

创建带Props的组件 (src/Greeting.js):

2. 使用组件并传递Props

三、样式添加方法

1. 内联样式确保 InlineStyleDemo.jsx 文件存在且导出组件：

2. CSS样式表

3. CSS Modules (推荐)

四、实战练习：创建任务卡片组件

1. 创建TaskCard组件

3. 在App中使用

五、练习任务

六、常见问题解答

七、课程总结

课后作业

附加资源

相关文章：

示例代码 (`src/JsxDemo.jsx`):

创建带Props的组件 (`src/Greeting.js`):