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

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

news 2026/2/1 1:06:28

文章目录

    • 一、准备工作
      • 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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/1/24 8:38:47

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/1/21 7:10:24

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/1/31 8:06:43

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2026/1/30 19:52:48

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

编程新知 2026/1/26 17:15:01

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/10/25 19:31:21

Selenium 查找页面元素的方式

Selenium 查找页面元素的方式 Selenium 提供了多种方法来查找网页中的元素&#xff0c;以下是主要的定位方式&#xff1a; 基本定位方式 通过ID定位 driver.find_element(By.ID, "element_id")通过Name定位 driver.find_element(By.NAME, "element_name"…...

编程新知 2026/1/26 17:29:39