1. 新建一個(gè)mvc項(xiàng)目（dotnet new mvc 然后 dotnet restore 運(yùn)行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. 運(yùn)行webpack獲取打包后的js娩贷，并引入該js:
9. 再次運(yùn)行dotnet run:
使用TypeScript:
1.用vs2017打開項(xiàng)目,右擊項(xiàng)目，點(diǎn)擊Properties粒褒，設(shè)置如下
*Visual Studio和webpack都會編譯typescript文件（每個(gè)文件會被編譯兩次斤寂，同事vs會編譯沒被用來打包的ts文件）耿焊。我們可以設(shè)置不要讓vs編譯ts文件，但是這樣的結(jié)果就是我們在編輯文件時(shí)也不會有對應(yīng)的檢查遍搞。如果不需要使用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. 再次運(yùn)行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溪猿，然后運(yùn)行dotnet run
Server side Rendering:
1.緊接著上文钩杰，在package.json中添加以下包文件，再npm install 一下
2.更新retrieveData方法
這個(gè)方法負(fù)責(zé)從服務(wù)器端獲取數(shù)據(jù)诊县，客戶端或者服務(wù)器端渲染皆可讲弄。addTask用來把異步請求放入集合中以便服務(wù)器端渲染的時(shí)候會在最后渲染之前等待所有的異步請求完成，否則在渲染的時(shí)候我們就無法確保獲取到了所需的數(shù)據(jù)翎冲。
3. 添加文件：entry-server.tsx? (asp.net core會請求這個(gè)入口文件)
4.修改客戶端用到的入口文件：entry:tsx
5. 修改webpack config文件垂睬，確保其能創(chuàng)建用戶客戶端&服務(wù)器端渲染的bundle文件
這樣改動之后webpack會生成2個(gè)文件，客戶端端渲染（wwwroot/dist 中的 bundle.js），服務(wù)器端渲染 Scripts/Dist 中的bundle-server.js)
6.運(yùn)行webpack
7. 修改_ViewImports.cshtml驹饺，添加taghelper
8. 修改Index文件
9.瀏覽器設(shè)置禁用js
10. 運(yùn)行dotnet run查看
可以看到還是能正常渲染
11. 修改index文件钳枕，看不使用prerendering會如何
12. 刷新頁面
可以看到因?yàn)閖s被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
