React01 开发环境搭建

React 开发环境搭建

      • 一、创建 React 项目
      • 二、项目精简

一、创建 React 项目

  • 执行下述命令创建 react 项目 blu-react-basis
npx create-react-app blu-react-basis

项目目录结构如下:

在这里插入图片描述

  • 执行下述命令启动项目
npm run start

启动效果如下:

在这里插入图片描述

二、项目精简

删除不必要的文件

在这里插入图片描述

简化 index.jsApp.js

  • index.js
//导入React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入根组件
import App from './App';

//将根组件渲染到index.html中id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
  • App.js
//根组件
function App() {
  return (
    <div className="App">
      HELLO BLU FROM REACT
    </div>
  );
}
export default App;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

51单片机的万年历【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块时钟模块按键蜂鸣器等模块构成。适用于电子万年历、数字时钟万年历等相似项目。 可实现功能: 1、LCD1602实时显示年月日星期和北京时间&#xff0c;具备闰年判断功能 2、按键可设置闹钟时间 3、按键可修改当前时…

案例-登录认证

案例-登录认证 在前面的课程中&#xff0c;我们已经实现了部门管理、员工管理的基本功能&#xff0c;但是大家会发现&#xff0c;我们并没有登录&#xff0c;就直接访问到了Tlias智能学习辅助系统的后台。 这是不安全的&#xff0c;所以我们今天的主题就是登录认证。 最终我们…

redo文件误删除后通过逻辑备份进行恢复

问题描述 开发同事让在一个服务器上查找下先前库的备份文件是否存在&#xff0c;如果存在进行下恢复。翻了服务器发现备份文件存在&#xff0c;多愁了一眼竟翻到了该备份文件于2024.6.17日恢复过的日志&#xff0c;赶紧和开发沟通说2024.6.17号已经恢复过了为啥还要恢复&#x…

空间大数据的数据变换与价值提炼

在数字化时代&#xff0c;空间大数据正成为推动社会经济发展的关键因素。空间大数据不仅体量巨大&#xff0c;而且具有高速流转、多样类型和真实性等特点&#xff0c;它们在获取、存储、管理、分析方面超出了传统数据库软件工具的能力范围。地理信息系统&#xff08;GIS&#x…

AWS账号与邮箱的关系解析

在当今数字化时代&#xff0c;云计算服务的普及使得越来越多的企业和个人用户开始使用亚马逊网络服务&#xff08;AWS&#xff09;。作为全球领先的云服务平台&#xff0c;AWS为用户提供了丰富的计算、存储和数据库服务。然而&#xff0c;对于许多新用户来说&#xff0c;关于AW…

openresty通过header_filter_by_lua记录特定的请求头和特定的响应头到日志文件

有时我们希望记录特定的请求头信息和特定的响应头信息,以便能够通过关联请求信息和响应头信息,来实现记录请求和响应的对应关系。这里通过逐步尝试和优化的方式进行尝试。具体包括将需要的请求头和响应头组织到一条日志记录,输出到单独的错误日志文件记录等的配置尝试。 1.…

C语言中的文件操作:从基础到深入底层原理

文件操作是几乎所有应用程序的重要组成部分&#xff0c;特别是在系统级编程中。C语言因其高效、灵活以及接近硬件的特点&#xff0c;成为了文件操作的理想选择。本文将全面深入地探讨C语言中的文件操作&#xff0c;从文件系统的概念到具体的文件操作函数&#xff0c;再到底层的…

c++的哈希表、哈希桶的介绍与实现

目录 前言 哈希概念 哈希冲突 哈希函数 哈希冲突解决 闭散列 —— 开放定址法 开散列 —— 链地址法&#xff08;拉链法、哈希桶&#xff09; 哈希表的闭散列实现 哈希表的结构 哈希表的仿函数 哈希表的插入 哈希表的查找 哈希表的删除 哈希表的开散列实现&#xff…

如何查看默认网关地址:详细步骤

在日常的网络配置与故障排查中&#xff0c;了解并正确查看默认网关地址是一项基础且至关重要的技能。默认网关是连接本地网络与外部网络&#xff08;如互联网&#xff09;的关键节点&#xff0c;它扮演着数据包转发的重要角色。无论是家庭网络、办公室网络还是更复杂的网络环境…

MySQL:基于Spring监听Binlog日志

binlog的三种模式 MySQL 的二进制日志&#xff08;binlog&#xff09;有三种不同的格式&#xff0c;通常被称为 binlog 模式。这三种模式分别是 Statement 模式、Row 模式和Mixed 模式。 Statement 模式&#xff1a; 在 Statement 模式下&#xff0c;MySQL 记录每个会更改数…

【编程语言】Kotlin快速入门 - 类与对象

类的组成 Kotlin中类的基本组成可写成以下的形式&#xff0c;Kotlin也是使用class关键字声明一个类的&#xff0c;我在此也同时加入了name和age两个字段。 class Student: Person() {var name ""var age 1fun eat() {println("$name is $age")} }Kotli…

WebGL编程指南 - 入门续

相关内容&#xff1a;在attribute变量传递参数的基础上&#xff0c;通过JavaScript获取鼠标事件的坐标&#xff0c;再经过坐标转换传递给attribute变量&#xff1b;Web颜色缓冲区每次绘制之后都会重置相关函数&#xff1a;JavaScript鼠标事件onmousedown/onmouseup/onclick htm…

0基础学java之Day09(下午完整版)

六、数组 概念&#xff1a; 1.数组是引用数据类型 2.数组中的数据叫做元素 3.元素都有标号叫做索引/下标 4.下标从0开始 5.数组一旦初始化成功&#xff0c;长度不可变&#xff08;意味着数组没有添加和删除&#xff09; 6.数组中的元素在内存中是挨在一起的 声明&#xff1a; 数…

数据结构与算法 - 树 #数的概念 #二叉树 #堆 - 堆的实现/堆排序/TOP-K问题

文章目录 前言 一、树 (一)、概念 1、树的定义 (二)、树的定义 1、树为什么是递归定义的&#xff1f; 2、如何定义树(如何表达一棵树) 解决方案一&#xff1a;假设我们得知该树的度 解决方案二&#xff1a;顺序表 解决方案三&#xff1a;左孩子右兄弟表示法 二、二叉…

人工智能是否会取代人类的工作吗? 就业方向该如何抉择

人工智能是否会取代人类的工作一直是备受关注的话题。目前来看&#xff0c;人工智能在某些方面确实展现出了强大的能力&#xff0c;但要说完全取代人类还不太可能。 一、人工智能的优势 高效处理大量数据 人工智能可以快速处理和分析海量数据&#xff0c;例如在金融领域进行风…

linux------缓冲区与C库的原理

前言 一、缓冲区 缓冲区的作用是提高效率&#xff0c;因为将数据写入到设备&#xff0c;是需要调用系统接口的&#xff0c;如果每次写入缓冲区的数据就调用一次系统调用&#xff0c;涉及到系统调用这时操作系统就会介入&#xff0c;用户态转为内核态&#xff0c;这个过程需要时…

解决PyCharm 2023 Python Packages列表为空

原因是因为没有设置镜像源 展开 > 之后&#xff0c;这里 点击齿轮 添加一个阿里云的源 最后还需要点击刷新 可以选择下面的任意一个国内镜像源&#xff1a; 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里云&#xff1a;http://mirrors.aliyun.com/…

Vue3 集成Monaco Editor编辑器

Vue3 集成Monaco Editor编辑器 1. 安装依赖2. 使用3. 效果 Monaco Editor &#xff08;官方链接 https://microsoft.github.io/monaco-editor/&#xff09;是一个由微软开发的功能强大的在线代码编辑器&#xff0c;被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的…

微深节能 料场堆取料无人操作系统 格雷母线

微深节能的料场堆取料无人操作系统采用了格雷母线定位系统&#xff0c;这是一种高精度位移检测技术&#xff0c;用于提升料场作业的自动化水平和精确性。该系统通过精准定位和自动化控制&#xff0c;大幅减少了人工操作中的误差和延误&#xff0c;提高了作业效率和精确性。格雷…