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

js 创建 React 项目

news 2026/4/10 10:16:51

起因(目的):

js 很久没写了。
react js 之前粗略看过, 最近又需要用到, 继续学习， 记录 + 积累。

1. 新建 React 项目 的几种方法。

  1. 官方建议使用 next 来创建 React 项目， 但是我觉得太复杂了。以后再看看.

npx create-next-app@latest # !!! 不建议使用：

  1. 我之前用的是,

npx create-react-app small_react_app # app 名称不要包含大写字母

  1. 刚刚看可一个教程，vite 很火，也很快。！！！ 推荐这个 ！！！

npm create vite@latest 或
npm create vite@4.1.0
根据提示，逐步操作
npm install 或 npm i # 安装必要的包。
npm run dev # 运行默认的示例代码

2. 安装 bootstrap， 一个经典的 css 框架

目的是使用 css , 美化页面

npm i bootstrap@5.2.3 # 读法是： boot-strap，就是 鞋带 的意思！

3. 其他临时笔记

  • node -v # 版本最好大于 19
  • .tsx 文件， 是 react 的组件的文件！
  • export default App; // 导出，可以用在别处！
  • hmr: hot module replacement 热加载
  • React 组件必须以大写字母开头
  • 可以使用 <Fragment> 标签来替换 div, 或是直接使用 <> </>
  • markdown 里面， 如果遇到一些特殊的标点符号，需要用 \ 来转义！

相关文章：

js 创建 React 项目

起因(目的): js 很久没写了。 react js 之前粗略看过, 最近又需要用到, 继续学习&#xff0c; 记录 积累。 1. 新建 React 项目 的几种方法。 官方建议使用 next 来创建 React 项目&#xff0c; 但是我觉得太复杂了。以后再看看. npx create-next-applatest # !!! 不建议使…...

编程日记 2024/9/6 1:19:35

WPF 中常用 `Transform` 类的介绍、使用示例和适用场景

WPF 中常用 Transform 类的介绍、使用示例和适用场景 使用场景解释代码示例示例代码解释 Transform 类描述使用示例适用场景TranslateTransform用于沿 X 轴或 Y 轴平移&#xff08;移动&#xff09;元素。xml <TranslateTransform X"50" Y"100" />移…...

编程日记 2024/9/6 1:16:32

ElasticSearch-DSL

查询所有 match_all 分页查询 from size深分页查询 Scroll指定字段排序 sort返回指定字段_sourcematch 短语查询 match_phrase多字段查询 multi_matchquery_string simple_query_string 关键词查询 Term 结构化搜索 前缀查询 prefix通配符查询 wildcard范围查询 range多 id 查…...

编程日记 2024/9/6 1:15:31

Learn ComputeShader 07 Post Processing

这次我们将使用计算机着色器对图像进行后处理。 要进行后处理需要将渲染图像从cpu传递给gpu&#xff0c;并在gpu对图像进行处理然后传回cpu。 首先创建一个后处理基类BasePP 首先声明需要用到的属性。 using System.Collections; using System.Collections.Generic; using …...

编程日记 2024/9/6 1:14:30

初始QT！

作业&#xff1a;了解QT文件夹初始代码的意义 QT core gui #QT工程所需得类库 core是核心库 gui图形化界面相关库类 greaterThan(QT_MAJOR_VERSION, 4): QT widgets #版本超过4.0会加上widgetsCONFIG c11 #该编辑器支持c11后的版本 # The following define makes you…...

编程日记 2024/9/6 1:13:29

全国大学生数据建模比赛——深度学习

全国大学生数学建模比赛中&#xff0c;深度学习可以成为解决复杂问题的有力手段。 一、深度学习的优势在比赛中的体现 强大的模式识别能力&#xff1a;深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;&#xff0…...

编程日记 2024/9/6 1:12:29

Qt技巧（二）-滑动界面，轮询控件，循环操作控件

在Qt界面开发过程中&#xff0c;我们常常要对同类部件&#xff0c;具有同样功能的一系列部件进行操作&#xff0c;比如&#xff1a; 这个页面该怎么设计&#xff0c;中间的几个选项该怎么操作&#xff1f; 我们在主工程中添加一个设计师界面类&#xff0c;类名设置为“BrandF…...

编程日记 2024/9/6 1:11:28

003——单链表

1.链式存储的特点 逻辑&#xff08;通过指针实现&#xff09;上相邻&#xff0c;物理上可相邻可不相邻 2.结点&#xff08;节点都可以&#xff09; 4&#xff08;&8&#xff09; 8&#xff08;&6&#xff09; 6&#xff08;&1&#xff09; 1&#xff08;&…...

编程日记 2024/9/6 1:10:27

XILINX平台下LINUX DMA驱动调研

专栏目录 高质量文章导航-持续更新中-CSDN博客 基础概念 VA：virtual address称为虚拟地址， PA：physical address称为物理地址。 CPU通过地址来访问内存中的单元，如果CPU没有MMU，或者有MMU但没有启动，那么CPU内核在取指令或者访问内存时发出的地址(此时必须是物理地址…...

编程日记 2024/9/6 1:07:24

Oracle数据库安装和配置指南

Oracle数据库是一款功能强大的企业级关系数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛应用于各种规模的企业和组织。其强大的性能和丰富的功能使其成为数据库管理的首选解决方案之一。以下是关于如何安装和配置 Oracle 数据库的详细指南。 一、准备工作 在开…...

编程日记 2024/9/6 1:05:22

制造业中工艺路线（工序）与产线（工作中心）关系

一.工艺路线与生产线是数字孪生中的虚实关系&#xff1a; 1.工艺路线为虚&#xff0c;生产线体为实&#xff1b; 2.工艺路线指导生产线的生产组织&#xff0c;生产线承载工艺路线的能力&#xff0c;把虚拟的生产信息流变成真实的产流。 二.工艺路线与生产线是数字孪生中互为“…...

编程日记 2024/9/6 1:04:21

目标跟踪算法——ByteTrack算法原理解析

文章目录 ByteTrack1. ByteTrack算法步骤&#xff1a;2. 算法解释2.1 模型初始化2.2 模型更新算法流程2.2.1 检测结果划分&#xff0c;划分为高分和较低分段2.2.2 高分段处理手段2.2.3 最优匹配与未匹配划分2.2.4 低分框再匹配2.2.5 未确认轨迹处理2.2.6 更新状态 2.3 匈牙利匹…...

编程日记 2024/9/6 1:01:19

C语言编译的过程

文章目录 1. 预处理&#xff08;Preprocessing&#xff09;2. 编译&#xff08;Compilation&#xff09;3. 汇编&#xff08;Assembly&#xff09;4. 链接&#xff08;Linking&#xff09;总结 c语言通过编译器直接编译成机器语言程序。 C语言程序的编译过程通常分为四个主要步…...

编程日记 2024/9/6 0:59:17

前端面试题——栈与队列、动态路由、链表

栈、队列与链表 Java数据结构栏目总结-CSDN博客 栈&#xff08;Stack&#xff09; 栈是一种后进先出&#xff08;LIFO, Last In First Out&#xff09;的数据结构。它只允许在栈顶进行添加&#xff08;push&#xff09;或删除&#xff08;pop&#xff09;元素的操作。 基本操…...

编程日记 2024/9/6 0:58:16

Java算法之计数排序（Counting Sort）

简介 计数排序是一种线性时间复杂度的排序算法&#xff0c;它不依赖于元素之间的比较&#xff0c;而是通过统计数组中每个元素出现的次数&#xff0c;然后根据这些统计信息对元素进行排序。这种算法特别适用于整数且整数的范围不是非常大时。 算法步骤 找出数组中的最大值。…...

编程日记 2024/9/6 0:57:15

【系统架构设计师-2012年】综合知识-答案及详解

更多内容请见&#xff1a; 备考系统架构设计师-核心总结索引 文章目录 【第1~2题】【第3~4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10~11题】【第12~13题】【第14~19题】【第20~21题】【第22~24题】【第25~26题】【第27~31题】【第32~33题】【第34~36题】【第37…...

编程日记 2024/9/6 0:54:13

webpack4手动搭建Vue项目

小满视频 很多解释使用通义灵码搜的,通义灵码的搜索结果也是有错误的全程使用pnpm包管理工具&#xff0c;和npm的用法基本一样 学习总结 1. 多看看webpack官网 2. webpack的作用&#xff1a;配置一堆东西&#xff0c;达到运行程序的目的 3. 无论什么东西都转成js&#xff0c;…...

编程日记 2024/9/6 0:53:12

Python爬虫所需的技术及其原理（简单易懂）

导言 随着互联网的发展&#xff0c;大量的数据被存储在网络上&#xff0c;而我们需要从中获取有用的信息。Python作为一种功能强大且易于学习的编程语言&#xff0c;被广泛用于网络爬虫的开发。本文将详细介绍Python爬虫所需的技术及其原理&#xff0c;并提供相关的代码案例。…...

编程日记 2024/9/6 0:52:11

FxFactory 8 for Mac 视觉特效插件包安装

Mac分享吧 文章目录 介绍页面效果一、下载软件二、开始安装1、Install安装2、显示软件页面&#xff0c;表示安装成功3、补丁安装 三、注意事项1、若已安装过其他版本&#xff0c;需要使用软件自带的卸载功能进行软件卸载&#xff0c;再安装此版本 安装完成&#xff01;&#x…...

编程日记 2024/9/6 0:49:09

将语义分割的标签转换为实例分割（yolo）的标签

语义分割的标签&#xff08;目标处为255&#xff0c;其余处为0&#xff09; 实例分割的标签&#xff08;yolo.txt&#xff09;,描述边界的多边形顶点的归一化位置 绘制在原图类似蓝色的边框所示。 废话不多说&#xff0c;直接贴代码&#xff1b; import os import cv2 imp…...

编程日记 2024/9/6 0:46:06

AI开发-python-langchain框架（--AI 直接生成并执行 Python 代码 ）妹

指令替换 项目需求&#xff1a;将加法指令替换为减法 项目目录如下 /MyProject ├── CMakeLists.txt # CMake 配置文件 ├── build/ #构建目录 │ └── test.c #测试编译代码 └── mypass2.cpp # pass 项目代码 一&#xff0c;测试代码示例 test.c // test.c #includ…...

编程新知 2026/4/10 9:53:16

Flink技术实践-实时流中的脏数据治理

一、背景介绍在大数据实时计算领域&#xff0c;脏数据就像一颗定时炸弹&#xff0c;随时可能引爆业务系统 —— 轻则导致计算结果错误&#xff0c;重则引发线上故障&#xff0c;影响业务活动。某电商平台因订单金额字段脏数据&#xff08;负数、超大值&#xff09;导致实时销售…...

编程新知 2026/4/10 9:47:10

OpenClaw隐私计算：Phi-3-mini-128k-instruct本地处理加密医疗笔记

OpenClaw隐私计算&#xff1a;Phi-3-mini-128k-instruct本地处理加密医疗笔记 1. 为什么需要本地化医疗数据处理 去年我参与了一个医疗数据分析项目&#xff0c;客户特别强调数据不能离开本地环境。他们需要处理大量患者就诊记录&#xff0c;但传统方式要么需要人工脱敏&…...

编程新知 2026/4/10 9:29:46

集合与树形结构

一、注解说明生成树形结构 1.1 注解 Retention(RetentionPolicy.RUNTIME) Target(ElementType.FIELD) public interface TreeId { }Retention(RetentionPolicy.RUNTIME) Target(ElementType.FIELD) public interface TreeParentId { }1.2 树形节点 Data public class WisDepart…...

编程新知 2026/4/10 5:56:56

# 系列文3：前后端彻底解耦！统一入参解析，前端只发JSON，后端随意

系列文3&#xff1a;前后端彻底解耦&#xff01;统一入参解析&#xff0c;前端只发JSON&#xff0c;后端随意 非科班野生程序员&#xff0c;深耕政务信息化20年&#xff0c;这套自研Java Web框架支撑过省级新农保、全国跨省医保结算等核心民生系统&#xff0c;18年稳定运行至今…...

编程新知 2026/4/10 5:51:46

文脉定序系统Docker容器化部署与ComfyUI工作流集成

文脉定序系统Docker容器化部署与ComfyUI工作流集成 你是不是也遇到过这样的烦恼&#xff1f;手里有一堆文本素材&#xff0c;比如产品描述、用户评论或者文章草稿&#xff0c;想要把它们按照某种逻辑重新排列&#xff0c;让内容读起来更通顺、更有条理。手动整理吧&#xff0c…...

编程新知 2026/4/10 5:27:31

OpenClaw环境迁移：千问3.5-9B配置跨设备同步方案

OpenClaw环境迁移&#xff1a;千问3.5-9B配置跨设备同步方案 1. 为什么需要环境迁移 上周我的主力开发机突然硬盘故障&#xff0c;导致所有OpenClaw配置和千问3.5-9B模型参数丢失。这个意外让我意识到&#xff1a;在本地AI工作流中&#xff0c;环境迁移能力不是锦上添花&…...

编程新知 2026/4/10 5:12:15

wan2.1-vae部署方案：CSDN GPU云+自定义域名+HTTPS反向代理配置

wan2.1-vae部署方案&#xff1a;CSDN GPU云自定义域名HTTPS反向代理配置 1. 平台介绍 muse/wan2.1-vae是基于Qwen-Image-2512模型的AI图像生成平台&#xff0c;能够根据中英文提示词生成高质量、高分辨率的图像。这个平台特别适合需要快速生成专业级图像的用户&#xff0c;无…...

编程新知 2026/4/10 5:12:15

直播运营需要哪些数据分析能力？场观、停留、成交和投流怎么联动分析

直播运营数据分析的核心能力直播运营需要掌握多维度的数据分析能力&#xff0c;以优化直播效果并提升转化率。核心能力包括数据采集、清洗、可视化、建模及解读能力。CDA数据分析师证书的课程体系涵盖了这些核心技能&#xff0c;为从业者提供系统化训练。能力维度具体内容CDA相…...

编程新知 2026/4/10 4:54:12

HTML压缩工具本地运行卡顿怎么办_在线替代或参数优化【说明】

本地HTML压缩卡顿时&#xff0c;可调参降载、换轻量工具、用在线服务、分块处理或禁用IDE校验功能。例如调--collapse-whitespace参数、换rust-html-minifier、分块提取body压缩、关闭VS Code HTML格式化。如果您在本地运行HTML压缩工具时遇到卡顿现象&#xff0c;可能是由于工…...

编程新知 2026/4/10 4:46:11