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.mzph.cn/news/115307.shtml

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

相关文章

四、网络请求与路由

一、网络请求 1、Axios请求 Axios是一个基于promise的网络请求库 &#xff08;1&#xff09;安装 npm install --save axios&#xff08;2&#xff09;引入 import axios from "axios"全局引入 import axios from "axios" import { createApp } from …

Github 2FA绑定中国+86手机号码实现两步验证

GitHub宣布&#xff0c;到 2023 年底&#xff0c;所有用户都必须要启用双因素身份验证 (2FA)&#xff0c;不能只用密码. GitHub开启2FA后&#xff0c;除了输入密码外&#xff0c;还需要通过一次性密码&#xff08;OTP&#xff09;等方式做第二级身份验证&#xff0c;才能成功登…

靶机 DC_1

DC_1 信息搜集 存活检测 详细扫描 网页目录扫描 网页信息搜集 cms 为 Drupal 漏洞利用 使用 msf 搜索 drupal 的漏洞 启动 msfconsole搜索 search drupal尝试编号为 0 的漏洞 失败 利用编号为 1 的漏洞 use 1查看需要配置的选项 show options设置目标 ip set rhost 10…

监控易101:全方位解读运维的核心功能与特性

在数字化时代&#xff0c;企业IT环境的复杂性日益增加&#xff0c;给运维工作带来了前所未有的挑战。面对这一情况&#xff0c;监控易作为一款一体化运维监控管理平台&#xff0c;凭借其全面的监控覆盖、智能的告警机制、强大的数据分析工具以及灵活的扩展能力&#xff0c;赢得…

【Linxu工具】:vim使用及简单配置

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux工具&#xff1a;vim的使用&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从…

不知道怎么选CRM系统?看这篇就够了

CRM客户管理系统近年来已经从简单的客户管理软件发展成为了帮助企业运营发展的工具。它能够帮助企业优化业务流程、提高客户转化率、获得更多业绩。那么企业在选择CRM系统时有什么要点吗&#xff1f; 1、明确是否有自动化功能 自动化功能可以自动处理那些手动且琐碎的销售流程…

【Docker从入门到入土 4】使用Harbor搭建Docker私有仓库

私有仓库 一、Harbor简介1.1 什么是Harbor?1.2 Harbor的特性1.3 Harbor和docker registry的关系1.4 Harbor的构成1.4 Harbor 配置文件中的两类参数1.4.1 所需参数1.4.2 可选参数 二、Harbor部署2.1 部署Docker-Compose服务2.2 部署 Harbor 服务Step1 下载或上传 Harbor 安装程…

看得懂的——数据库中的“除”操作

通过一个例子来解释数据库中的“除”操作 R➗S其实就是判断关系R中X各个值的象集Y是否包含关系S中属性Y的所有值 求解步骤 第一步 找出关系R和关系S中相同的属性&#xff0c;即Y属性。在关系S中对Y做投影&#xff08;即将Y列取出&#xff09;&#xff1b;所得结果如下&#x…

设计模式:策略模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介&#xff1a; 策略模式&#xff0c;它是一种行为型设计模式&#xff0c;它定义了算法族&#xff0c;分别封装起来&#xff0c;让它们之间可以互相替换。策略模式让算法的变化独立于使用算法的客户&#xff0c;降低了耦合&#xff0c;增加了系统的可维护性和可扩展性。 策…

Jetty Client IllegalArgumentException: Buffering capacity 2097152 exceeded

使用Jetty Http Client 接收较大数据时发生异常 Request request client.POST(api_url) .timeout(TIMEOUT, TimeUnit.SECONDS) .content(new BytesContentProvider(imageData), "image/*"); ContentResponse resp request.send(); if(resp.getStatus()200){ …

Integer和int

Integer和int 1.定义2. 区别2.1 数据类型2.2 可空性2.2.1 int的可空性2.2.2 Integer的可空性 2.3 效率和性能2.4 自动装箱和拆箱2.4.1 自动装箱2.4.2 自动拆箱2.4.3 注意事项 3. 比较 1.定义 int是Java中的一种基本数据类型&#xff0c;用于表示整数。它是Java语言中最常用的数…

同为科技(TOWE)机架PDU产品在IDC数据中心机房建设中的应用

当今社会互联网发展迅速&#xff0c; 随着带宽需求的提升&#xff0c; 网络的保密性、安全性的要求就越来越迫切。PDU(Power Distribution Unit) 是 PDU具备电源分配和管理功能的电源分配管理器。PDU电源插座是多有设备运行的第一道也是最为密切的部件&#xff0c; PDU的好坏直…

【漏洞复现】panalog日志审计系统任意用户创建漏洞和后台命令执行

漏洞描述 panalog为北京派网软件有限公司,一款流量分析,日志分析管理的一款软件。存在任意用户创建漏洞和后台命令执行漏洞,可先通过任意用户创建,然后进行后台命令执行,获取服务器权限。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公…

Linux下的IMX6ULL——环境搭建与软件安装(一)

前言&#xff1a; 从今天开始我们就要用到IMX6ULL这块开发板进行linux的学习了&#xff0c;对于初学者&#xff0c;下载好资料、搭建好开发环境后&#xff0c;按照下面顺序学习即可&#xff1a; 先应用&#xff0c;再驱动&#xff0c;最后做项目。应用、驱动、项目这三个慢慢走…

【safetensor】介绍和基础代码

Hugging Face, EleutherAI, StabilityAI 用的多 介绍 文件形式 header&#xff0c;体现其特性。如果强行将pickle或者空软连接 打开&#xff0c;会出现报错。解决详见&#xff1a;debug 连接到其他教程结构和参数 安装 with pip:Copied pip install safetensors with con…

Java基础面试题知识点总结

什么是Java&#xff1f; Java是一种高级编程语言&#xff0c;由Sun Microsystems开发并于1995年首次发布。它被设计成一种通用、面向对象、并具有写一次、随处运行的特性。 Java的特点是什么&#xff1f; 简单易学&#xff1a;Java采用清晰简洁的语法&#xff0c;易于理解和学…

ScrapeKit 和 Swift 编写程序

以下是一个使用 ScrapeKit 和 Swift 编写的爬虫程序&#xff0c;用于爬取 图片。同时&#xff0c;我们使用了proxy 这段代码来获取代理。 import ScrapeKit ​ class PeopleImageCrawler: NSObject, ScrapeKit.Crawler {let url: URLlet proxyUrl: URL ​init(url: URL, proxy…

竞赛 深度学习人体语义分割在弹幕防遮挡上的实现 - python

文章目录 1 前言1 课题背景2 技术原理和方法2.1基本原理2.2 技术选型和方法 3 实例分割4 实现效果5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习人体语义分割在弹幕防遮挡上的应用 该项目较为新颖&#xff0c;适合作为竞…

如何使用Vue CLI进行预渲染

在Vue CLI中使用预渲染,你可以借助插件vue-cli-plugin-prerender-spa来实现。以下是使用Vue CLI进行预渲染的步骤: 1:安装Vue CLI:首先安装Vue CLI。如果没有安装,可以通过以下命令进行全局安装: npm install -g @vue/cli2:创建Vue项目:使用Vue CLI创建一个新的Vue项…

AQS是什么?AbstractQueuedSynchronizer之AQS原理及源码深度分析

文章目录 一、AQS概述1、什么是AQS2、技术解释3、基本原理4、AQS为什么这么重要 二、AQS数据结构1、AQS的结构2、ReentrantLock与AbstractQueuedSynchronizer3、AQS的state变量4、AQS的队列5、AQS的Node&#xff08;1&#xff09;Node的waitStatus&#xff08;2&#xff09;属性…