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

【React 】开发环境搭建详细指南

news 文章来源：https://blog.csdn.net/lph159/article/details/140657736 2025/5/7 5:36:10

文章目录

    • 一、准备工作
      • 1. 安装 Node.js 和 npm
      • 2. 选择代码编辑器
    • 二、创建 React 项目
      • 1. 使用 Create React App
      • 2. 手动配置 React 项目
    • 三、集成开发工具
      • 1. ESLint 和 Prettier
      • 2. 使用 Git 进行版本控制

在现代前端开发中，React 是一个非常流行的框架，用于构建用户界面。无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。

一、准备工作

1. 安装 Node.js 和 npm

Node.js 是一个 JavaScript 运行环境，npm 是 Node.js 的包管理器。它们是搭建 React 开发环境的基础工具。你可以从 Node.js 官网 下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。

安装 Node.js 和 npm 的步骤：

  1. 打开 Node.js 官网并下载最新的 LTS 版本。

  2. 根据操作系统的提示完成安装。

  3. 安装完成后，打开终端或命令提示符，输入以下命令检查安装是否成功：

    node -v
npm -v

2. 选择代码编辑器

选择一个适合的代码编辑器可以大大提高开发效率。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。你可以从 VS Code 官网 下载并安装。

二、创建 React 项目

1. 使用 Create React App

Create React App 是由 Facebook 提供的一个官方工具，旨在帮助开发者快速创建和设置 React 项目。它默认配置了很多开发所需的工具和设置，使你可以专注于编写代码。

使用 Create React App 创建项目的步骤：

  1. 打开终端或命令提示符。

  2. 输入以下命令安装 Create React App：

    npx create-react-app my-app

    这条命令会创建一个名为 my-app的新目录，并在其中生成初始的React 项目文件。

  3. 进入项目目录：

    cd my-app

  4. 启动开发服务器：

    npm start

    这条命令会启动本地开发服务器，并自动在默认浏览器中打开项目页面。

2. 手动配置 React 项目

如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。这需要一些额外的步骤，但可以根据具体需求进行定制。

手动配置 React 项目的步骤：

  1. 创建一个新的项目目录并进入该目录：

    mkdir my-app
cd my-app

  2. 初始化 npm 项目：

    npm init -y

  3. 安装 React 和 React DOM：

    npm install react react-dom

  4. 安装 Webpack 和 Babel 等开发工具：

    npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

  5. 配置 Webpack 和 Babel：

    在项目根目录创建一个名为 webpack.config.js 的文件，并添加以下内容：

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',},},],},plugins: [new HtmlWebpackPlugin({template: './public/index.html',}),],devServer: {contentBase: path.resolve(__dirname, 'dist'),port: 3000,},
};

    在项目根目录创建一个名为 .babelrc的文件，并添加以下内容：

    {"presets": ["@babel/preset-env", "@babel/preset-react"]
}

  6. 创建项目目录结构：

    mkdir src public
touch src/index.js public/index.html

    在 public/index.html 文件中添加以下内容：

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>React App</title></head><body><div id="root"></div></body>
</html>

    在 src/index.js 文件中添加以下内容：

    import React from 'react';
import ReactDOM from 'react-dom';const App = () => <h1>Hello, React!</h1>;ReactDOM.render(<App />, document.getElementById('root'));

  7. 更新 package.json文件中的 scripts部分，添加启动开发服务器的命令：

    "scripts": {"start": "webpack serve --mode development"
}

  8. 启动开发服务器：

    npm start

三、集成开发工具

1. ESLint 和 Prettier

ESLint 是一个静态代码分析工具，用于识别和修复代码中的问题。Prettier 是一个代码格式化工具，可以确保代码风格的一致性。

集成 ESLint 和 Prettier 的步骤：

  1. 安装 ESLint 和 Prettier 及其相关插件：

    npm install eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

  2. 在项目根目录创建一个名为 .eslintrc 的文件，并添加以下内容：

    {"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended","plugin:react/recommended","prettier"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 12,"sourceType": "module"},"plugins": ["react","prettier"],"rules": {"prettier/prettier": "error"},"settings": {"react": {"version": "detect"}}
}

  3. 在项目根目录创建一个名为 .prettierrc 的文件，并添加以下内容：

    {"singleQuote": true,"trailingComma": "all"
}

2. 使用 Git 进行版本控制

Git 是一个分布式版本控制系统，广泛用于软件开发中。你可以通过 Git 进行代码管理，并使用 GitHub 等平台进行代码托管。

使用 Git 的步骤：

  1. 在项目根目录初始化 Git 仓库：

    git init

  2. 创建 .gitignore文件，忽略不需要版本控制的文件和目录：

    node_modules
dist

  3. 提交代码：

    git add .
git commit -m "Initial commit"

在这里插入图片描述

相关文章：

【React 】开发环境搭建详细指南

文章目录 一、准备工作1. 安装 Node.js 和 npm2. 选择代码编辑器 二、创建 React 项目1. 使用 Create React App2. 手动配置 React 项目 三、集成开发工具1. ESLint 和 Prettier2. 使用 Git 进行版本控制 在现代前端开发中&#xff0c;React 是一个非常流行的框架&#xff0c;用…...

编程日记 2024/7/28 22:37:52

结构体笔记

结构体 C语言中的数据类型&#xff1a; 基本数据类型&#xff1a;char/int/short/double/float/long 构造数据类型&#xff1a;数组&#xff0c;指针&#xff0c;结构体&#xff0c;共用体&#xff0c;枚举 概念&#xff1a; 结构体是用户自定义的一种数据类型&#xff0c…...

编程日记 2024/7/28 22:36:52

Elasticsearch：Golang ECS 日志记录 - zerolog

ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松地将日志格式化为与 ECS 兼容的 JSON。在本教程中&#xff0c;我将详述如何 编码器以 JSON 格式记录日志&#xff0c;并以 ECS 错误格式处理错误字段的记录。 默认情况下&#xff0c;会添加以下字段&…...

编程日记 2024/7/28 22:34:48

Ip2region - 基于xdb离线库的Java IP查询工具提供给脚本调用

文章目录 Pre效果实现git clone编译测试程序将ip2region.xdb放到指定目录使用改进最终效果 Pre OpenSource - Ip2region 离线IP地址定位库和IP定位数据管理框架 Ip2region - xdb java 查询客户端实现 效果 最终效果 实现 git clone git clone https://github.com/lionsou…...

编程日记 2024/7/28 22:32:45

研发管理革命：探索顶尖的工时系统选择

国内外主流的10款研发工时管理系统对比&#xff1a;PingCode、Worktile、无鱼项目工时系统、Toggl Track、泽众ALM、Asana、Jira、GitHub、Trello、TrackingTime。 在研发团队中&#xff0c;工时管理常常成为效率瓶颈&#xff0c;尤其是在资源分配和项目进度跟踪方面。选择合适…...

编程日记 2024/7/28 22:31:44

微服务-MybatisPlus下

微服务-MybatisPlus下 文章目录 微服务-MybatisPlus下1 MybatisPlus扩展功能1.1 代码生成1.2 静态工具1.3 逻辑删除1.4 枚举处理器1.5 JSON处理器**1.5.1.定义实体****1.5.2.使用类型处理器** **1.6 配置加密&#xff08;选学&#xff09;**1.6.1.生成秘钥**1.6.2.修改配置****…...

编程日记 2024/7/28 22:24:37

【python_将一个列表中的几个字典改成二维列表，并删除不需要的列】

def 将一个列表中的几个字典改成二维列表(original_list,headersToRemove_list):# 初始化一个列表用于存储遇到的键&#xff0c;保持顺序ordered_keys []# 遍历data中的每个字典&#xff0c;添加其键到ordered_keys&#xff0c;如果该键还未被添加for d in original_list:for …...

编程日记 2024/7/28 22:23:36

IDEA的pom.xml显示ignored 的解决办法

问题&#xff1a; idea中创建Maven module时&#xff0c;pom.xml出现ignored。 原因&#xff1a; 相同名称的module在之前被创建删除过&#xff0c;IDEA会误以为新的同名文件是之前删除掉的&#xff0c;将这个新的module的pom.xml文件忽略掉显示ignored. 解决&#xff1a; 在…...

编程日记 2024/7/28 22:22:35

2. 卷积神经网络无法绕开的神——LeNet

卷积神经网络无法绕开的大神——LeNet 1. 基本架构2. LeNet 53. LeNet 5 代码 1. 基本架构 特征抽取模块可学习的分类器模块 2. LeNet 5 LeNet 5: 5 表示的是5个核心层&#xff0c;2个卷积层&#xff0c;3个全连接层.核心权重层&#xff1a;卷积层、全连接层、循环层&#xff…...

编程日记 2024/7/28 22:21:33

【区块链】JavaScript连接web3钱包，实现测试网络中的 Sepolia ETH余额查询、转账功能

审核看清楚了 &#xff01; 这是以太坊测试网络&#xff01;用于学习的测试网络&#xff01;&#xff01;&#xff01; 有关web3 和区块链的内容为什么要给我审核不通过&#xff1f; 别人凭什么可以发&#xff01; 目标成果&#xff1a; 实现功能分析&#xff1a; 显示账户信…...

编程日记 2024/7/28 22:19:31

关于珞石机器人二次开发SDK的posture函数的算法RX RY RZ纠正 C#

在珞石SDK二次开发的函数钟&#xff0c;获取当前机器人位姿的函数posture函数在输出时会发现数据不正确&#xff0c;与示教器数据不一致。 其中第一个数据正确 第二三各数据为相反 第四五六各数据为弧度制 转换方法为(弧度/PI)*180度 然后发现第四个数据还要加上180度 第五…...

编程日记 2024/7/28 22:18:30

【Three.js基础学习】17.imported-models

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 课程回顾&#xff1a; 如何在three.js 中引入不同的模型&#xff1f; 1. 格式 &#xff08;不同的格式&#xff09; https://en.wikipedia.org/wiki/List_of_file_form…...

编程日记 2024/7/28 22:16:28

Spring Bean - xml 配置文件创建对象

类型&#xff1a; 1、值类型 2、null &#xff08;标签&#xff09; 3、特殊符号 &#xff08;< -> < &#xff09; 4、CDATA <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/bea…...

编程日记 2024/7/28 22:12:24

uniapp map组件自定义markers标记点

需求是根据后端返回数据在地图上显示标记点&#xff0c;并且根据数据状态控制标记点颜色&#xff0c;标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…...

编程日记 2024/7/28 22:08:20

Windows：批处理脚本学习

目录 一、第一个批处理文件 1. &&和 | | 2. | 和 & 二、变量 1.传参变量%name 2.初始化变量set命令 3.变量的使用 4.局部变量与全局变量 5.使用环境变量 6.扩充变量语法 三、注释REM和 &#xff1a;&#xff1a; 四&#xff1a;函数 1.定义函数 2.…...

编程日记 2024/7/28 22:03:14

Dav_笔记10：Using SQL Plan Management之4

SQL管理库 SQL管理库（SMB）是驻留在SYSAUX表空间中的数据字典的一部分。它存储语句日志，计划历史记录，SQL计划基准和SQL配置文件。为了允许每周清除未使用的计划和日志，SMB使用自动空间管理。 您还可以手动将计划添加到SMB以获取一组SQL语句。从Oracle Database 11g之前的…...

编程日记 2024/7/28 22:02:13

通过json传递请求参数，如何处理动态参数和接口依赖

嗨&#xff0c;大家好&#xff0c;我是兰若姐姐&#xff0c;今天给大家讲一下如何通过json传递请求参数&#xff0c;如何处理动态参数和接口依赖 1. 使用配置文件和模板 在 test_data.json 中&#xff0c;你可以使用一些占位符或模板变量&#xff0c;然后在运行测试之前&…...

编程日记 2024/7/28 22:01:12

[240727] Qt Creator 14 发布 | AMD 推迟 Ryzen 9000芯片发布

目录 Qt Creator 14 发布Qt Creator 14 版本发布&#xff0c;带来一系列新功能和改进终端用户可通过命令行方式查看此新闻终端用户可通过命令行方式安装软件&#xff1a; AMD 推迟 Ryzen 9000芯片发布 Qt Creator 14 发布 Qt Creator 14 版本发布&#xff0c;带来一系列新功能…...

编程日记 2024/7/28 22:00:11

PLSQL Developer工具查询数据，报错（动态性能表不可访问）

解决的问题&#xff1a; 解决方案&#xff1a; 在配置-首选项-选项&#xff0c;取消勾选“自动统计”&#xff0c;保存之后即可查询数据...

编程日记 2024/7/28 21:59:10

基于 HTML+ECharts 实现智慧交通数据可视化大屏（含源码）

构建智慧交通数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 随着城市化进程的加快&#xff0c;智慧交通系统已成为提升城市管理效率和居民生活质量的关键。通过数据可视化&#xff0c;交通管理部门可以实时监控交通流量、事故发生率、道路状况等关键指标&#xff0c;…...

编程日记 2024/7/28 21:57:08

探索 IT 领域的新宠儿：量子计算

目录 引言&#xff1a;从经典到量子的飞跃 量子计算的基本概念 量子计算的独特优势 量子计算的深度剖析 量子计算的最新进展 量子计算的行业应用前景 面临的挑战与未来展望 结语&#xff1a;迎接量子计算的新时代 引言&#xff1a;从经典到量子的飞跃 在信息技术飞速发…...

编程日记 2024/7/28 21:56:07

TSPNet代码分析

论文《Realigning Confidence with Temporal Saliency Information for Point-Level Weakly-Supervised Temporal Action Localization》的official code分析 论文解读 代码分析 先看看训练过程，执行main if __name__ == __main__:exp = Exp()if exp.config.mode == eval:…...

编程日记 2024/7/28 21:51:03

Ubuntu上安装anaconda创建虚拟环境（各种踩坑版）

之前都是在Windows桌面版进行深度学习的环境部署及训练&#xff0c;今天尝试了一下在Ubuntu上进行环境部署&#xff0c;踩了不少坑&#xff0c;提供一些解决办法给大家避雷。 目录 一、下载和安装anaconda 1. 下载 2. 安装 二、创建虚拟环境 一、下载和安装anaconda 1. …...

编程日记 2024/7/28 21:44:57

DC-5靶机通关

今天我们来学习DC-5靶机&#xff01;&#xff01;&#xff01; 1.实验环境 攻击机&#xff1a;kali2023.2 靶机&#xff1a;DC-5 2.1扫描网段 2.2扫描端口 这里后面这俩端口有点似曾相识啊&#xff0c;在dc3里面好像见过&#xff0c;那咱们给这两个端口来个更详细的扫描&…...

编程日记 2024/7/28 21:43:56

AI学习记录 -使用react开发一个网页，对接chatgpt接口，附带一些英语的学习prompt

实现了如下功能&#xff08;使用react实现&#xff0c;原创&#xff09; 实现功能&#xff1a; 1、对接gpt35模型问答&#xff0c;并实现了流式传输&#xff08;在java端&#xff09; 2、在实际使用中&#xff0c;我们的问答历史会经常分享给他人&#xff0c;所以下图的 copy …...

编程日记 2024/7/28 21:40:53

MongoDB多数据源配置与切换

在MongoDB中配置和使用多数据源主要涉及以下几个步骤&#xff1a; 定义多个数据源的配置&#xff1a; 在应用程序的配置文件中&#xff0c;定义多个MongoDB的数据源&#xff0c;例如在Spring Boot中可以通过application.yml或application.properties文件进行配置。 创建多个Mo…...

编程日记 2024/7/28 21:37:47

Mongodb入门介绍

文章目录 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库2、适合场景&#xff1a;3、不适合场景&#xff1a;4、概念5、总结 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库 2、适合场景&#xff1a; 1、web网站数据存储&#xff…...

编程日记 2024/7/28 21:30:37

docker前端部署

挂载&#xff0c;把自己的目录位置&#xff0c;挂载到容器内的HTML...

编程日记 2024/7/28 21:28:36

指标体系建设的方法论

一、分析痛点 了解当前数仓侧与业务应用方对指标到不到、难使用的痛点及日常指标使用习惯&#xff0c;制定指标中心所需功能并设计指标中心样式。 二、指定指标规范 定义指标类型、指标使用方、确定指标域(这里是数据域)、指标要具备的属性(业务/技术口径、负责人、类型等)。 …...

编程日记 2024/7/28 21:27:35

乐鑫ESP32-H2设备联网芯片，集成多种安全功能方案，启明云端乐鑫代理商

在数字化浪潮的推动下&#xff0c;物联网正以前所未有的速度融入我们的日常生活。然而&#xff0c;随着设备的激增&#xff0c;安全问题也日益成为公众关注的焦点。 乐鑫ESP32-H2致力于为所有开发者提供高性价比的安全解决方案&#xff0c;这款芯片经过专门设计以集成多种安全…...

编程日记 2024/7/28 21:25:32