创建React项目

使用 create-react-app快速搭建开发环境

create-react-app 是一个快速创建React开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用。

安装npx

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具,npm5.2以上版本开始支持npx命令,请确保你的npm版本大于5.2。使用npm命令安装:

npm install -g npx

可以使用 npx -v 检查版本信息

命令创建项目

npx create-react-app react-basic

1.npx Node.js工具命令,查找并执行后续的包命令
2.create-react-app 核心包(固定写法),用于创建React项目
3.react-basic React项目的名称(可以自定义)

启动

进入项目目录:cd react-basic
启动项目:npm start
在这里插入图片描述

删除多余文件和代码

创建好项目,只保留两个文件 App.js、index.js 即可
在这里插入图片描述

index.js 删除掉多余内容,只保留以下内容
// 整个项目入口 从这里开始运行// React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';// 导入项目的根组件
import App from './App';// 把App根组件渲染道 id 为 root 的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
App.js 删除掉多余内容只保留以下内容
//项目根组件function App() {return (<div className="App">this is app</div>);
}export default App;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring 泛型依赖注入

Spring 泛型依赖注入&#xff0c;是利用泛型的优点对代码时行精简&#xff0c;将可重复使用的代码全部放到一个类之中&#xff0c;方便以后的维护和修改&#xff0c;同时在不增加代码的情况下增加代码的复用性。 示例代码&#xff1a; 创建实体类 Product package test.spri…

Windows安装Visual Studio Code(VS Code) (配图超详细!)

一、下载 官方网站&#xff1a;https://code.visualstudio.com/download 二、安装 1、安装之前先在目的安装路径中新建文件夹存放待会要安装的程序&#xff08;因为在安装过程中选择安装路径时无法现场新建文件夹&#xff09;。 2、在下载目录中找到安装包并双击运行&#xf…

Linux - Shell 以及 权限问题

目录 Shell的运行原理 Linux权限问题 Linux权限的概念 如何实现用户账号之间的切换 如何仅提升当前指令的权限 如何将普通用户添加到信任列表 Linux权限管理 文件访问者的分类&#xff08;人&#xff09; 文件类型和访问权限&#xff08;事物属性&#xff09; 文件权限值的表…

Keycloak SSO 如何验证已添加的 SPN 是否生效

使用 Kerberos Ticket 验证&#xff1a; 在客户端计算机上&#xff0c;运行以下命令以获取 Kerberos Ticket&#xff1a; klist检查是否存在与 HTTP/yourdomain.com 相关的票证。如果存在&#xff0c;说明 SPN 已生效。 测试应用程序&#xff1a; 使用具有 HTTP/yourdomain.com…

H5实现第三方分享功能,(WhatsApp,Facebook,Messenger,Instagram,Telegram,Zalo,Twitter/X)

1. H5实现第三方分享功能 1. WhatsApp 分享 https://api.whatsapp.com/send/?phone&app_absent0&text${codeUrl}2. Facebook 分享 https://www.facebook.com/sharer/sharer.php?u${codeUrl}3. Messenger 分享 https://www.messenger.com/?${codeUrl}4. Instagra…

RFID电子锁物流货运锁控解决方案

一、物流货运行业现状与痛点 货物安全问题&#xff1a;货物在运输过程中存在被盗、损坏的风险&#xff0c;尤其在长途运输和多式联运中。 运输效率低下&#xff1a;传统的锁控方式依赖人工检查&#xff0c;效率低下&#xff0c;且容易出错。 管理成本高昂&#xff1a;物理钥…

RouteLLM:高效LLM路由框架,可以动态选择优化成本与响应质量的平衡

该论文提出了一个新的框架&#xff0c;用于在强模型和弱模型之间进行查询路由选择。通过学习用户偏好数据&#xff0c;预测强模型获胜的概率&#xff0c;并根据成本阈值来决定使用哪种模型处理查询 。该研究主要应用于大规模语言模型&#xff08;LLMs&#xff09;的实际部署中&…

ip地址多长时间自动更换一次

IP地址自动更换的时间不是固定的&#xff0c;它取决于多个因素。 首先&#xff0c;如果日常使用的WiFi或有线网络的IP地址是动态的。这意味着&#xff0c;例如&#xff0c;当路由器的默认设置是7天或14天自动重启一次时&#xff0c;IP地址就会改变。此外&#xff0c;公共场所的…

NLP入门——前馈词袋分类模型的搭建、训练与预测

模型的搭建 线性层 >>> import torch >>> from torch import nn >>> class DBG(nn.Module): ... def forward(self,x): ... print(x.size()) ... return x ... >>> tmod nn.Sequential(nn.Linear(3,4),DB…

C语言实战 | Flappy Bird游戏

Flappy Bird游戏是由一名越南游戏制作者独自开发的&#xff0c;曾经风靡全球。游戏规则非常简单&#xff0c;玩家必须控制一只小鸟&#xff0c;跨越由各种长度的水管所组成的障碍物&#xff0c;如果撞上管道游戏就结束&#xff0c;如图11.11所示。 ■ 图11.11Flappy Bird 游戏 …

使用AES加密数据传输的iOS客户端实现方案

在现代应用开发中&#xff0c;确保数据传输的安全性是至关重要的。本文将介绍如何在iOS客户端中使用AES加密数据传输&#xff0c;并与服务器端保持加密解密的一致性。本文不会包含服务器端代码&#xff0c;但会解释其实现原理。 加密与解密的基本原理 AES&#xff08;Advance…

Mysql8.0.36 Centos8环境安装

下载安装包 官网地址&#xff1a;MySQL :: Download MySQL Community Server (Archived Versions) 可以直接下载后再传到服务器&#xff0c;也可以在服务器采用wget下载。如下&#xff1a; wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.36-linux-glib…

【单片机毕业设计选题24047】-基于阿里云的工地环境监测系统

系统功能: 基于STM32完成 主机&#xff08;阿里云以及oled屏显示位置一&#xff09;&#xff1a;烟雾检测&#xff0c;温湿度检测&#xff0c;噪声检测&#xff0c;且用OLED屏显示&#xff0c;设置阈值&#xff0c;超过报警&#xff08;蜂鸣器&#xff09;。 从机&#xff0…

(四)共享模型之内存

本章内容 上一章讲解的 Monitor 主要关注的是访问共享变量时&#xff0c;保证临界区代码的原子性 这一章我们进一步深入学习共享变量在多线程间的【可见性】问题与多条指令执行时的【有序性】问题 Java 内存模型 JMM 即 Java Memory Model&#xff0c;它定义了主存、工作内存…

firewalld(3)zone配置

简介 前面文章我们已经介绍了firewalld的安装&#xff0c;配置文件介绍、简单的规则查询&#xff0c;本篇文章主要介绍zone的配置。前面我们介绍了firewalld默认的zone和不同zone的功能&#xff0c;下面我们就直接进入zone的具体配置使用。 配置zone的方式 图形配置工具…

浅析基于量子成像的下一代甚高灵敏度图像传感器技术

高灵敏度探测成像是空间遥感应用中的一个重要技术领域&#xff0c;如全天时对地观测、空间暗弱目标跟踪识别等应用&#xff0c;对于甚高灵敏度图像传感器的需求日益强烈。随着固态图像传感器技术水平的不断提高&#xff0c;尤其背照式及埋沟道等工艺的突破&#xff0c;使得固态…

马拉松报名小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;赛事信息管理&#xff0c;赛事报名管理&#xff0c;活动商城管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;赛事信息&…

手动访问mongo和ES插入和查询

1、手动访问mongo 1.1、mongo连接数据库 1.2、mongo插入和查询 db.hmf_test.insert( { "aoeId": "1", "aoeAes": "吴秀梅", "aoeSm4": "北京xx网络技术有限公司.", "aoeSm4_a": "…

2pc 3pc

2pc&3pc问题 本质&#xff1a; 2pcTM超时机制 3pc加入事务询问机制RM超时机制 事务询问机制&#xff1a;减少阻塞 RM超时机制&#xff1a;避免死锁 2pc 3pc 参考&#xff1a; https://juejin.im/post/5aa3c7736fb9a028bb189bca#heading-1 https://blog.csdn.net/xj1…

Spring Boot 文件上传和下载指南:从基础到进阶

文章目录 引言1. 环境配置2. 文件上传2.1 配置文件上传路径2.2 创建上传服务2.3 创建上传控制器 3. 文件下载3.1 创建下载服务3.2 创建下载控制器 4. 前端页面4.1 文件上传页面4.2 文件下载页面 5. 技术分析结论 &#x1f389;欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o …