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

如何搭建一个react项目（详细介绍）

news 2026/3/26 22:24:55

要搭建一个基本的 React 项目，你需要执行以下步骤。在开始之前，请确保你已经安装了 Node.js 和 npm（Node 包管理器）。

搭建一个React项目

  • 1，创建项目目录
  • 2，初始化项目
  • 3，安装 React 和 ReactDOM
  • 4，安装 Babel
  • 5，创建项目文件
  • 6，配置 Babel
  • 7，创建 React 组件
  • 8，创建 HTML 文件
  • 9，创建 Webpack 配置
  • 10，运行开发服务器
  • 11，查看应用

1，创建项目目录

首先，创建一个项目目录，并在终端中进入该目录。

mkdir my-react-app
cd my-react-app

2，初始化项目

使用以下命令初始化一个新的 npm 项目。按照提示，你可以设置项目名称、版本、描述等信息。

npm init

3，安装 React 和 ReactDOM

使用 npm 安装 React 和 ReactDOM，这两个包是构建 React 应用所必需的。

npm install react react-dom

4，安装 Babel

React 使用 JSX 语法，需要通过 Babel 转译成标准的 JavaScript。安装 Babel 相关依赖：

npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev

5，创建项目文件

在项目目录中，创建一个简单的 React 组件文件和一个 HTML 文件。

在项目根目录创建一个名为 src 的文件夹。

在 src 文件夹中创建一个名为 index.js 的文件，用于编写 React 组件。

在项目根目录创建一个名为 index.html 的文件，用于加载 React 应用。

6，配置 Babel

在项目根目录创建一个名为 .babelrc 的文件，并配置 Babel 的预设：

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

7，创建 React 组件

编写一个简单的 React 组件，例如：

//在这里插入代码片 src/index.js
import React from 'react';
import ReactDOM from 'react-dom';function App() {return <h1>Hello, React!</h1>;
}ReactDOM.render(<App />, document.getElementById('root'));

8，创建 HTML 文件

在项目根目录的 index.html 文件中创建一个容器元素，该元素将用于渲染 React 应用。示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>React App</title>
</head>
<body><div id="root"></div><script src="dist/bundle.js"></script>
</body>
</html>

9，创建 Webpack 配置

使用 Webpack 来构建和打包 React 应用。首先，安装必要的依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev

在项目根目录中创建一个名为 webpack.config.js 的配置文件，配置 Webpack：

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

10，运行开发服务器

在终端中运行开发服务器：

npx webpack-dev-server --mode development

11，查看应用

在浏览器中访问 http://localhost:3000，你将看到 React 应用程序运行。

相关文章：

如何搭建一个react项目（详细介绍）

要搭建一个基本的 React 项目&#xff0c;你需要执行以下步骤。在开始之前&#xff0c;请确保你已经安装了 Node.js 和 npm&#xff08;Node 包管理器&#xff09;。 搭建一个React项目 1&#xff0c;创建项目目录2&#xff0c;初始化项目3&#xff0c;安装 React 和 ReactDOM4…...

编程日记 2023/9/14 5:41:14

ActiveMQ用法

ActiveMQ 和 JMS的关系&#xff1f; ActiveMQ是流行的开源消息中间件&#xff0c;JMS是Java平台定义的一种消息传递的标准。ActiveMQ实现了JMS规范&#xff0c;因此可以使用JMS API来与ActiveMQ进行交互。 JMS定义了一种标准的API。API包括了一些接口和类&#xff0c;用于创建…...

编程日记 2023/9/14 5:40:13

TouchGFX之缓存位图

位图缓存是专用RAM缓冲区&#xff0c;应用可将位图保存&#xff08;或缓存&#xff09;在其中。 如果缓存了位图&#xff0c;在绘制位图时&#xff0c;TouchGFX将自动使用RAM缓存作为像素来源。位图缓存在许多情况下十分有用。 从RAM读取数据通常比从闪存读取要快&#xff08;特…...

编程日记 2023/9/14 5:39:12

线性代数的本质(十)——矩阵分解

文章目录 矩阵分解LU分解QR分解特征值分解奇异值分解奇异值分解矩阵的基本子空间奇异值分解的性质矩阵的外积展开式 矩阵分解 矩阵的因式分解是把矩阵表示为多个矩阵的乘积&#xff0c;这种结构更便于理解和计算。 LU分解 设 A A A 是 m n m\times n mn 矩阵&#xff0c;…...

编程日记 2023/9/14 5:37:11

vue实现鼠标拖拽div左右移动的功能

直接代码&#xff1a; <template><div class"demo"><div class"third-part" id"发展历程"><div class"title">发展历程</div><div class"content" id"nav" v-if"dataList…...

编程日记 2023/9/14 5:34:08

基于Python和mysql开发的商城购物管理系统分为前后端(源码+数据库+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python和mysql开发的商城购物管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过…...

编程日记 2023/9/14 5:33:07

MySQL内外连接、索引特性

目录 内连接 外连接 索引特性 理解索引 删除索引 MySQL内外连接是一种用于联接两个或多个表的操作。内连接只返回满足连接条件的行&#xff0c;外连接返回满足条件和不满足条件的行。 内连接 SQL如下&#xff1a; SELECT ... FROM t1 INNER JOIN t2 ON 连接条件 [INNER …...

编程日记 2023/9/14 5:32:06

滚动条设置

不同浏览器滚动条样式及滚动定位 是否可以滚动 overflow&#xff1a;scroll overflow&#xff1a;autooverflow:scroll – 只有超出了盒子才会有滚动条 overflow:auto – 一直有滚动的盒子&#xff0c;只是超出了盒子才会出现滚动条滑块&#xff0c;可以滚动 谷歌浏览器滚动…...

编程日记 2023/9/14 5:29:03

【AI】机器学习——感知机

文章目录 4.1 感知机基本概念4.2 策略4.2.1 数据集的线性可分性4.2.2 学习策略目标损失函数的构造关于距离的解释 4.3 算法4.3.1 原始形式损失函数的梯度下降法 4.3.2 PLA例题4.3.3 算法收敛性 4.4 PLA对偶形式4.4.1 原始PLA分析4.4.2 PLA对偶形式4.4.3 优点 4.1 感知机基本概念…...

编程日记 2023/9/14 5:28:02

蓝牙遥控器在T2-U上的应用

文章目录 简介优势使用流程示例代码遥控器命令表遥控器代码实现开启遥控器配对功能运行 简介 Tuya beacon 协议是基于 BLE 广播通信技术&#xff0c;完善配对解绑、组包拆包、群组管理、加密解密、安全策略&#xff0c;形成的一种轻量、安全的可接入涂鸦云的蓝牙协议。 蓝牙 …...

编程日记 2023/9/14 5:27:00

数据驱动的数字营销与消费者运营

引言&#xff1a;基于海洋馆文旅企业在推广宣传中&#xff0c;如何通过指标体系量化分析广告收益对业务带来的收益价值的思考&#xff1f; 第一部分:前链路引流投放的策略与实战 1.1 动态广告的实现: 偶然与必然 动态广告是一种基于实时数据和用户行为的广告形式&#xff0c;它…...

编程日记 2023/9/14 5:25:59

Qt点亮I.MX6U开发板的一个LED

本篇开始将会介绍与开发版相关的Qt项目&#xff0c;首先从点亮一个LED开始。I.MX6U和STM32MP157的相关信息都会用到&#xff0c;但是后期还是将I.MX6U的学习作为重点。当然其他开发版的开发也可以参考本博文。 文章目录 1. Qt是如何操控开发板上的一个LED2. 出厂内核设备树中注…...

编程日记 2023/9/14 5:24:58

网络摄像头-流媒体服务器-视频流客户端

取电脑的视频流 当涉及交通事件检测算法和摄像头视频数据处理时&#xff0c;涉及的代码案例可能会非常复杂&#xff0c;因为这涉及到多个组件和技术。以下是一个简单的Python代码示例&#xff0c;演示如何使用OpenCV库捕获摄像头视频流并进行实时车辆检测&#xff0c;这是一个…...

编程日记 2023/9/14 5:21:56

Django05_反向解析

Django05_反向解析 5.1 反向解析概述 随着功能的不断扩展&#xff0c;路由层的 url 发生变化&#xff0c;就需要去更改对应的视图层和模板层的 url&#xff0c;非常麻烦&#xff0c;不便维护。这个时候我们可以通过反向解析&#xff0c;将 url解析成对应的 试图函数 通过 path…...

编程日记 2023/9/14 5:19:52

基于HTML、CSS和JavaScript制作一个中秋节倒计时网页

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 这个项目使用HTML、CSS和…...

编程日记 2023/9/14 5:18:50

富斯I6刷10通道固件

使用USB转串口模块刷写10通道固件 一、下载固件 1. 十通道英文固件 下载地址： https://github.com/benb0jangles/FlySky-i6-Mod-/tree/master 选择 FlySky-i6-Mod–master \ 10ch Mod i6 Updater \ 10ch_MOD_i6_Programmer_V1 路径下的文件，亲测可用。 2. 原版六通道中…...

编程日记 2023/9/14 5:15:46

vector的模拟实现 总结

vector的模拟实现 总结 vector.hTest.cpp vector.h 1、迭代器的实现 #pragma oncenamespace JPC {template<class T>class vector{public://对于存储空间是连续的结构而言&#xff0c;可以用原身指针来 模拟实现 迭代器。typedef T* iterator;typedef const T* const_i…...

编程日记 2023/9/14 5:14:44

k8s中的有状态，无状态，pv、pvc等

数据库是一个典型的有状态服务&#xff0c;他的部署和无状态服务是不一样的。 PostgresSQL----基于Kubernetes部署PostgresSQL-CSDN博客 一、创建SC、PV和PVC存储对象 二、部署PostgresSQL Volume Kubernetes 中文指南——云原生应用架构实战手册 有状态应用&#xff1a; …...

编程日记 2023/9/14 5:12:41

springboot+jxls复杂excel模板导出

JXLS 是基于 Jakarta POI API 的 Excel 报表生成工具&#xff0c;可以生成精美的 Excel 格式报表。它采用标签的方式&#xff0c;类似 JSP 标签&#xff0c;写一个 Excel 模板&#xff0c;然后生成报表&#xff0c;非常灵活&#xff0c;简单&#xff01; Java 有一些用于创建 …...

编程日记 2023/9/14 5:11:40

用selenium webdriver获取网站cookie后，实现免登录上网站

以csdn为例&#xff0c;代码分为两部分。 一、csdn_get_cookies.py为半手动登录网站后获取cookies 二、csdn_use_cookies.py为使用获取到的cookies免登录上网站 #获取登录cookiesfrom selenium import webdriver import jsoncsdn_driver webdriver.Chrome() url "htt…...

编程日记 2023/9/14 5:09:38

拓扑优化避坑指南：SIMP算法在MATLAB里跑不收敛？可能是这5个参数没调对

SIMP算法参数调优实战&#xff1a;解决拓扑优化中的收敛难题 当你第一次在MATLAB中运行SIMP算法时&#xff0c;那种期待与兴奋可能很快就被现实击碎——迭代曲线像过山车一样上下波动&#xff0c;最终结构布满棋盘格&#xff0c;边界模糊不清。这不是算法本身的问题&#xff0c…...

编程新知 2026/3/26 21:27:59

2026降AI率工具红黑榜：降AI率工具怎么选？一篇讲透

千笔AI、ThouPen、豆包是当前适配国内高校AI率检测规范的优质选择&#xff1b;需警惕低质免费工具、无正规检测对接、改写痕迹生硬的平台&#xff1b;建议按降AI效果、学术合规性、使用成本三维度筛选&#xff0c;优先匹配A-B-C模型。 一、红榜&#xff1a;10 款高分论文降AI率…...

编程新知 2026/3/26 21:27:58

5个技巧让你彻底掌握caj2pdf：从开源工具到格式转换的精通指南

5个技巧让你彻底掌握caj2pdf&#xff1a;从开源工具到格式转换的精通指南 【免费下载链接】caj2pdf Convert CAJ (China Academic Journals) files to PDF. 转换中国知网 CAJ 格式文献为 PDF。佛系转换&#xff0c;成功与否&#xff0c;皆是玄学。 项目地址: https://gitcode…...

编程新知 2026/3/26 20:35:46

告别特征工程：用Python+Matplotlib把EEG脑电信号直接变成CNN能吃的时频图

从原始EEG到CNN输入&#xff1a;Python自动化生成时频图全流程解析 深夜的实验室里&#xff0c;显示器上跳动的脑电波形正被转化为一张张彩色图像——这不是科幻场景&#xff0c;而是现代脑机接口研究的日常。传统EEG分析中繁琐的特征工程正在被一种更直观的方法取代&#xff1…...

编程新知 2026/3/26 20:31:46

别再羡慕ECharts了！用PyQt+Matplotlib打造你的专属交互式图表工具（附完整代码）

用PyQtMatplotlib打造媲美ECharts的交互式数据可视化工具 在数据分析领域&#xff0c;Web端的ECharts以其丰富的交互功能广受好评&#xff0c;但当我们开发桌面应用或需要高性能处理大数据时&#xff0c;Python技术栈的开发者常常面临两难选择。Matplotlib虽然性能优异&#xf…...

编程新知 2026/3/26 20:19:43

工业现场的空压机监控总得整点活吧？今天咱们拿MCGS6.2搞个仿真系统，带曲线报警和报表那种。直接上干货，先开工程建个空压机模型

空压机mcgs6.2仿真&#xff0c;带曲线报警和报表界面在设备窗口拖个模拟设备&#xff0c;配四个关键变量&#xff1a;出口压力&#xff08;0-1.6MPa&#xff09;、运行温度&#xff08;0-120℃&#xff09;、电机电流&#xff08;0-50A&#xff09;、运行状态&#xff08;0/1&a…...

编程新知 2026/3/26 19:53:33

基于SpringBoot的租车系统毕设实战：从需求建模到高可用部署

最近在辅导学弟学妹做毕业设计&#xff0c;发现很多“基于SpringBoot的租车系统”项目&#xff0c;虽然功能列表很长&#xff0c;但仔细一看&#xff0c;架构松散&#xff0c;业务逻辑像面条代码&#xff0c;更别提应对真实场景下的并发问题了。今天&#xff0c;我就结合自己做…...

编程新知 2026/3/26 19:39:26

CSS线性渐变实战：5分钟搞定炫酷按钮背景（附完整代码）

CSS线性渐变实战&#xff1a;5分钟搞定炫酷按钮背景&#xff08;附完整代码&#xff09; 最近在重构一个企业官网时&#xff0c;产品经理突然要求把所有按钮的纯色背景换成"更有设计感"的效果。面对30多个不同尺寸的按钮&#xff0c;手动设计图片背景显然不现实。这时…...

编程新知 2026/3/26 19:29:08

具身智能：千亿赛道崛起、多元场景落地与数据标注协同发展

2025被称为“具身智能元年”&#xff01; “具身智能” 也首次被写入中国《政府工作报告》&#xff0c;纳入国家战略规划&#xff0c;各地密集出台专项政策布局赛道。 数据标注作为具身智能涌现的核心基石&#xff0c;也同步完成了从劳动密集型向高技术专业化的范式升级。 具…...

编程新知 2026/3/26 19:06:48

# 数据仓库分层设计指南

从 0 搭建企业级数仓架构&#xff0c;ODS/DWD/DWS/ADS 分层详解&#x1f4cc; 前言 为什么你的 SQL 越来越难维护&#xff1f; 为什么每次加需求都要改一堆表&#xff1f; 为什么数据口径对不上&#xff1f; 根本原因&#xff1a;没有分层设计&#xff01; 这篇文章带你从零设计…...

编程新知 2026/3/26 18:58:41