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.mzph.cn/pingmian/59811.shtml

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

相关文章

量化交易系统开发-实时行情自动化交易-数据源选择

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 关于数据采集方面&#xff0c;首先聊聊…

【微信小游戏学习心得】

这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介 本人通过学习了解微信小游戏&#xff0c;学习微信小游戏&#xff0c;加深了对前端框架&#xff0c;vue和react基于数据驱动视图的理解&#xff0c;及浏览器文档模型和javaScript之间的关…

【C++】【算法基础】第k个数(分治法)

第k个数 题目 在一个长度为 n n n的整数数列中找到第 k k k大的数。 题解 核心思想同快速排序&#xff08;实际就是快速排序加一个第 k k k大的数会在哪边的判定条件&#xff09;&#xff1a; #include<iostream> using namespace std;int quickSelect(int *a, int …

TVM计算图分割--LayerGroup

文章目录 介绍Layergroup调研TVM中的LayergroupTVM Layergroup进一步优化MergeCompilerRegions处理菱形结构TVM中基于Pattern得到的子图TPUMLIR地平线的Layergroup介绍 Layergroup目前没找到严格、明确的定义,因为不同厂家的框架考虑的因素不同,但是基本逻辑是差不多的。一般…

深究JS底层原理

一、JS中八种数据类型判断方法 在JavaScript中&#xff0c;数据类型分为两大类&#xff1a;基本&#xff08;原始&#xff09;数据类型和引用&#xff08;对象&#xff09;数据类型。 基本数据类型&#xff08;Primitive Data Types&#xff09; 基本数据类型是表示简单的数…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

Yocto 项目下通过网络更新内核、设备树及模块

Yocto 项目下通过网络更新内核、设备树及模块 前言 在 Yocto 项目的开发过程中&#xff0c;特别是在进行 BSP&#xff08;Board Support Package&#xff09;开发时&#xff0c;经常需要调整特定软件包的版本&#xff0c;修改内核、设备树以及内核模块。然而&#xff0c;每次…

k8s集群安装(kubeadm)

k8s集群安装&#xff08;kubeadm&#xff09; 1、环境准备&#xff08;master和node节点都执行&#xff09;1.1、替换yum源1.2、关闭selinux1.3、永久关闭防火墙1.4、永久关闭swap1.5、修改主机名添加host1.6、时间同步1.7、将桥接的IPv4流量传递到iptables的链1.8、docker安装…

Ubuntu 修改时区 同步时间

Ubuntu 修改时区 同步时间 1、设置系统时区为中国上海2、更新软件包列表3、安装 ntpdate 工具4、从阿里云 NTP 服务器同步时间5、将系统时间同步到硬件时钟6、读取硬件时钟时间 1、设置系统时区为中国上海 timedatectl set-timezone Asia/Shanghai2、更新软件包列表 apt upda…

什么是JVM实现

JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;实现是指将JVM规范转化为具体可执行代码的过程和结果。JVM规范定义了Java虚拟机应该具备的功能、行为以及与其他组件的交互方式&#xff0c;但它本身并不包含具体的实现代码。因此&#xff0c;不同的组织…

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…

您与此网站之间建立的连接不安全解决方法

如果你打开网站&#xff0c;地址栏有警告&#xff0c;点进去是这样的提示&#xff1a;您与此网站之间建立的连接不安全&#xff0c;了解详细信息。 请勿在此网站上输入任何敏感信息&#xff08;例如密码或信用卡信息&#xff09;&#xff0c;因为攻击者可能会盗取这些信息。 …

【与AI+】学习SAP开发有什么渠道可以推荐

前言&#xff1a;好的&#xff0c;我又将开辟一个新的专栏&#xff0c;这个专栏呢&#xff0c;就准备放一些我向AI提问的问题&#xff0c;以及AI的回答。因为感觉真的好方便哈哈哈~ 我不是很确定我的专栏文章内容是否涉及版权&#xff0c;以及也不确定这些整合过的文字是否涉嫌…

江苏博才众创科技产业园集团拟投资10亿元在泰兴打造汽车零部件产业园

2024年11月7日&#xff0c;泰兴市高新技术产业开发区与江苏博才众创科技产业园集团举行新能源汽车零部件智能制造产业园项目签约仪式。 泰兴市高新区党工委委员、管理办副主任王峰表示&#xff1a;高新区是全市项目建设的主阵地&#xff0c;近年来聚焦高端化、智能化、绿色化&a…

Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比

一、Flutter 的 Widget 概述 Flutter 是 Google 开发的一款开源 UI 框架&#xff0c;旨在帮助开发者快速构建高性能、高保真度的移动、Web 和桌面应用程序。在 Flutter 中&#xff0c;UI 的构建完全是通过 Widget 来实现的。Widget 是 Flutter 中所有用户界面元素的基础构建块…

【python】Flask

文章目录 1、Flask 介绍2、Flask 实现网页版美颜效果3、参考 1、Flask 介绍 Flask 是一个用 Python 编写的轻量级 Web 应用框架。它设计简单且易于扩展&#xff0c;非常适合小型项目到大型应用的开发。 以下是一些 Flask 库中常用的函数和组件&#xff1a; 一、Flask 应用对…

FastAPI —— 请求参数验证

1.hello world 给后端船数据 hello world 接口给后端传 COVID-19 感染数据_高性能 FastAPI 框架入门精讲-慕课网 #!/usr/bin/python3 # -*- coding:utf-8 -*- # __author__ __Jack__from typing import Optionalfrom fastapi import FastAPI from pydantic import BaseModel…

产品经理如何使用项目管理软件推进复杂项目按时上线

前言 相信很多产品同学或多或少都有过这样的经历&#xff1a;平时没有听到任何项目延期风险&#xff0c;但到了计划时间却迟迟无法提测……评审时没有任何argue&#xff0c;提测后发现开发的功能不是自己想要的……费劲九牛二虎之力终于让项目上线了&#xff0c;然而发现成果达…

新系统如何进行模型环境配置

在机器学习和深度学习中&#xff0c;一个良好的开发环境能够显著提高工作效率。本篇博客将详细介绍如何在新的Linux系统&#xff08;以Ubuntu为例&#xff09;上进行模型环境的配置&#xff0c;包括基础系统设置、Python虚拟环境搭建、常用库的安装以及GPU驱动和CUDA的安装等。…

机器视觉:轮廓匹配算法原理

轮廓匹配的模板变量主要包括模板图像&#xff08;Template&#xff09;和待检测图像&#xff08;Source Image&#xff09; 在轮廓匹配中&#xff0c;模板变量主要包括一下几个关键部分&#xff1a; ‌模板图像&#xff08;Template&#xff09;‌&#xff1a;这是进行匹配的…