美文网首页
React with ASP.NET Core

React with ASP.NET Core

作者: wuzinong | 来源:发表于2019-04-22 12:11 被阅读0次

    1. 新建一个mvc项目(dotnet new mvc 然后 dotnet restore 运行dotnet run看是否能正常打开)

    2. npm init

    3. 替换package.json:

    {  

    "version": "1.0.0",  "name": "asp.net",  "private": true,  "dependencies": {    "react": "16.4.1",    "react-dom": "16.4.1"  },   "devDependencies": {    "webpack": "4.15.1",    "webpack-cli": "3.0.8",     "aspnet-webpack": "3.0.0",    "webpack-dev-middleware": "3.1.3",     "babel-loader": "7.1.5",    "babel-preset-react": "6.24.1",    "babel-preset-env": "1.7.0",    "babel-core": "6.26.3"  }

    }

    4. npm install

    5. 新建Scripts文件夹,并建立HelloWorld

    6. 新建 entry

    7. 配置webpack.config.js

    8. 运行webpack获取打包后的js,并引入该js:

    9. 再次运行dotnet run:

    使用TypeScript:

    1.用vs2017打开项目,右击项目,点击Properties,设置如下

    *Visual Studio和webpack都会编译typescript文件(每个文件会被编译两次,同事vs会编译没被用来打包的ts文件)。我们可以设置不要让vs编译ts文件,但是这样的结果就是我们在编辑文件时也不会有对应的检查。如果不需要使用vs的ts检查的话可以在Project > Edit [Project name].csproj中加入如下配置

    <PropertyGroup>

    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

    </PropertyGroup>

    2. 将jsx改为tsx

    3. 更新package.json (npm install)和 webpack.config.js支持ts

    4. 添加tsconfig

    5. 再次运行webpack,获取编译后文件

    添加Redux

    1. 更新package.json

    2. 在Scritps文件夹下添加redux-actions.tsx

    3. 添加redux-reducers.tsx

    4. 修改entry.tsx文件

    5. 添加async-thunks.ts

    6. 改写HelloWorld.tsx

    7. webpack一下,然后在dotnet run

    8. 添加接口

    9. 修改async-thunks文件

    10. 再次webpack,然后运行dotnet run

    Server side Rendering:

    1.紧接着上文,在package.json中添加以下包文件,再npm install 一下

    2.更新retrieveData方法

    这个方法负责从服务器端获取数据,客户端或者服务器端渲染皆可。addTask用来把异步请求放入集合中以便服务器端渲染的时候会在最后渲染之前等待所有的异步请求完成,否则在渲染的时候我们就无法确保获取到了所需的数据。

    3. 添加文件:entry-server.tsx  (asp.net core会请求这个入口文件)

    4.修改客户端用到的入口文件:entry:tsx

    5. 修改webpack config文件,确保其能创建用户客户端&服务器端渲染的bundle文件

    这样改动之后webpack会生成2个文件,客户端端渲染(wwwroot/dist 中的 bundle.js),服务器端渲染 Scripts/Dist 中的bundle-server.js)

    6.运行webpack

    7. 修改_ViewImports.cshtml,添加taghelper

    8. 修改Index文件

    9.浏览器设置禁用js

    10. 运行dotnet run查看

    可以看到还是能正常渲染

    11. 修改index文件,看不使用prerendering会如何

    12. 刷新页面

    可以看到因为js被block住了而且又没有使用prerendering,页面不显示

    Reference: https://alanocoder.com/react-get-started-with-asp-net-core-using-visual-studio/

    https://github.com/wuzinong/JsLearning/tree/master/DotNetCoreSingleApplication/SSR-REACT

    相关文章

      网友评论

          本文标题:React with ASP.NET Core

          本文链接:https://www.haomeiwen.com/subject/eqgqbqtx.html