React + ASP.NET Core 项目笔记一:项目环境搭建(一)

不重要的目录标题

前提条件

安装dotnet core sdk

安装Node.js + npm

第一步:新建文件夹

选择喜欢的位置新建文件夹,然后开始摸鱼 然后进行下一步

第二步:使用VS/ VS code/cmd 打开该文件夹

在终端或cmd中直接运行

bash 复制代码
cd yourProjectAddress
dotnet new react

VS Code 如下图

第三步:安装依赖

我们新初始化的项目并没有安装包,特别是前端部分,所以需要先安装

bash 复制代码
cd ClientApp
npm install #按照package.json安装
# 另外也可以使用以下语句单独安装
npm install <package_name>

第四步:试运行react

使用以下语句运行

bash 复制代码
npm start

顺利的话会出现这样的结果

之后点开跳转到网页看看

可能会出现这种情况

点击Advanced, 再点击Proceed前往就行

看到这样的网页就算完成了

第五步:整理项目结构

右键新建文件夹src,然后把.Net的一些文件挪过去

之后在src同级目录下运行,创建解决方案

bash 复制代码
dotnet new sln

之后会出现项目名.sln

bash 复制代码
dotnet sln add src/yourProject.csproj

将项目"yourProject.csproj"添加到解决方案中。

之后编辑src/yourProject.csproj

替换SpaRoot 这行,改变目录,因为文件位置改了

bash 复制代码
<SpaRoot>..\ClientApp\</SpaRoot> #new
<SpaRoot>ClientApp\</SpaRoot> #old

最后尝试一下打包

bash 复制代码
dotnet build  

没有报错就算完成了

如果有帮助到你,点个赞吧!!!

相关推荐
全栈探索者2 天前
@Component + struct = 你的新函数组件——React 开发者的鸿蒙入门指南(第 2 期)
react·harmonyos·arkts·前端开发·deveco studio·鸿蒙next·函数组件
奔跑的呱呱牛3 天前
viewer-utils 图片预览工具库
javascript·vue·react
HetFrame3 天前
一种纯前端实现 Markdown 内容即时分享的思路
html·react·链接·markdown·工具
小浣熊喜欢揍臭臭3 天前
qiankun微服务搭建之【react+nextJs】
微服务·react
奥特曼打小白4 天前
Microsoft SQL Server2025的下载、安装与配置——从环境、管理工具、配置管理器入手,解决VS2022ASP.NET网站项目中SqlDataSource控件找不到服务器的问题
sqlserver·asp.net
William_cl4 天前
ASP.NET路由类型约束核心精讲:[HttpGet (“{id:int}“)] 整数约束吃透,附避坑指南 + 实战代码
后端·asp.net
步步为营DotNet5 天前
深入理解ASP.NET Core Middleware:管道执行机制与高效应用
后端·asp.net
gentle coder5 天前
【langchain】agent部署的基础入门代码(持续更新中~)
python·langchain·react
RichardLau_Cx6 天前
【保姆级实操】MediaPipe SDK/API 前端项目接入指南(Web版,可直接复制代码)
前端·vue·react·webassembly·mediapipe·手部追踪·前端计算机视觉
小小工匠6 天前
大模型开发 - 零手写 AI Agent:深入理解 ReAct 模式与 Java 实现
人工智能·react