React with ASP.NET Core

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中加入如下配置

true

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