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  

没有报错就算完成了

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

相关推荐
闲人编程6 小时前
Django与前端框架集成:Vue.js、React的完美配合
vue.js·django·前端框架·react·codecapsule·分离式部署
Tongfront14 小时前
前端通用submit方法
开发语言·前端·javascript·react
ArabySide1 天前
【ASP.NET Core】ASP.NET Core应用的Docker容器化与阿里云托管
阿里云·docker·asp.net
在未来等你4 天前
AI Agent设计模式 Day 19:Feedback-Loop模式:反馈循环与自我优化
设计模式·llm·react·ai agent·plan-and-execute
A3608_(韦煜粮)4 天前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
William_cl4 天前
【ASP.NET Core】Controller 层 Action 返回值精讲:JsonResult(AJAX 交互核心)
ajax·asp.net·交互
宝桥南山6 天前
.NET 10 - Blazor web assembly应用的一些诊断方式
microsoft·微软·c#·asp.net·.net·.netcore
safestar20126 天前
React 性能优化之Fiber 架构深度解析:从堆栈调和到增量渲染的革命
前端·javascript·react
Jackson@ML7 天前
用ASP.NET创建一个Blazer Web应用程序
前端·asp.net·blazor
aiguangyuan8 天前
React 18 源码解读(一)
javascript·react·前端开发