react的创建与书写

一:创建项目

超全面详细一条龙教程!从零搭建React项目全家桶(上篇) - 知乎

   1.创建一个文件夹,shift+鼠标右键选择在此处打开powershell

   2.为了加速npm下载速度,先把npm设置为淘宝镜像地址。 

npm config set registry http://registry.npm.taobao.org/

   3.执行下面的npm安装react,那么基础的项目就搭建好了

npx create-react-app react-app

    4.使用下列npm运行项目

run start

二:精简项目

删除例如App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件,

保留核心index.js、App.js;优化成下图

 app.js内容替换为

export default function App() {return <div>hello!</div>;
}

index.js替换为

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

index.html替换为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using createreact-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

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

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

相关文章

黄色校正电容102j100

1. 普通电容主要用于交流回路中的信号耦合或滤波。它们通常没有极性&#xff0c;容量较小&#xff0c;通常在几百皮法拉范围内。普通电容在电路中用于信号耦合或直流电路的电源滤波&#xff0c;而电解电容一般用于直流电路&#xff0c;容量较大&#xff0c;从几微法到数千微法…

DApp开发:定制化解决方案与源码部署的一站式指南

去中心化应用&#xff08;DApp&#xff09;随着区块链技术的发展&#xff0c;成为众多行业探索与创新的重要方向。无论是金融、供应链、游戏&#xff0c;还是社交和艺术市场&#xff0c;DApp都为传统业务模式带来了全新可能。然而&#xff0c;开发一款DApp并非易事&#xff0c;…

单元测试、集成测试、系统测试有什么区别

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 单元测试、集成测试、系统测试有什么区别 1、粒度不同 集成测试bai粒度居中&#xff0c;单元测试粒度最小&#xff0c;系统du测试粒度最大。 2、测试方式不同…

学Linux的第八天

目录 管理进程 概念 程序、进程、线程 进程分类 查看进程 ps命令 unix 风格 bsd风格 GNU风格 top命令 格式 统计信息区 进程信息区&#xff1a;显示了每个进程的运行状态 kill命令 作用 格式 管理进程 概念 程序、进程、线程 程序&#xff1a; 二进制文件&…

Xshell,Shell的相关介绍与Linux中的权限问题

目录 XShell的介绍 Shell的运行原理 Linux当中的权限问题 Linux权限的概念 Linux权限管理 文件访问者的分类&#xff08;人&#xff09; 文件类型和访问权限&#xff08;事物属性&#xff09; 文件权限值的表示方法 文件访问权限的相关设置方法 如何改变文件的访问权…

RS®SZM 倍频器

_XLT_ R&SSZM 倍频器 R&SSZM 系列倍频器在 50 GHz 至 170 GHz 的频率范围内具有简便的操作性和精确的输出电平。它们可用于多种应用&#xff0c;例如在汽车领域使用测距雷达&#xff0c;在天文学中使用精密望远镜&#xff0c;在雷达干涉测量中用于分析地球表面。 特…

Unity3D学习FPS游戏(11)敌人AI巡逻(NavMesh)

前言&#xff1a;前面两篇博客已经实现了简单的敌人&#xff0c;但是呢&#xff0c;这样很无趣。因为敌人只会站在原地被攻击&#xff0c;所以本篇我们将实现敌人AI巡逻&#xff0c;让敌人动起来。 敌人AI巡逻 场景丰富一下导航网格NavMesh构建导航网格导航网格优化玩家被当作…

去地面算法——depth_clustering算法调试(1)

1 源码下载 论文&#xff1a; 《2016-Fast Range Image-Based Segmentation of Sparse 3D Laser Scans for Online Operation》 《2017-Efficient Online Segmentation for Sparse 3D Laser Scans》 代码&#xff1a;git链接 2 问题记录 2.1 无法找到qt问题 问题截图&…

NUXT3学习日记一(在我git中拉取代码、文件讲解)

Nuxt 3 是一个基于 Vue 3 的现代框架&#xff0c;用于构建服务器端渲染&#xff08;SSR&#xff09;和静态生成的应用程序。它提供了一种简化的方式来创建高性能的 Vue 应用&#xff0c;具有许多强大的功能和优点。以下是 Nuxt 3 的一些主要应用和优点&#xff1a; 一、应用场…

vue3项目中内嵌vuepress工程两种实现方式

目录 一、示例二、创建vuepress工程三、配置vue项目的打包命令四、 通过iframe嵌套实现过程五、 将vue项目打包&#xff0c;启本地服务运行index.html 一、示例 vue项目&#xff0c;点击用户手册按钮&#xff0c;通过a标签跳转到vuepress框架搭建的页面。点击后者通过路由跳转…

简述 synchronized 和 java.util.concurrent.locks.Lock 的异同?

大家好&#xff0c;我是锋哥。今天分享关于【简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f;】面试题。希望对大家有帮助&#xff1b; 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f; 在Java编程中&#xff0c;synchro…

centos7上安装mysql

1.现查看虚拟机上有没有wget包&#xff0c;如果没有的话进行安装 yum install -y wget 2.进入MySQL :: Download MySQL Yum Repository下载mysql安装源 找到与linux相应的版本&#xff0c;复制地址&#xff0c;如果找不到地址&#xff0c;可以复制如下 3.下载mysql官方yum源 …

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表&#xff0c;内存访问时间为2ns&#xff0c;检索快表时间为0.5ns&#xff0c;快表命中率为80%&#xff0c;求有效访问时间 -分析&#xff1a;首先访问缓存&#xff08;快表&#xff09;&#xff0c;如果没有找到访问内存&#xff08;页表&…

PHP搭建开发环境(Windows系统)

要搭建一个完整的PHP动态网站&#xff0c;离不开操作系统、Web服务器、数据库、和PHP软件。 虽然有不错方便的方式&#xff0c;比如使用phpstudio等等等等许多面板都是非常快速不错的方式&#xff0c;但是这里是教会大家如何配置而不只是依赖别人整合好的面板软件&#xff0c;…

开源 2 + 1 链动模式、AI 智能名片、S2B2C 商城小程序在用户留存与品牌发展中的应用研究

摘要&#xff1a;本文以企业和个人品牌发展中至关重要的用户留存问题为切入点&#xff0c;结合管理大师彼得德鲁克对于企业兴旺发达的观点&#xff0c;阐述了用户留存对品牌营收的关键意义。在此基础上&#xff0c;深入分析开源 2 1 链动模式、AI 智能名片、S2B2C 商城小程序在…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类&#xff0c;内容如下&#xff1a; Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

「数据要素」行业简报|2024.11.上刊

纵观数据要素行业动态&#xff0c;洞察行业风向&#xff0c;把握行业脉搏&#xff01; 一、政策发布 1、《山东省公共数据资源登记管理工作规范(试行)》公开征求意见 11月7日&#xff0c;为认真贯彻落实《中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见》《…

什么是RAG? LangChain的RAG实践!

1. 什么是RAG RAG的概念最先在2020年由Facebook的研究人员在论文《Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks》中提出来。在这篇论文中他们提出了两种记忆类型&#xff1a; 基于预训练模型&#xff08;当时LLM的概念不像现在这么如日中天&#xff0…

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先&#xff0c;确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板&#xff1a; npm init vitelatest进入项目目录 创建完成后&#xff0c;进入项目目录&#xff1a; cd vue3-demo启动…

nginx部署H5端程序与PC端进行区分及代理多个项目及H5内页面刷新出现404问题。

在项目中会碰见需要在nginx代理多个项目&#xff0c;如果在加上uniapp开发的H5端的项目&#xff0c;你还要在nginx中区分PC端和手机H5端&#xff0c;这就会让人很头大&#xff01;网上大部分的资料都是采用在nginx的conf配置文件中添加区分pc和手机端的变量例如&#xff1a;set…