React环境初始化

环境初始化

学习目标: 能够独立使用React脚手架创建一个React项目
1.使用脚手架创建项目
在这里插入图片描述

  官方文档:(https://create-react-app.bootcss.com/)
   - 打开命令行窗口
   - 执行命令
     npx create-react-app projectName
   说明:
    1. npx create-react-app 是固定命令,create-react-app是React脚手架的名称
    2. projectName 是项目名称,可以自定义,应保持语义化
    3. npx命令会帮助我们临时安装create-react-app包,然后初始化项目完成后会自动删除,所以不需要全局安装create-react-app
   - 启动项目

yarn start
or
npm start

2.项目目录说明调整

  • 目录说明
    1. src目录是写代码进行开发的目录
    2. package.json中有两个核心库:react、react-dom
  • 目录调整
    1. 删除src目录下的自带文件,只保留app.js根组件和index.js以及index.css
    2. 创建index.js文件作为项目的入口文件,在这个文件中书写react代码即可
  • 入口文件说明
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件APP
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(<React.strictSode><App /></React.strictSode>document.getElementById('root')
)

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

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

相关文章

常用Web安全扫描工具合集

漏洞扫描是一种安全检测行为&#xff0c;更是一类重要的网络安全技术&#xff0c;它能够有效提高网络的安全性&#xff0c;而且漏洞扫描属于主动的防范措施&#xff0c;可以很好地避免黑客攻击行为&#xff0c;做到防患于未然。那么好用的漏洞扫描工具有哪些&#xff1f; 1、A…

数据结构 哈希表

数据结构 哈希表 文章目录 数据结构 哈希表1. 概念2. 冲突-概念3. 冲突-避免3.1 哈希函数设计3.2 负载因子调节 4.冲突-解决4.1 闭散列4.2 开散列(哈希桶)4.3 哈希桶实现 5. 性能分析6. 和java类集的关系 1. 概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间…

QML之Repeater 控件使用

Repeater 控件是 重复作用 根据 model中的index 数量进行重复 废话不说 直接看如何用 当model 为数字时 Rectangle{height: 1200width: 500visible: trueanchors.fill: parentColumn{spacing: 20Repeater{model: 10delegate: Rectangle{width: 60height: 20color: index%2 …

Locust负载测试工具实操

本中介绍如何使用Locust为开发的服务/网站执行负载测试。 Locust 是一个开源负载测试工具&#xff0c;可以通过 Python 代码构造来定义用户行为&#xff0c;避免混乱的 UI 和臃肿的 XML 配置。 步骤 设置Locust。 在简单的 HTTP 服务上模拟基本负载测试。 准备条件 Python…

基于Pix4D使用无人机光学影像制作正射影像(DOM)和数字表面模型(DSM) 操作步骤

基于Pix4D使用无人机光学影像制作正射影像&#xff08;DOM&#xff09;和数字表面模型&#xff08;DSM&#xff09; 操作步骤 0. 前言1.获取无人机光学影像2.DOM和DSM3.操作步骤3.1 初始界面3.2 新建项目3.3查看处理过程报告3.4查看处理进度和成果 4.在ArcMap中打开DSM和DOM 0.…

学习笔记2——Nosql

学习笔记系列开头惯例发布一些寻亲消息 链接&#xff1a;https://baobeihuijia.com/bbhj/contents/3/194205.html 跟学链接 跟学视频链接&#xff1a;https://www.bilibili.com/video/BV1S54y1R7SB/?spm_id_from333.999.0.0 &#xff08;建议有java基础的同学学习或者一直…

Mac电脑无法识别移动硬盘怎么办?

很多人都喜欢在Mac电脑上办公、学习&#xff0c;但有时我们将移动硬盘连接Mac电脑时&#xff0c;却会发现电脑无法识别移动硬盘。那么&#xff0c;Mac电脑无法识别移动硬盘怎么办呢&#xff1f; Mac无法识别移动硬盘的原因 导致Mac不识别移动硬盘的原因有很多&#xff0c;你可…

Jmeter(九):jmeter_逻辑控制器与HTTP Cookie管理器详解

Jmeter&#xff1a;jmeter_逻辑控制器_事务控制器 事务 性能测试中&#xff0c;事务指的是从端到端&#xff0c;一个完整的操作过程&#xff0c;比如一次登录、一次 筛选条件查询&#xff0c;一次支付等&#xff1b;技术上讲&#xff1a;事务就是由1个或多个请求组成的 事务…

Java数据结构之稀疏数组

目录 线性结构与非线性结构线性结构非线性结构 稀疏数组应用场景 代码实现二维数组转稀疏数组稀疏数组转二维数组 线性结构与非线性结构 线性结构 数据结构分两种&#xff0c;线性与非线性&#xff0c;线性结构的数据元素之间存在一对一的关系。 一对一指的是每个数据元素都…

Spring中配置文件参数化

目录 一、什么是配置文件参数化 二、配置文件参数化的开发步骤 一、什么是配置文件参数化 配置文件参数化就是将Spring中经常需要修改的字符串信息&#xff0c;转移到一个更小的配置文件中。那么为什么要进行配置文件参数化呢&#xff1f;我们看一个代码 <bean id"co…

Bootstrap的旋转器组件

旋转效果可以用来指示状态&#xff0c;比如页面的加载状态。 可以用类spinner-border实现普通旋转的旋转器效果。 用类spinner-grow实现渐渐变大的旋转器效果。 01-最基本的示例代码 <!DOCTYPE html> <html> <head><meta charset"UTF-8">…

当年很流行,现在已经淘汰的前端技术有哪些?

近几年&#xff0c;前端技术真可谓是飞速发展&#xff0c;不断有新的技术涌现&#xff0c;爆火的前端框架 Astro&#xff0c;前端运行时 Bun&#xff0c;构建工具 Vite 等都给前端提供了强大动力。当然&#xff0c;也有很多前端技术随着技术的发展不再需要使用&#xff0c;有了…

博客续更(五)

十一、后台模块-菜单列表 菜单指的是权限菜单&#xff0c;也就是一堆权限字符串 1. 查询菜单 1.1 接口分析 需要展示菜单列表&#xff0c;不需要分页。可以针对菜单名进行模糊查询。也可以针对菜单的状态进行查询。菜单要按照父菜单id和orderNum进行排序 请求方式 请求路径…

python输出小数控制的方法

大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 一、要求较小的精度 将精度高的浮点数转换成精度低的浮点数。 1.round()内置方法 round()不是简单的四舍五入的处理方式。 >>> round(2.5) 2 >>> ro…

Python树莓派开发

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

【漏洞复现】蓝凌EIS智慧协同平台saveImg接口存在任意文件上传

漏洞描述 蓝凌智慧协同平台满足组织企业在知识、协同及项目管理系统中建设等需求。该平台在saveImg接口处存在任意文件上传,攻击者可通过该漏洞上传Weshell控制服务器。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,…

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行 背景解决方案 背景 本身系统是window10 64位专业版系统&#xff0c;理论上不应该不支持64位的。 解决方案 最近安装docker开启了虚拟化hyper-v&#xff0c;关闭即可。 打开cmd&#xff08;…

VLAN互通

文章目录 VLAN互通2种方法单臂路由实现VLAN互通TOP图配置-LSW配置-Router1测试&#xff1a;PC1PC2 VLANIF(更受欢迎)TOP图LSW2配置测试PC1 VLAN互通2种方法 单臂路由实现VLAN互通 TOP图 名称IPGatewayPC1192.168.1.1/24192.168.1.254PC2192.168.2.1/24192.168.2.254 名称VLA…

测试老鸟总结,Allure测试报告-自动化测试详解,惊险避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Allure安装教程…

Java 8 新特性 Ⅱ

方法引用 举例: Integer :: compare 理解: 可以看作是基于lambda表达式的进一步简化 当需要提供一个函数式接口的实例时, 可以使用lambda表达式提供实例 当满足一定条件下, 可以使用方法引用or构造器引用替换lambda表达式 实质: 方法引用作为函数式接口的实例 (注: 需要熟悉…