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

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

news 2026/2/9 17:08:53

要搭建一个基本的 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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23