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')
)

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

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

相关文章

智安网络|探索语音合成技术的未来:揭秘人工智能配音技术的背后

随着人工智能技术的迅猛发展&#xff0c;配音行业也迎来了人工智能配音技术的崭新时代。人工智能配音技术通过语音合成和自然语言处理等技术手段&#xff0c;实现了逼真的语音合成&#xff0c;为影视、广告和游戏等领域带来了新的可能性。 第一部分&#xff1a;语音合成技术的…

天锐绿盾加密软件——企业数据透明加密、防泄露系统

天锐绿盾是一种企业级数据透明加密、防泄密系统&#xff0c;旨在保护企业的核心数据&#xff0c;防止数据泄露和恶意攻击。它采用内核级透明加密技术&#xff0c;可以在不影响员工正常工作的前提下&#xff0c;对需要保护的数据进行加密操作。 PC访问地址&#xff1a; https:/…

linux安装visual studio code

下载 https://code.visualstudio.com/ 下载.deb文件 安装 假如文件被下载到了 /opt目录下 进入Opt目录&#xff0c;右键从当前目录打开终端。 输入下面的安装命令。 sudo apt-get install ./code_1.83.1-1696982868_amd64.deb 安装成功。 配置 打开 visual studio cod…

宏集案例 | Panarama SCADA平台在风电场测量的应用,实现风电场的高效管理!

文章来源&#xff1a;宏集工业物联网 阅读原文&#xff1a;https://mp.weixin.qq.com/s/MLYhBWiWx7qQSApx_3xhmA 宏集Panorama SCADA平台在风电场测量的应用 宏集方案 01应用背景 随着煤碳、石油等能源的逐渐枯竭&#xff0c;人类越来越重视可再生能源的利用。风能作为一种…

小知识(5) el-table行样式失效问题

一、实现效果 子级呈现不同颜色去区分 二、最初代码 tips: 我这里使用的vue3 elementplus <el-table :row-class-name"tableRowClassName" >... </el-table>function tableRowClassName({ row, rowIndex }) {if (row.children.length 0) {return …

上海市道路数据,有63550条数据(shp格式和xlsx格式)

数据地址&#xff1a; 上海市道路https://www.xcitybox.com/datamarketview/#/Productpage?id391 基本信息. 数据名称: 上海市道路数据 数据格式: Shpxlsx 数据时间: 2020年 数据几何类型: 线 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据字段&am…

k8s-----19、Helm

Helm 1、引入2、概述2.1 重点2.2 V3版本的Helm2.2.1 与之前版本的不同之处2.2.2 V3版本的运行流程 3、安装和配置仓库、一些附带操作3.1 安装3.2 配置仓库3.3 常用命令3.4 添加helm的自动补齐 4、快速部署应用(weave应用)5、 自行创建Chart5.1 Chart目录内容解析5.2 简单安装部…

Pytorch指定数据加载器使用子进程

torch.utils.data.DataLoader(train_dataset, batch_sizebatch_size, shuffleTrue,num_workers4, pin_memoryTrue) num_workers 参数是 DataLoader 类的一个参数&#xff0c;它指定了数据加载器使用的子进程数量。通过增加 num_workers 的数量&#xff0c;可以并行地读取和预处…

maven-default-http-blocker (http://0.0.0.0/): Blocked mirror for repositories

前言 略 说明 新设备上安装了mvn 3.8.5&#xff0c;编译新项目出错&#xff1a; [ERROR] Non-resolvable parent POM for com.admin.project:1.0: Could not transfer artifact com.extend.parent:pom:1.6.9 from/to maven-default-http-blocker (http://0.0.0.0/): Bl…

建联合作1000+达人,如何高效管理?

随着社交媒体的发展&#xff0c;达人营销已成为品牌营销重要的方式之一&#xff0c;甚至可以说是必选项。 对于很多品牌商家来说&#xff0c;一次合作几百个不同类型、不同社媒平台的达人&#xff0c;已屡见不鲜。在电商大促前、主推单品爆品时&#xff0c;同时合作上千个达人&…

jenkins实践篇(1)——基于分支的自动发布

问题背景 想起初来公司时&#xff0c;我们还是在发布机上直接执行发布脚本来运行和部署服务&#xff0c;并且正式环境和测试环境的脚本都在一起&#xff0c;直接手动操作脚本时存在比较大的风险就是将环境部署错误&#xff0c;并且当时脚本部署逻辑还没有检测机制&#xff0c;…

vscode Coder Runner 运行C++

1. 设置Code Runner 2. 防止输入读不到&#xff0c;把在终端运行勾上。 3. 设置minw/bin的环境变量 安装mingw教程&#xff1a;https://blog.csdn.net/fancy_male/article/details/133992000 4. 见图

数据结构:选择题+编程题(每日一练)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;单值二叉树 思路一&#xff1a; 题二&#xff1a;二叉树的最大深度 思路一&#xff1a; 本人实力有限可能对…

Go学习第八章——面向“对象”编程(结构体与方法)

Go面向“对象”编程&#xff08;结构体与方法&#xff09; 1 结构体1.1 快速入门1.2 内存解析1.3 创建结构体四种方法1.4 注意事项和使用细节 2 方法2.1 方法的声明和调用2.2 快速入门案例2.3 调用机制和传参原理2.4 注意事项和细节2.5 方法和函数区别 3 工厂模式 Golang语言面…

服装服饰小程序商城的作用是什么

随着数字化转型节奏加快&#xff0c;各个行业都在加紧线上平台渠道的建设&#xff0c;而对于服装业来讲&#xff0c;在线商城无疑是**的选择&#xff0c;一方面可以去除平台的限制&#xff0c;摆脱佣金烦恼&#xff0c;还可搭建自有会员体系、私域流量池&#xff0c;持续转化变…

使用ruoyi框架遇到的问题修改记录

使用ruoyi框架遇到的问题修改记录 文章目录 使用ruoyi框架遇到的问题修改记录上传后文件名改变上传时设置单多文件及其他选项附件显示文件名&#xff0c;点击下载附件直接显示图片表格固定列查询数据库作为下拉选项值字典使用加入json递归注解&#xff0c;防止无限递归内存溢出…

从零开始学习wpsjs

1.这是一个简单的wpsjs学习文档&#xff0c;我是边学习wpsjs边记录学习的&#xff0c;希望对您的学习有所帮助 开发事项&#xff1a; 全局安装wpsjs:npm install -g wpsjsWpsjs create HelloWps 安装wps npm install -g wpsjs 新建一个wps加载项 输入命令wpsjs create HelloW…

塔式服务器介绍

大家都知道服务器分为机架式服务器、刀片式服务器、塔式服务器三类&#xff0c;今天小编就分别讲一讲这三种服务器&#xff0c;第三篇先来讲一讲塔式服务器的介绍。 塔式服务器定义&#xff1a;塔式服务器的外观和普通电脑差不多&#xff0c;直立放置。机箱比较大&#xff0c;服…

药房商城小程序便捷购药体验,找药买药一键操作

在我们的生活中&#xff0c;偶尔会遇到身体不适或需要常见药品的情况。然而&#xff0c;传统的购药方式往往会浪费大量的时间和精力。幸运的是&#xff0c;现在有了药房商城小程序&#xff0c;仅需一键操作&#xff0c;您就能享受到便捷、高效的购药体验。 药房商城小程序是用于…