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.hqwc.cn/news/145122.html

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

相关文章

面试题:说一下Redis中有哪些阻塞点以及如何解决?

文章目录 前言有哪些影响redis性能的因素客户端的阻塞磁盘带来的阻塞主从节点带来的阻塞切片集群的阻塞异步机制解决阻塞异步是如何进行的异步删除lazy-free小结 Redis 中的优秀设计有很多&#xff0c;今天我们一起来聊聊群友刷题遇到的&#xff1a;“Redis的异步机制 —— red…

SpringCloud之OpenFeign调用解读

目录 基本介绍 引进 OpenFeign概述 OpenFeign作用 FeignClient EnableFeignClients Java代码实战 实战架构 父工程pom文件 teacher-service服务 student-service服务 测试 自定义配置 基本介绍 引进 如果我们利用RestTemplate发起远程调用的代码时会存在一些…

如何正确维护实验室超声波清洗机

实验室一直被视作一个严谨且严肃的场所&#xff0c;在其中所做的试验都需要遵照一定流程&#xff0c;所用的设备也经过了细致化挑选&#xff0c;例如实验室超声波清洗机&#xff0c;其性能远强于普通类别的清洗机。专门负责采购的实验室人员&#xff0c;通常会对质量优服务好的…

C# Onnx Yolov8 Detect 戴安全帽检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Onnx…

外贸找客户软件:BotMaster 2023 Crack

具有多设备支持的全新 WhatsApp™ Business 批量发送器 最新9.0.2.1 稳定且工作。 测试日期&#xff1a;2023 年 10 月 9 日 所有功能工作正常。 图像发送问题固定 数字过滤器和组抓取器已修复。 目前稳定 现在使用 BotMaster 9.0.2.1 从 WhatsApp™ 发送交互式按钮 您现在可以…

uniapp开发微信小程序,webview内嵌h5,h5打开pdf地址,解决方案

根据公司要求&#xff0c;让我写一个h5&#xff0c;后续会嵌入到合作公司的微信小程序的webview中&#xff0c;如果是自己公司微信小程序&#xff0c;可以采取先下载下来pdf&#xff0c;然后通过wx.openDocument&#xff0c;进行单纯的预览操作&#xff0c;这个可以根据这个老哥…

轻松合并Excel工作表:Java批量操作优化技巧

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 在Excel中设计表单时&#xff0c;我们经常需要对收集的信息进行统计分析。例如&a…

C++前缀和算法:生成数组原理、源码及测试用例

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 动态规划&#xff0c;日后完成。 题目 给定三个整数 n、m 和 k 。考虑使用下图描述的算法找出正整数数组中最大的元素。 请你构建一个具有以下属性的数组 arr &#…

Photon——Fusion服务器(Failed to find entry-points:System.Exception: )

文章目录 前言解决方案:1.报警信息如下2.选择3d urp3.引入Fusion之后选择包管理,点击Burst中的Advanced Project Settings4.勾选两个预设选项5.引入官网unity.burst6.更新后报警消失总结前言 制作局域网游戏,出现未找到进入点报警 Failed to find entry-points 解决方案: …

计算机中整数的补码表示及二进制数轮

为了同学们能理好的理解数在计算机内的表示&#xff0c;我们可以把计算机中的整数看成N位进制数的数轮&#xff0c;N一般为2的幂&#xff0c;如下&#xff1a; 我们来举个例子&#xff1a;如果用4位二进制来表示整数&#xff0c;则可以表示的整数范围为-8&#xff08;即&#x…

车规MCU开发工具之Vector DaVinci Configurator执行arxml合并操作

环境 Step1 导入要合并的arxml 、 Step 2 比较、合并过程 <完>

【MySQL】逻辑架构

逻辑架构 逻辑架构剖析服务器处理客户端请求连接层服务层SQL Interface : SQL接口Parser : 解析器Optimizer : 查询优化器Caches&Buffers : 查询缓存组件 引擎层存储层 SQL执行流程MySQL查询流程查询缓存解析器词法分析语法分析 优化器执行器 数据库缓冲池 逻辑架构剖析 服…