React环境初始化

news2024/11/15 12:21:28

环境初始化

学习目标: 能够独立使用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
    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.coloradmin.cn/o/1119645.html

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

相关文章

Linux:权限是什么

本篇文章来简单介绍一下Linux操作系统中权限的基本概念和一些操作方法&#xff0c;对Linux权限有一个基本的了解&#xff0c;希望对大家学习Linux有所帮助。 目录 1.权限的概念 2.Linux权限管理 2.1 文件访问者的分类 2.2 文件类型与访问权限&#xff08;事物属性&#xff…

(未完待续)【Netty专题】Netty实战与核心组件详解

目录 前言阅读对象阅读导航前置知识课程内容一、Netty简介1.1 Netty是什么1.2 Netty有什么优势 二、第一个Netty程序2.1 Netty简单使用示例2.2 代码解读2.3 Netty的特性2.3.1 Netty的事件 2.4 Netty线程模型 三、Netty核心组件详解&#xff08;未完待续&#xff09;3.1 EventLo…

learn C++ NO.11——string类模拟实现

前言 本篇文章主要是讲string类的模拟实现&#xff0c;模拟实现的是string类的常用接口以及成员函数。让读者对string类有更深的理解。适当的“造轮子”&#xff0c;有助于我们的语言学习。 简单描述string类 string类其实就是一个管理字符数组的线性表&#xff0c;我们可以…

常见面试题-Redis专栏(二)

theme: cyanosis typora-copy-images-to: imgsRedisson 分布式锁&#xff1f;在项目中哪里使用&#xff1f;多久会进行释放&#xff1f;如何加强一个分布式锁&#xff1f; 答&#xff1a; 首先入门级别的分布式锁是通过 setnx 进行实现&#xff0c;使用 setnx 实现有四个注意…

6.MySQL内置函数

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 日期函数 current_date() 当前日期 select 可以做表达式和函数的计算。 current_time() 当前时间 current_timestamp() 当前日期加时间 注意&#xff1a;值得说明的是这三个函数底层调用的都是同一个函数&#xff0c;只不…

C语言关键字

关键字作用 关键字是 C 语言中预先保留的单词 C语言关键字 注意&#xff1a;在定义变量或者常量的时候&#xff0c;不要使用关键字

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

简介&#xff1a; 组合模式&#xff0c;它是一种用于处理树形结构、表示“部分-整体”层次结构的设计模式。它允许你将对象组合成树形结构&#xff0c;以表示部分和整体的关系。这种模式的主要目的是简化客户端代码&#xff0c;并使客户端以一致的方式处理单个对象和组合对象。…

数字图像处理实验记录五(图像的空间域增强-锐化处理)

前言&#xff1a; 文章目录 一、基础知识1&#xff0c;什么是锐化&#xff1f;2&#xff0c;为什么要锐化&#xff1f;3&#xff0c;怎么进行锐化&#xff1f; 二、实验要求任务1&#xff1a;任务2&#xff1a;任务3&#xff1a; 三、实验记录&#xff1a;任务1&#xff1a;任…

计算机网络第三章习题

1.假定1km长的CSMA/CD网络的数据率为1Gb/s。设信号在网络上的传播 速率为200000km/s。求能够使用此协议的最短帧长. 问题刨析: 逻辑链: 最短帧长数据传输率x争用期2τ(2倍端到端所需要的时间) 题目已经给出数据率为1Gb/s,所以我们要知道争用期2τ是多少. 端到端所需要的时间信…

订单 延后自动关闭,五种方案优雅搞定!

前 言 在开发中&#xff0c;往往会遇到一些关于延时任务的需求。例如 生成订单30分钟未支付&#xff0c;则自动取消生成订单60秒后,给用户发短信 对上述的任务&#xff0c;我们给一个专业的名字来形容&#xff0c;那就是延时任务 。那么这里就会产生一个问题&#xff0c;这个…

画程序流程图

一。在线程序流程图。类图和时序图 Integrations | Mermaid 二。VSCODE画UML图和各种种 1.下载plantuml.jarReleases plantuml/plantuml GitHubGenerate diagrams from textual description. Contribute to plantuml/plantuml development by creating an account on GitHu…

B-tree(PostgreSQL 14 Internals翻译版)

概览 B树(作为B树访问方法实现)是一种数据结构&#xff0c;它使您能够通过从树的根向下查找树的叶节点中所需的元素。为了明确地标识搜索路径&#xff0c;必须对所有树元素进行排序。B树是为有序数据类型设计的&#xff0c;这些数据类型的值可以进行比较和排序。 下面的机场代…

【在英伟达nvidia的jetson-orin-nx上使用调试摄像头-初步调试USB摄像头与Camera Conn.#0/#1接口-基础测试】

【在英伟达nvidia的jetson-orin-nx上使用调试摄像头-初步调试USB摄像头与Camera Conn.#0/#1接口-基础测试】 1、概述2、实验环境3、 物品说明&#xff08;0&#xff09;各种各样摄像头&#xff08;1&#xff09;USB摄像头&#xff08;2&#xff09;CSI摄像头&#xff08;3&…

【JavaEE】线程安全的集合类 -- 多线程篇(9)

线程安全的集合类 多线程环境使用 ArrayList多线程环境使用队列多线程环境使用哈希表 多线程环境使用 ArrayList 自己使用同步机制 (synchronized 或者 ReentrantLock)Collections.synchronizedList(new ArrayList); synchronizedList 是标准库提供的一个基于 synchronized 进…

【AIGC】百度文库文档助手之 - 一键生成PPT

百度文库文档助手之 - 一键生成PPT 引言一、文档助手&#xff1a;体验一键生成PPT二、文档助手&#xff1a;进阶用法三、其它生成PPT的方法3.1 ChatGPT3.2 文心一言 引言 就在上个月百度文库升级为一站式智能文档平台&#xff0c;开放四大AI能力&#xff1a;智能PPT、智能总结、…

正则表达式提取http和http内容

http.* 这样匹配到的就是我们要的内容 取反正则&#xff1a;^((?!要取反的正则表达式).)*$ 取反&#xff1a;^((?!http.).)$ 这样匹配到的就是我们不要的内容 提取域名 /[(http|ftp|https):\/\/]?([\w_-](?:(?:\.[\w_-])))([\w.,?^%&:\/~#-]*[\w?^%&\/~#-]…

APK与小程序渗透

文章目录 APK与小程序渗透1. APK2. 小程序2.1 源代码2.2 小程序的默认下载位置 3. 安装证书3.1 openssl配置环境变量3.2 安装证书 APK与小程序渗透 由于APK和小程序与服务器通信还是采用的是https协议&#xff0c;只是使用了加密。只要获取到了HTTP的请求报文就可以回归到Web渗…

单目3D目标检测论文汇总

基于语义和几何约束的方法 1. Deep3DBox 3D Bounding Box Estimation Using Deep Learning and Geometry [CVPR2017] https://arxiv.org/pdf/1612.00496.pdfhttps://zhuanlan.zhihu.com/p/414275118 核心思想&#xff1a;通过利用2D bounding box与3D bounding box之间的几何约…

『C语言进阶』字符函数和内存函数(2)

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f516;系列专栏&#xff1a; C语言、Linux、Cpolar ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、strtok函数1.1 函数认识1.2 注意事项 二、strerror函数2.1 函数认识2.2 注意事项 三、memcpy函数3.1 函数…

1024渗透测试如何暴力破解其他人主机的密码(第十一课)

1024渗透测试如何暴力破解其他人主机的密码(第十一课) 1 crunch 工具 crunch是一个密码生成器&#xff0c;一般用于在渗透测试中生成随机密码或者字典攻击。下面是常见的一些使用方法&#xff1a; 生成密码字典 生成6位数字的字典&#xff1a;crunch 6 6 -t -o dict.txt …