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

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

news 2026/3/27 22:12:43

文章目录

    • 一、准备工作
      • 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微实验】这就deepseek对音频处理的理解╮(╯▽╰)╭

【手把手】零基础用PythonLibrosa搞定古琴音高识别&#xff0c;附完整代码1. 为什么要用代码“听”古琴&#xff1f;——传统音乐数字化的第一关1.1 从“泠泠七弦上”到“0和1”&#xff1a;音乐信息检索的价值1.2 核心任务拆解&#xff1a;基频&#xff08;F0&#xff09;是什…...

编程新知 2026/3/27 22:08:04

联想ThinkPad声卡驱动安装避坑指南：从E470到X1 Carbon的通用解法

ThinkPad声卡驱动安装全攻略&#xff1a;从型号识别到疑难排解 ThinkPad作为商务笔记本的代表&#xff0c;其稳定性和兼容性一直备受推崇。但即便是这样成熟的产品线&#xff0c;声卡驱动问题依然困扰着不少用户——从经典的E470到高端的X1 Carbon&#xff0c;不同机型可能面临…...

编程新知 2026/3/27 21:54:01

SWF逆向工程标准化文档：JPEXS Free Flash Decompiler实施指南

SWF逆向工程标准化文档&#xff1a;JPEXS Free Flash Decompiler实施指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的SWF逆向工程工具&…...

编程新知 2026/3/27 21:11:46

PCap04电容测量实战：从传感器连接到串口通信的完整指南

PCap04电容测量实战&#xff1a;从传感器连接到串口通信的完整指南 当工程师面对高精度电容测量需求时&#xff0c;PCap04芯片往往成为解决复杂问题的关键。这款集成了数字信号处理能力的电容数字转换器(CDC)&#xff0c;能够将皮法级电容变化转化为精确的数字信号。不同于传统…...

编程新知 2026/3/27 21:05:44

Spring Framework测试框架完整指南：从单元测试到集成测试的10个最佳实践

Spring Framework测试框架完整指南&#xff1a;从单元测试到集成测试的10个最佳实践 【免费下载链接】spring-framework spring-projects/spring-framework: 一个基于 Java 的开源应用程序框架&#xff0c;用于构建企业级 Java 应用程序。适合用于构建各种企业级 Java 应用程序…...

编程新知 2026/3/27 20:53:39

OpenCV4编译后pkg-config失效？教你如何正确生成opencv4.pc文件（附完整CMake参数）

OpenCV4编译实战&#xff1a;从源码构建到pkg-config配置全解析 在Linux环境下从源码编译OpenCV4是许多计算机视觉开发者的必经之路&#xff0c;但不少人在成功编译后却发现pkg-config --modversion opencv命令报错"找不到opencv包"。这并非你的操作失误&#xff0c;…...

编程新知 2026/3/27 20:29:33

MIB2 High Toolbox：重新定义车载娱乐系统定制体验

MIB2 High Toolbox&#xff1a;重新定义车载娱乐系统定制体验 【免费下载链接】mib2-toolbox The ultimate MIB2-HIGH toolbox. 项目地址: https://gitcode.com/gh_mirrors/mi/mib2-toolbox 车载娱乐系统是否还停留在出厂设置&#xff1f;想要个性化界面却苦于没有工具&…...

编程新知 2026/3/27 20:27:32

Wan2.2-I2V-A14B镜像免配置实战：开箱即用，省去PyTorch/CUDA环境冲突烦恼

Wan2.2-I2V-A14B镜像免配置实战&#xff1a;开箱即用&#xff0c;省去PyTorch/CUDA环境冲突烦恼 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;基于RTX 4090D 24GB显存显卡和CUDA 12.4环境深度定制。这个镜像的最大特点是开箱…...

编程新知 2026/3/27 20:23:30

AI驱动关键词优化的SEO未来趋势与实际应用解析

本文旨在探讨AI在搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;特别是关键词优化领域的重要角色。文章分析了AI技术如何通过数据分析和用户行为洞察&#xff0c;帮助企业制定更加有效的关键词策略。AI能够实时监测市场趋势&#xff0c;识别用户意图&#xff0c;并根据这…...

编程新知 2026/3/27 19:57:04

SELF-REFINE in Action: Enhancing LLM Outputs Through Iterative Self-Feedback

1. 什么是SELF-REFINE&#xff1f;为什么LLM需要自我迭代&#xff1f; 想象一下你正在写一封重要邮件。第一稿可能直接了当但缺乏礼貌&#xff0c;经过几次修改后&#xff0c;措辞变得更加得体。这就是人类通过自我反馈不断完善的过程。现在&#xff0c;大型语言模型&#xff0…...

编程新知 2026/3/27 19:51:03