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

从零开始创建React项目及制作页面

一、React 介绍

React 是一个由 Meta(原Facebook) 开发和维护的 开源JavaScript库,主要用于构建用户界面(User Interface, UI)。它是前端开发中最流行的工具之一,广泛应用于单页应用程序(SPA)和移动端应用开发中。

1. React 核心特点

a. 组件化开发

        React 的 UI 是由一个个小的、可复用的组件构成的,组件可以像积木一样组合在一起,构建出复杂的用户界面。

b. 声明式编程

        React 使用声明式的方式描述 UI。开发者只需要定义组件在不同状态下的样子,React 会自动更新和渲染界面。

c. 虚拟DOM

        React 使用虚拟DOM(Virtual DOM)来提升性能。当状态发生变化时,React 会先更新虚拟DOM,然后计算出最小的变更,再将变更应用到真实DOM中。

d. 单向数据流

        数据在React中是单向流动的(从父组件流向子组件),这使得数据管理更加清晰和可靠。

e. JSX语法

        React 提供了一种类似HTML的语法扩展——JSX,允许开发者在JavaScript中直接编写HTML结构。

2. React 的生态系统

a. React Router:用于处理路由。

b. Redux 或 Context API:用于状态管理。

c. Next.js:基于 React 的服务端渲染(SSR)框架。

d. React Native:用于开发跨平台的移动端应用。

3. React 的优点

a. 高效:通过虚拟DOM优化性能。

b. 灵活:支持与其他库或框架结合使用。

c. 可维护性高:组件化开发使代码结构清晰、易于维护。

d. 社区强大:丰富的社区资源和第三方库支持。

二、开发环境

1. Node.js 和 npm

  • 下载并安装 Node.js(包含 npm)。
  • 验证安装是否成功
    node -v
    npm -v
    

2. 代码编辑器

  •  推荐使用 Visual Studio Code。

 二、创建 React 项目

最简单的方式是使用官方工具 Create React App

1. 创建步骤

  • 打开终端或命令行工具,进入你想创建项目的目录
  • 运行以下命令
npx create-react-app my-app

  • 等待安装完成后,进入项目目录
cd my-app
  • 启动开发服务器
npm start
  • 浏览器会自动打开 http://localhost:3000,显示 React 的默认页面

2. 文件结构说明

my-app/
├── node_modules/       # 项目依赖目录
├── public/             # 静态资源目录
│   ├── favicon.ico     # 浏览器标签图标
│   ├── index.html      # 主 HTML 文件,React 挂载到此文件
│   ├── logo192.png     # 默认 logo 图片 (192x192)
│   ├── logo512.png     # 默认 logo 图片 (512x512)
│   ├── manifest.json   # PWA 配置文件
│   └── robots.txt      # 搜索引擎爬虫配置
├── src/                # 源代码目录
│   ├── App.css         # App 组件的样式文件
│   ├── App.js          # 主组件文件
│   ├── App.test.js     # App 组件的测试文件
│   ├── index.css       # 全局样式文件
│   ├── index.js        # 应用程序的入口文件
│   ├── logo.svg        # 默认 logo 文件 (SVG 格式)
│   ├── reportWebVitals.js # 性能监控文件
│   └── setupTests.js   # 测试环境的配置文件
├── .gitignore          # Git 忽略规则
├── package-lock.json   # 锁定依赖版本的文件
├── package.json        # 项目配置文件
└── README.md           # 项目说明文档

三、创建一个React页面

以下是详细的教程,包括如何创建页面组件、路由配置以及页面样式等

创建 React 页面步骤

1. 创建页面组件

React 中的页面通常是一个独立的组件。你可以在 src 目录下新建一个文件夹(如 pages),用于存放所有页面组件。

  • 在 src 目录下创建一个 pages 文件夹。
  • 在 pages 文件夹中创建一个新的页面组件文件,例如 MyPage.js

示例代码:

import React from 'react';
import './MyPage.css'; // 引入样式文件(可选)const MyPage = () => {return (<div className="my-page"><h1>欢迎来到我的页面</h1><p>这是一个属于自己的页面!</p></div>);
};export default MyPage;

2. 创建样式文件

为页面组件添加样式文件,让页面更美观。

  • 在 pages 文件夹中创建一个样式文件,例如 MyPage.css。

示例代码:

.my-page {text-align: center;background-color: #f0f8ff;padding: 20px;color: #333;
}.my-page h1 {font-size: 2rem;color: #007bff;
}.my-page p {font-size: 1.2rem;margin-top: 10px;
}

3.设置路由

在 React 中,路由是由 react-router-dom 提供的。你需要安装路由库并配置路由规则。

  • 确保安装了 react-router-dom
    npm install react-router-dom
    
  • src 目录下的 App.js 中配置路由.

示例代码:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyPage from './pages/MyPage'; // 引入新页面
import Home from './Home'; // 假设有一个主页组件const App = () => {return (<Router><Routes><Route path="/" element={<Home />} /> {/* 主页 */}<Route path="/my-page" element={<MyPage />} /> {/* 新页面 */}</Routes></Router>);
};export default App;

4. 启动项目并访问页面

  • 启动开发服务器
npm start
  • 在浏览器中访问新页面

主页:http://localhost:3000/

新页面:http://localhost:3000/my-page

5. 可选功能

为了更方便地切换页面,可以添加一个导航栏

代码示例:添加导航栏,在src下创建 Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';const Navbar = () => {return (<nav style={{ padding: '10px', backgroundColor: '#007bff', color: '#fff' }}><Link to="/" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>主页</Link><Link to="/my-page" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>我的页面</Link></nav>);
};export default Navbar;

修改 App.js:

将导航栏添加到页面中

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar'; // 导航栏组件
import MyPage from './pages/MyPage';
import Home from './Home';const App = () => {return (<Router><Navbar /> {/* 导航栏 */}<Routes><Route path="/" element={<Home />} /><Route path="/my-page" element={<MyPage />} /></Routes></Router>);
};export default App;

代码结构:

src/
├── pages/
│   ├── MyPage.js       # 新页面组件
│   └── MyPage.css      # 新页面样式
├── App.js              # 路由配置
├── Navbar.js           # 导航栏组件
├── Home.js             # 主页组件(示例)
└── index.js            # 应用入口

6. 打开页面

至此,可以成功创建属于自己的React页面。

相关文章:

从零开始创建React项目及制作页面

一、React 介绍 React 是一个由 Meta&#xff08;原Facebook&#xff09; 开发和维护的 开源JavaScript库&#xff0c;主要用于构建用户界面&#xff08;User Interface, UI&#xff09;。它是前端开发中最流行的工具之一&#xff0c;广泛应用于单页应用程序&#xff08;SPA&a…...

Unity-编辑器扩展

之前我们关于Unity的讨论都是针对于Unity底层的内容或者是代码层面的东西&#xff0c;这一次我们来专门研究Unity可视化的编辑器&#xff0c;在已有的基础上做一些扩展。 基本功能 首先我们来认识三个文件夹&#xff1a; Editor&#xff0c;Gizmos&#xff0c;Editor Defaul…...

系分论文《论遗产系统演化》

系统分析师论文范文系列 摘要 2022年6月,某金融机构启动核心业务系统的技术升级项目,旨在对其运行超过十年的遗留系统进行演化改造。该系统承担着账户管理、支付结算等关键业务功能,但其技术架构陈旧、扩展性不足,难以适应数字化转型与业务快速增长的需求。作为系统分析师,…...

Django基础(二)Django 项目基础操作

一、实验目标 熟悉 Django 基本命令 理解 Django 项目和应用的目录结构 掌握项目初始化、应用创建与注册、项目启动、视图函数编写、路由配置、数据库配置等基础操作 二、Django 项目初始化 进入虚拟环境 source venv/bin/activate创建 Django 项目 django-admin startproje…...

【图像大模型】Stable Video Diffusion:基于时空扩散模型的视频生成技术深度解析

Stable Video Diffusion&#xff1a;基于时空扩散模型的视频生成技术深度解析 一、架构设计与技术演进1.1 核心模型架构1.2 技术创新点1.2.1 运动预测网络1.2.2 层级式训练策略 二、系统架构解析2.1 完整生成流程2.2 性能指标对比 三、实战部署指南3.1 环境配置3.2 基础推理代码…...

【免杀】C2免杀技术(七)远程线程注入

远程线程注入&#xff08;Remote Thread Injection&#xff09;是一种常见的进程注入技术&#xff0c;经常用于红队渗透、恶意软件加载、持久化控制等场景中&#xff0c;尤其在免杀&#xff08;AV/EDR bypass&#xff09;应用领域中&#xff0c;是一种历史悠久但依然有效的手段…...

二、【环境搭建篇】:Django 和 Vue3 开发环境准备

【环境搭建篇】&#xff1a;Django 和 Vue3 开发环境准备 前言为什么我们需要特定的开发环境&#xff1f;准备工作第一步&#xff1a;搭建后端开发环境 (Python, Django, DRF)1. 安装 Python2. 创建和激活 Python 虚拟环境3. 在虚拟环境中安装 Django 和 DRF 第二步&#xff1a…...

【神经网络与深度学习】激活函数的可微可导

引言&#xff1a; 在深度学习领域&#xff0c;激活函数扮演着至关重要的角色。它不仅影响神经网络的非线性建模能力&#xff0c;还直接关系到梯度计算的稳定性。在优化过程中&#xff0c;我们通常要求激活函数具有良好的数学性质&#xff0c;其中可微性是一个关键条件。相比简单…...

【Tauri2】046—— tauri_plugin_clipboard_manager(一)

目录 前言 正文 安装 Rust中的使用 对文字的操作 看看write_text的函数签名 看看read_text的函数签名 对图像的操作 对html的操作 总结 前言 这篇就来看看clipboard这个插件。 参考如下 Clipboard | Taurihttps://tauri.app/plugin/clipboard/ 正文 安装 执行下…...

高效选课系统:一键管理你的课程表

选课流程 数据模型 我的课程表Controller Api(value "我的课程表接口", tags "我的课程表接口") Slf4j RestController public class MyCourseTablesController {Autowiredprivate MyCourseTablesService myCourseTablesService;ApiOperation("添加…...

Pytorch分布式训练,数据并行,单机多卡,多机多卡

分布式训练 所有代码可以见我github 仓库&#xff1a;https://github.com/xiejialong/ddp_learning.git 数据并行&#xff08;Data Parallelism&#xff0c;DP&#xff09; 跨多个gpu训练模型的最简单方法是使用 torch.nn.DataParallel. 在这种方法中&#xff0c;模型被复制…...

Secarmy Village: Grayhat Conference靶场

Secarmy Village: Grayhat Conference 来自 <Secarmy Village: Grayhat Conference ~ VulnHub> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182&#xff0c;靶…...

centos 9 Kickstart + Ansible自动化部署 —— 筑梦之路

目标 利用 Kickstart 完成 centos 9 系统的全自动安装&#xff08;裸金属/虚拟机&#xff09;。 安装完成后自动接入 Ansible 进行软件包、服务、用户、配置等系统初始化操作。 实现一套通用、可重复、可维护的自动化交付流程。 KS文件 # ks.cfg 示例 install lang zh_CN.…...

HarmonyOS应用开发入门宝典——项目驱动学习法实践

学习一项新技能&#xff0c;最好也是最快的方法就是动手实战。学习鸿蒙也一样&#xff0c;给自己定一个小目标&#xff0c;直接找项目练&#xff0c;这样进步是最快的。记住&#xff0c;最好的学习时机永远是现在&#xff0c;最好的老师永远是你正在开发的项目。 一、为什么选择…...

Python类的力量:第六篇:设计模式——Python面向对象编程的“架构蓝图”

文章目录 前言&#xff1a;从“代码堆砌”到“模式复用”的思维跃迁 一、创建型模式&#xff1a;对象创建的“智能工厂”1. 单例模式&#xff08;Singleton&#xff09;&#xff1a;全局唯一的“资源管家”2. 工厂模式&#xff08;Factory&#xff09;&#xff1a;对象创建的“…...

第50天-使用Python+Qt+DeepSeek开发AI运势测算

1. 环境准备 bash 复制 下载 pip install pyside6 requests python-dotenv 2. 获取DeepSeek API密钥 访问DeepSeek官网注册账号 进入控制台创建API密钥 在项目根目录创建.env文件: env 复制 下载 DEEPSEEK_API_KEY=your_api_key_here 3. 创建主应用框架 python 复制…...

CentOS系统上挂载磁盘

在CentOS系统上挂载磁盘&#xff0c;主要包括查看磁盘设备、分区&#xff08;若需要&#xff09;、格式化、创建挂载点和挂载等步骤&#xff0c;以下是详细操作&#xff1a; 1. 查看磁盘设备 使用fdisk -l或lsblk命令查看系统识别到的磁盘设备。 fdisk -l&#xff1a;列出所…...

(一) 本地hadoop虚拟机系统设置

1.配置固定IP地址&#xff08;每一台都配置&#xff09; 开启node1&#xff0c;修改主机名为node1&#xff0c;并修改固定IP为&#xff1a;192.168.88.131 # 修改主机名 hostnamectl set-hostname node1# 修改IP vim /etc/sysconfig/network-scripts/ifcfg-ens33 IPADDR"…...

亿级核心表如何优雅扩展字段

1 导语 亿级数据的核心表新增一个字段&#xff0c;远不止一句简单的“ALTER TABLE”&#xff0c;锁表风险、页分裂、索引性能衰减……每一个问题都可能引发线上事故。如何在不影响业务的前提下&#xff0c;只需简单的配置&#xff0c;即可实现字段的动态扩展&#xff1f;本文将…...

单端传输通道也会有奇偶模现象喔

奇模&#xff08;Odd mode&#xff09;与偶模&#xff08;Even mode&#xff09;对差动对是很关键的要素&#xff0c;其会影响奇/偶模阻抗与相位速度&#xff0c;设计不良甚会让共模噪声引入整个差动对使讯号质量下降。 然而对单端信号系统而言呢&#xff1f; 如果说一对side b…...

VUE3 中的 ResizeObserver 警告彻底解决方案

问题背景 今天在使用 Vue 3 Ant Design Vue 开发后台管理系统时&#xff0c;在页面频繁触发 元素尺寸变化&#xff08;如表格滚动、窗口缩放&#xff09; 的时候&#xff0c;控制台频繁出现如下警告&#xff1a; ResizeObserver loop completed with undelivered notificati…...

IDEA2025版本使用Big Data Tools连接Linux上Hadoop的HDFS

目录 Windows的准备 1. 将与Linux上版本相同的hadoop压缩包解压到本地 ​编辑2.设置$HADOOP HOME环境变量指向:E:\hadoop-3.3.4 3.下载hadoop.dll和winutils.exe文件 4.将hadoop.dll和winutils.exe放入$HADOOP HOME/bin中 IDEA中操作 1.下载Big Data Tools插件 2.添加并连…...

Gas优化利器:Merkle 树如何助力链上数据效率革命

目录 前言原理Merkle树示意图实战演示:构建 Merkle 树并在合约中验证离线构建 Merkle 树(手动计算Merkle树、生成mermaid示意图)编写Merkle.js脚本执行Merkle.js脚本执行结果展示mermaid流程图展示离线构建 Merkle 树(merkletreejs计算Merkle树、验证哈希路径)编写Merkle.…...

R语言空间分析实战:地理加权回归联合主成份与判别分析破解空间异质性难题

在自然和社会科学领域有大量与地理或空间有关的数据&#xff0c;这一类数据一般具有严重的空间异质性&#xff0c;而通常的统计学方法并不能处理空间异质性&#xff0c;因而对此类型的数据无能为力。以地理加权回归为基础的一系列方法&#xff1a;经典地理加权回归&#xff0c;…...

kafka入门(二)

Java客户端访问Kafka 引入maven依赖 <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka‐clients</artifactId> <version>2.4.1</version> </dependency> 消息发送端代码 package com.tuling.kafka.ka…...

学习日记-day11-5.20

完成目标&#xff1a; comment.java package com.zcr.pojo; import org.hibernate.annotations.GenericGenerator;import javax.persistence.*; //JPA操作表中数据&#xff0c;可以将对应的实体类映射到一张表上Entity(name "t_comment")//表示当前的实体类与哪张表…...

手淘不易被清洗销量的4个成交入口

在淘宝运营中&#xff0c;销量是店铺权重的重要指标之一&#xff0c;但平台对虚假交易的打击力度越来越大&#xff0c;许多商家因销量被清洗而损失惨重。那么&#xff0c;通过什么样的手淘成交入口稳定不易清洗呢&#xff1f;经过实测&#xff0c;我们总结了以下手淘4个不易被清…...

【Linux】Linux 多线程

目录 1. Linux线程概念2. 重谈进程地址空间---页表2.1 如何由虚拟地址转化为物理地址的 3. pthread库调用接口3.1 线程的创建---pthread_create3.2 线程等待---pthread_join3.3 线程的退出3.4 分离线程 4. 线程库5. 线程ID6. Linux线程互斥6.1 锁6.2 锁的接口6.2.1 互斥量的初始…...

DAY31

知识点回顾 规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 作业&#xff1a;尝试针对之前的心脏病项目&#xff0c;准备拆分的项目文件&#xff0c;思考下哪些部分可以未来复用。 浙大疏锦行...

大模型应用开发“扫盲”——基于市场某款智能问数产品的技术架构进行解析与学习

本文将从一款问数产品相关技术架构&#xff0c;针对大模型应用开发中的基础知识进行“扫盲”式科普&#xff0c;文章比较适合新手小白&#xff0c;属于是我的学习笔记整理&#xff0c;大佬可以划走啦~产品关键信息已经进行模糊处理&#xff0c;如有侵权请联系删除。 文章目录 前…...

List优雅分组

一、前言 最近小永哥发现&#xff0c;在开发过程中&#xff0c;经常会遇到需要对list进行分组&#xff0c;就是假如有一个RecordTest对象集合&#xff0c;RecordTest对象都有一个type的属性&#xff0c;需要将这个集合按type属性进行分组&#xff0c;转换为一个以type为key&…...

打破建筑与制造数据壁垒:Revit 到 STP 格式转换全攻略(含插件应用 + 迪威模型实战)

引言 在建筑信息模型&#xff08;BIM&#xff09;与计算机辅助设计&#xff08;CAD&#xff09;领域&#xff0c;数据在不同软件和系统间的高效流转至关重要。Revit 作为 BIM 技术应用的主流软件&#xff0c;常用于建筑设计、施工和运维管理&#xff1b;而 STP&#xff08;STE…...

RISC-V 开发板 MUSE Pi Pro USB 测试(3.0 U盘,2.0 UVC摄像头)

视频讲解&#xff1a; RISC-V 开发板 MUSE Pi Pro USB 测试&#xff08;3.0 U盘&#xff0c;2.0 UVC摄像头&#xff09; 总共开发板有4个USB的A口&#xff0c;1个USB的TypeC口&#xff0c;我们插上两个USB3.0的U盘和一个USB2.0的UVC摄像头来进行测试 lsusb -tv 可以看到有3个US…...

驱动相关基础

一、驱动分类与区别 字符设备驱动 一个字节一个字节进行读写操作的设备&#xff0c;以字符流的形式进行数据传输&#xff08;如鼠标、键盘、串口&#xff09;。 块设备驱动 以块为单位进行读写操作的设备&#xff0c;块的大小通常为 512 字节、1024 字节。 块设备驱动主…...

【node.js】核心进阶

个人主页&#xff1a;Guiat 归属专栏&#xff1a;node.js 文章目录 1. Node.js高级异步编程1.1 Promise深入理解1.1.1 创建和使用Promise1.1.2 Promise组合模式 1.2 Async/Await高级模式1.2.1 基本使用1.2.2 并行执行1.2.3 顺序执行与错误处理 1.3 事件循环高级概念1.3.1 事件循…...

高频Java面试题深度拆解:String/StringBuilder/StringBuffer三剑客对决(万字长文预警)

文章目录 一、这道题的隐藏考点你Get到了吗&#xff1f;二、内存模型里的暗战&#xff08;图解警告&#xff09;2.1 String的不可变性之谜2.2 可变双雄的内存游戏 三、线程安全背后的修罗场3.1 StringBuffer的同步真相3.2 StringBuilder的裸奔哲学 四、性能对决&#xff1a;用数…...

量子计算的曙光:从理论奇点到 IT 世界的颠覆力量

在信息技术&#xff08;IT&#xff09;的飞速发展中&#xff0c;一项前沿技术正以耀眼的光芒照亮未来——量子计算&#xff08;Quantum Computing&#xff09;。2025 年&#xff0c;随着量子硬件的突破、算法的优化以及企业对超算能力的渴求&#xff0c;量子计算从科幻梦想逐步…...

c++使用protocol buffers

在 C 里使用 Protocol Buffer&#xff0c;要先定义消息结构&#xff0c;接着生成 C 代码&#xff0c;最后在程序里使用这些生成的代码。 定义消息结构 首先要创建一个.proto文件&#xff0c;在其中定义消息类型和字段。 // person.proto syntax "proto3"; // 指…...

AI驱动发展——高能受邀参加华为2025广东新质生产力创新峰会

当AI浪潮席卷全球产业版图&#xff0c;一场以"智变"驱动"质变"的变革正在发生。5月15日&#xff0c;华为中国行2025广东新质生产力创新峰会璀璨启幕&#xff0c;作为华为生态战略合作伙伴&#xff0c;高能计算机与行业领军者同台论道&#xff0c;共同解码A…...

怎样解决photoshop闪退问题

检查系统资源&#xff1a;在启动 Photoshop 之前&#xff0c;打开任务管理器检查 CPU 和内存的使用情况。如果发现资源占用过高&#xff0c;尝试关闭不必要的程序或重启计算机以释放资源。更新 Photoshop 版本&#xff1a;确保 Photoshop 是最新版本。Adobe 经常发布更新以修复…...

AWS CodePipeline+ Elastic Beanstalk(AWS中国云CI/CD)

问题 最近需要利用AWS云上面的CI/CD部署Spring应用。 一图胜千言 步骤 打开CodePipeline网页&#xff0c;开始管道创建&#xff0c;如下图&#xff1a; 管道设置&#xff0c;如下图&#xff1a; 这里主要设置管道名称&#xff0c;至于服务角色&#xff0c;直接让codepipel…...

人工智能核心知识:AI Agent 的四种关键设计模式

人工智能核心知识&#xff1a;AI Agent 的四种关键设计模式 一、引言 在人工智能领域&#xff0c;AI Agent&#xff08;人工智能代理&#xff09;是实现智能行为和决策的核心实体。它能够感知环境、做出决策并采取行动以完成特定任务。为了设计高效、灵活且适应性强的 AI Age…...

Electron+vite+vue3 从0到1搭建项目,开发Win、Mac客户端

随着前端技术的发展&#xff0c;出现了所谓的大前端。 大前端则是指基于前端技术延伸出来的各种终端平台及应用场景&#xff0c;包括APP、桌面端、手表终端、服务端等。 本篇文章主要是和大家一起学习一下使用Electron 如何打包出 Windows 和 Mac 所使用的客户端APP&#xff…...

GitLab部署

学git Git最新最新详细教程、安装&#xff08;从入门到精通&#xff01;&#xff01;&#xff01;&#xff01;企业级实战&#xff01;&#xff01;&#xff01;工作必备&#xff01;&#xff01;&#xff01;结合IDEA、Github、Gitee实战&#xff01;&#xff01;&#xff01…...

基于R语言地理加权回归、主成份分析、判别分析等空间异质性数据分析技术

在自然和社会科学领域&#xff0c;存在大量与地理或空间相关的数据&#xff0c;这些数据通常具有显著的空间异质性。传统的统计学方法在处理这类数据时往往力不从心。基于R语言的一系列空间异质性数据分析方法&#xff0c;如地理加权回归&#xff08;GWR&#xff09;、地理加权…...

指针深入理解(二)

volatile关键字 防止优化指向内存地址&#xff0c; typedef 指针可以指向C语言所有资源 typedef 就是起一个外号。 指针运算符加减标签操作 指针加的是地址&#xff0c;并且增加的是该指针类型的一个单位&#xff0c;指针变量的步长可以用sizeof(p[0]) 这两个的p1是不一样…...

django回忆录(Python的一些基本概念, pycharm和Anaconda的配置, 以及配合MySQL实现基础功能, 适合初学者了解)

django 说实在的, 如果是有些Python基础或者编程基础, 使用django开发本地网站的速度还是很快的, 特别是配合ai进行使用. 本人使用该框架作业的一个主要原因就是因为要做数据库大作业, 哥们想速通, 结果由于我一开始没有接触过这些方面的知识, 其实也不算快, 而且现在我也没有…...

leetcode hot100刷题日记——5.无重复字符的最长字串

解答&#xff1a;滑动窗口思想&#xff08;见官方题解&#xff09; //方法1 class Solution { public:int lengthOfLongestSubstring(string s) {//哈希表记录是否有重复字符unordered_set<char>c;int maxlength0;int ns.size();//右指针初始化为-1&#xff0c;可以假设…...

一文讲清python、anaconda的安装以及pycharm创建工程

软件下载 Pycharm下载地址&#xff1a; https://download-cdn.jetbrains.com.cn/python/pycharm-community-2024.1.1.exe?_gl1*1xfh3l8*_gcl_au*MTg1NjU2NjA0OC4xNzQ3MTg3Mzg1*FPAU*MTg1NjU2NjA0OC4xNzQ3MTg3Mzg1*_ga*MTA2NzE5ODc1NS4xNzI1MzM0Mjc2*_ga_9J976DJZ68*czE3NDczMD…...

[每日一题] 3355. 零数组变换 i

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 3355. 零数组变换 I - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述 给定一个长度为 n 的整数数组 nums 和一个二维数组 queries&#xff0c;其中 queries[i] [li, ri]。…...