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;

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

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

相关文章

Vue.js 错误异常: Component template should contain exactly one root element.

一、错误异常&#xff1a; Errors compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 二、原因 组件模板应该只包含一个根元素 查看vue代码&#xff0c;发…

OpenCV-人脸检测

文章目录 一、人脸检测流程二、关键方法三、代码示例四、注意事项 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了多种人脸检测方法&#xff0c;以下是对OpenCV人脸检测的详细介绍&#xff1a; 一、人脸检测流程 人脸检测是识别图像中人脸位置的过程&…

【C语言】数据输出格式控制

数据的输出格式修饰 常用两种&#xff1a; 整型中&#xff0c;输出数据左对齐、右对齐、占m位、不足m位前补0。浮点型中&#xff0c;默认通过四舍五入保留小数点后6位&#xff0c;通过参数设置保留小数点后n位。 #include <stdio.h> #define PI 3.14159 /* 功能&#x…

2024怎么选择网站建设公司?2024靠谱建站公司推荐TOP3

说起怎么挑个靠谱的网站建设公司啊&#xff0c;我觉得有这么几点挺关键的&#xff0c;咱们可以聊聊&#xff1a; 首先啊&#xff0c;你得瞅瞅这公司啥背景&#xff0c;成立了多久了&#xff0c;团队大不大&#xff0c;都服务过哪些客户&#xff0c;有啥拿得出手的成功案例没。…

如何判断通风天窗的优劣

通风天窗是否优质直接决定天窗的通风采光效果&#xff0c;影响厂房的空气质量。判断通风天窗的优劣主要从天窗使用材料、防水密封性能、通风性能、安装与售后服务等多方面出发。‌ ‌通风天窗使用材料是判断通风天窗优劣的重要因素之一。优质的通风天窗应采用耐候性强、坚固耐用…

ESP32-S3无法下载且报错的原因

该文将作为ESP32-S3下载报错记录&#xff0c;将持续更新 ARDUINO-IDE: Sketch uses 289393 bytes (22%) of program storage space. Maximum is 1310720 bytes. Global variables use 18408 bytes (5%) of dynamic memory, leaving 309272 bytes for local variables. Maximu…

多态常见面试问题

1、什么是多态&#xff1f; 多态&#xff08;Polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;它允许同一个接口表现出不同的行为。在C中&#xff0c;多态性主要通过虚函数来实现&#xff0c;分为编译时多态&#xff08;静态多态&#xff09;和运行时多态…

Java项目:160 基于springboot物流管理系统(PPT+论文+说明文档)

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 物流管理系统有管理员和用户两个角色。 ​ 管理员功能有个人中心&#xff0c;用户管理&#xff0c;车辆信息管理&#xff0c;公告信息管理&#xff…

windows以zip方式安装mysql8

1.下载安装包 mysql官网&#xff0c;下载后放到D:\Program Files\mysql-8.0.40-winx64 2.安装 cmd进入D:\Program Files\mysql-8.0.40-winx64\bin &#xff08;1&#xff09;在路径下新建my.ini配置文件 [mysql] # 设置mysql客户端默认字符集 default-character-setutf8 …

测网速小程序,纯前端

搜索&#xff1a;证寸照制作 源码介绍: 测网速小程序源码&#xff0c;是一款纯前端无需服务器的测网速小程序&#xff0c;依赖百度开发者中心js接口&#xff0c;真正的永久使用的小工具源码&#xff0c;很实用&#xff0c;可以单独运行&#xff0c;测网速很流畅~ 合法域名: ht…

OPC Router快速打通设备层与influxDB数据通讯

随着时代演化&#xff0c;数据量呈几何倍数增加的情况下出现了时序数据库。时序数据库是基于时间进行存储的数据库&#xff0c;每一条数据中都有一个时间戳&#xff0c;这种数据库特别适合存储那些随着时间变化的数据&#xff0c;通过一些工具处理后&#xff0c;能够分析出数据…

智绘城市地图:使用百度地图 API 实现智能定位

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

SQL优化 TABLE ACCESS BY INDEX ROWID 索引回表

问题&#xff1a; SQL语句运行时间主要消耗在TABLE ACCESS BY INDEX ROWID 索引回表扫描上&#xff0c;怎么优化&#xff1f; 模拟测试&#xff1a; 1.创建测试表 SYSdb11g> create table t1015 as select * from dba_objects;Table created.SYSdb11g> create index …

WPF -- LiveCharts的使用和源码

LiveCharts 是一个开源的 .NET 图表库&#xff0c;特别适用于 WPF、WinForms 和其他 .NET 平台。它提供了丰富的图表类型和功能&#xff0c;使开发者能够轻松地在应用程序中创建动态和交互式图表。下面我将使用WPF平台创建一个测试实例。 一、LiveCharts的安装和使用 1.安装N…

ESP-01S WIFI模块指南

ESP-01S模块&#xff0c;接5V才能正常工作&#xff0c;接3.3V很有可能不会正常工作 ESP-01S模块&#xff0c;TXD和RXD和CH340交叉接入 ESP-01s出厂波特率正常是115200, 注意&#xff1a;AT指令&#xff0c;控制类都要加回车&#xff0c;数据传输时不加回车 上电后&#xff0…

IDEA如何查看所有的断点(Breakpoints)并关闭

前言 我们在使用IDEA开发Java应用时&#xff0c;基本上都需要进行打断点的操作&#xff0c;这方便我们排查BUG&#xff0c;也方便我们查看设计的是否正确。 不过有时候&#xff0c;我们不希望进入断点&#xff0c;这时候除了点击断点关闭外&#xff0c;有没有更快速的方便关闭…

仓储管理系统原型图移动端(WMS),出入库管理、库存盘点、库存调拨等(Axure原型、Axure实战项目)

仓储管理系统原型图移动端 Warehouse Management System Prototype 仓储管理系统原型图移动端是一个以图形化方式展示系统移动端界面和功能的原型设计图。原型图展示和说明系统移动端的功能和界面布局&#xff0c;为相关利益方提供一个直观的视觉化展示&#xff0c;帮助他们更…

修改Linux的IP地址

方法一&#xff08;特点&#xff1a;命令执行后&#xff0c;IP立即修改&#xff0c;但重启后会恢复原来的IP地址&#xff09; 1.含义&#xff1a; inet ip地址 netmask 子网掩码 broadcast 广播地址 inet 192.168.44.129 netmask 255.255.255.0 broadcast 192.168.1.255 …

VScode写Java项目的教程

VScode写Java项目的教程 1.首先必选先安装Java解释器2.安装插件Java Extension Pack3.创建项目创建项目结构选择项目类型 4.测试结果源码内容 今天用一台老式笔记本写代码&#xff0c;IDEA跑不动就准备用VScode突然间就蒙了&#xff0c;怎么创建项目啊&#xff1f;于是就有了这…

基于微信小程序的社区二手交易系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…