当前位置: 首页 > news >正文

react开发环境搭建

在这里插入图片描述

文章目录

    • 准备工作
    • 创建 React 项目
        • 使用 create-react-app 创建 React 项目
        • 使用 Vite 创建 React 项目
        • 启动项目效果
        • 安装出现的情况
    • react项目文件讲解
        • 1. 项目根目录
        • 2. 其他可能的目录和文件
        • 3. 配置文件


准备工作

Node.js 安装方法

方式一:使用 NVM 安装 Node.js

  • NVM 下载地址:nvm-windows
  • Node.js 包下载地址:Node.js Releases
  • 优点:NVM 允许灵活切换 Node.js 版本,适合需要管理多个版本的情况。

方式二:直接安装 Node.js

  • Node.js 下载地址:Node.js 官方下载
  • 优点:直接安装更简单,适合不需要频繁切换版本的用户。

创建 React 项目

要创建一个新的 React 项目,可以使用以下几种方法。以下是使用 create-react-app 工具的标准步骤,这是最常用的方法:

使用 create-react-app 创建 React 项目
  1. 确保你已安装 Node.js 和 npm
    你可以通过以下命令检查是否安装了 Node.js 和 npm:

    node -v
    npm -v
    

    如果没有安装,请先安装 Node.js(包含 npm)。

  2. 安装 create-react-app
    你可以全局安装 create-react-app 工具(可选):

    npm install -g create-react-app
    
  3. 创建一个新的 React 项目
    使用 create-react-app 创建一个新的项目,替换 my-app 为你想要的项目名称:

    npx create-react-app my-app
    

    npx 是 npm 5.2.0 及更高版本随附的工具,用于运行命令行工具而无需全局安装。

  4. 进入项目目录
    进入你创建的项目文件夹:

    cd my-app
    
  5. 启动开发服务器
    启动项目的开发服务器:

    npm start
    

    默认情况下,开发服务器会在 http://localhost:3000 运行。

  6. 打开浏览器查看项目
    你可以在浏览器中访问 http://localhost:3000,你会看到 create-react-app 默认生成的欢迎页面。

使用 Vite 创建 React 项目

作为另一种现代的选择,你还可以使用 Vite 创建 React 项目,它通常具有更快的启动时间和构建速度:

  1. 安装 Vite
    使用以下命令创建新项目,替换 my-app 为你的项目名称:

    npm create vite@latest my-app --template react
    
  2. 进入项目目录

    cd my-app
    
  3. 安装依赖

    npm install
    
  4. 启动开发服务器

    npm run dev
    

    默认情况下,开发服务器会在 http://localhost:5173 运行。

选择 create-react-appVite 取决于你的项目需求和个人偏好。两者都是创建 React 项目的有效工具。

启动项目效果

安装出现的情况
Need to install the following packages:create-react-app@5.0.1
Ok to proceed? (y)


输入y即可

react项目文件讲解

在一个使用 create-react-app 工具创建的 React 项目中,默认的项目结构包含了一些标准的文件和目录。以下是对这些文件和目录的详细讲解:

1. 项目根目录
  • node_modules/
    存放项目依赖的第三方库和模块。这个目录是由 npm 自动生成的,不需要手动管理。

  • public/
    存放公开静态资源的目录。该目录下的文件会被直接暴露在生产环境中,不会经过 Webpack 处理。

    • index.html
      这是单页面应用的根 HTML 文件。React 应用会被挂载到这个文件中的 div 元素(通常是 id="root")。
  • src/
    存放项目源代码的目录。这是你主要的开发目录。

    • index.js
      应用的入口文件,React 应用会在这里被渲染到 index.html 文件中的 root 元素中。
    • App.js
      这是一个示例组件,作为应用的主要组件。通常,这个文件会包含应用的主要结构和逻辑。
    • App.css
      App.js 相关的 CSS 文件,用于样式化 App 组件。
    • index.css
      全局样式文件,应用于整个应用的样式。
    • logo.svg
      默认的 React 图标 SVG 文件,通常用于示例和测试。
    • serviceWorker.js
      一个用于注册服务工作线程的文件(在创建 PWA 时可以使用)。在最新版本的 create-react-app 中,这个文件可能被移除或不推荐使用。

      这些文件都可以移除或不推荐使用
  • .gitignore
    用于指定在使用 Git 版本控制时,哪些文件和目录应该被忽略。例如,node_modules/build/ 文件夹。

  • package.json
    项目的配置文件,包含项目的依赖、脚本、项目元数据等。你可以在这里定义项目的各种设置和依赖。

  • package-lock.json
    锁定依赖版本的文件。它确保在不同的机器上安装的依赖版本一致。

  • README.md
    项目的说明文件。你可以在这里添加项目的概述、使用说明、安装步骤等。

  • yarn.lock
    如果你使用 Yarn 作为包管理器,这个文件会被创建,功能类似于 package-lock.json,用于锁定依赖版本。

2. 其他可能的目录和文件
  • src/components/
    通常你会创建这个目录来存放你的 React 组件文件。每个组件通常会有一个 JavaScript/TypeScript 文件和一个对应的 CSS 文件。

  • src/assets/
    用于存放静态资源,如图片、字体等。

  • src/utils/
    用于存放工具函数或帮助类文件。

  • src/hooks/
    用于存放自定义的 React Hooks。

3. 配置文件
  • jsconfig.jsontsconfig.json
    如果你使用 TypeScript 或想要更好的 JavaScript 代码提示,可能会看到这些配置文件。

  • eslint.json
    如果项目使用了 ESLint 进行代码检查,可能会有这个配置文件,用于定义代码检查规则。

  • prettier.config.js
    如果使用 Prettier 进行代码格式化,可能会有这个配置文件。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关文章:

react开发环境搭建

文章目录 准备工作创建 React 项目使用 create-react-app 创建 React 项目使用 Vite 创建 React 项目启动项目效果安装出现的情况 react项目文件讲解1. 项目根目录2. 其他可能的目录和文件3. 配置文件 准备工作 Node.js 安装方法: 方式一:使用 NVM 安装…...

python 逻辑语句简记

什么语言都少不了逻辑处理语句的使用,python的逻辑处理语句有自身的使用特点,稍稍总结记录一下 一、断言 assert 条件 条件触发,程序执行中断 二、条件语句 if 条件: 执行内容 三、循环语句 while 条件: 循环体…...

8.进销存系统(基于springboot的进销存系统)

目录 1.系统的受众说明 2.开发技术与环境配置 2.1 SpringBoot框架 2.2 Java语言简介 2.3 MySQL环境配置 2.4 idea介绍 2.5 mysql数据库介绍 2.6 B/S架构 3.系统分析与设计 3.1 可行性分析 3.1.1 技术可行性 3.1.2 操作可行性 3.1.3经济可行性 3.4.1 数据库…...

深入理解主键回显:提升数据操作效率与准确性

在软件开发的世界中,主键回显是一个常常被提及但又容易被忽视其重要性的概念。今天,我们就来深入探讨一下主键回显的奥秘。 一、什么是主键回显? 在数据库设计中,主键是用于唯一标识表中每一行记录的字段。而主键回显&#xff0…...

springboot+阿里云物联网教程

需求背景 最近有一个项目,需要用到阿里云物联网,不是MQ。发现使用原来EMQX的代码去连接阿里云MQTT直接报错,试了很多种方案都不行。最终还是把错误分析和教程都整理一下。 需要注意的是,阿里云物联网平台和MQ不一样。方向别走偏了。 概念描述 EMQX和阿里云MQTT有什么区别…...

QT Creator cmake 自定义项目结构, 编译输出目录指定

1. 目的 将不同的源文件放到不同的目录下进行管理, 如下: build: 编译输出目录 include: 头文件目录 rsources: 资源文件目录 src: cpp文件目录 2. 创建完cmake工程后修改CMakeLists.txt 配置 注 : 这里头文件目录是include, 所以在includ…...

lunar无第三方依赖的公历、农历、法定节假日...日历工具库

文章目录 介绍maven示例示例(前后端)网址文档 介绍 lunar是一款无第三方依赖的公历(阳历)、农历(阴历、老黄历)、道历、佛历工具,支持星座、儒略日、干支、生肖、节气、节日、彭祖百忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、…...

(全网最细)ELF文件详解

ELF文件是什么 ELF文件是一种对象文件格式。ELF文件的全程是(Executeable and Linking Format,可执行可链接格式)。ELF文件格式主要有三种: 可重定向文件。可重定向文件就是可以用于和其他对象文件链接来创建一个可执行或者可分…...

Leetcode面试经典150题-39.组合总和

给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被选取 。如…...

海外云市场分析

海外云市场数据洞察 2024 H1 季度数据 H1季度,全球云基础设施服务指数同比增长21%,达到798亿美元 (相比去年增加134亿美元),三大云服务提供商— AWS,微软Azure 和GCP 营收总增长率为24%,占总市场66%。 其中三大云厂商同比营收增长排序(2024 H1):微软 31%,G…...

显示和隐藏图片【JavaScript】

使用 JavaScript 来实现显示和隐藏图片。下面是一个简单的示例&#xff0c;展示如何通过按钮点击来切换图片的可见性。 实现效果: 代码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name&…...

Java调用数据库 笔记06 (修改篇)

1.创建Java的普通class类 2.加载驱动 Class.forName("com.mysql.jdbc.Driver"); 3.驱动管理类调用方法进行连接&#xff0c;得到连接对象 DriverManager.getConnection(url, user, password); 其中设置参数&#xff1a; static final String url "jdbc:my…...

virtualbox中的网络模式,网络设置,固定IP

virtualbox关于网络设置的文档&#xff1a;https://www.virtualbox.org/manual/topics/networkingdetails.html#networkingdetails DHCP Dynamic Host Configuration Protocol&#xff1a;动态主机配置协议&#xff0c;是专门用来给网络中的节点分发IP地址&#xff0c;确保每…...

2025年最新大数据毕业设计选题-Hadoop综合项目

选题思路 回忆学过的知识(Python、Java、Hadoop、Hive、Sqoop、Spark、算法等等。。。) 结合学过的知识确定大的方向 a. 确定技术方向&#xff0c;比如基于Hadoop、基于Hive、基于Spark 等等。。。 b. 确定业务方向&#xff0c;比如民宿分析、电商行为分析、天气分析等等。。。…...

实战C++手写线程池

课程总目录 文章目录 一、项目必备基础概念1.1 并发和并行1.2 多线程的优势1.3 线程的消耗1.4 线程池的优势1.5 线程池的两种模式:fixed模式和cached模式1.6 线程同步之线程互斥1.7 线程同步之线程通信1.7.1 条件变量1.7.2 信号量1.8 项目设计图浏览二、线程池代码展示三、线程…...

Alluxio Enterprise AI on K8s FIO 测试教程

Alluxio Enterprise AI on K8s FIO 测试视频教程 视频为Alluxio Enterprise AI on K8s FIO测试视频教程。fio是业内常用的磁盘与文件系统性能测试工具&#xff0c;下面内容将通过文字方式介绍Alluxio on k8s 进行fio测试的教程。 1. 测试环境 虚拟机规格&#xff1a;ecs.g3i.…...

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

学习使用在windows系统上安装vue前端框架以及环境配置图文教程 1、安装nodejs2、安装vue3、安装Vue-cli脚手架4、安装高版本5、创建vue项目6、启动项目7、配置开发环境8、发布项目 1、安装nodejs 点我查看教程 2、安装vue winR&#xff0c;打开cmd cnpm install vue -g表示安…...

基于Delphi的题库生成系统

基于Delphi的题库生成系统是一个复杂的项目&#xff0c;涉及到多个模块的设计和实现。以下是一个简化的代码案例&#xff0c;展示了如何使用Delphi构建一个基本的题库生成系统。 1. 数据库设计 首先&#xff0c;你需要设计一个数据库来存储试题信息。一个简单的数据库设计可…...

鸿蒙OpenHarmony【小型系统基础内核(进程管理任务)】子系统开发

任务 基本概念 从系统的角度看&#xff0c;任务Task是竞争系统资源的最小运行单元。任务可以使用或等待CPU、使用内存空间等系统资源&#xff0c;并独立于其它任务运行。 OpenHarmony 内核中使用一个任务表示一个线程。 OpenHarmony 内核中同优先级进程内的任务统一调度、运…...

SpringBoot框架下的客户管理策略

1 绪论 1.1研究背景 随着网络不断的普及发展&#xff0c;企业客户管理系统依靠网络技术的支持得到了快速的发展&#xff0c;首先要从员工的实际需求出发&#xff0c;通过了解员工的需求开发出具有针对性的首页、个人中心、员工管理、客户信息管理、行业类型管理、项目信息管理、…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...