我是ReactJs的新手，所以我尝试在Visual Studio中使用TypeScript创建一个新项目。默认情况下，Visual Studio为我提供了带有javascript的模板，因此我在Visual Studio中创建了一个新的空项目。
比我已经使用Nuget在软件包下面安装了
npx create-react-app my-app --template typescript
Install-Package Microsoft.AspNetCore.SpaServices.Extensions -Version 2.1.1
然后，在我构建项目但是在项目中遇到很多错误之后，所以我使用JS模板创建了带有react的项目，并在.csproj文件中的Line下面复制了它并正常工作。但是我不明白为什么我们需要把这一行手动在.csproj文件中。
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
所以我的问题是，为什么我们需要在项目中手动添加此行，以及是否有比请告诉我更好的方法来实现.net core的react js，这样我才能在Visual Studio中使用它。
最佳答案
我个人建议学习并使用Webpack和NPM来管理所有前端内容，并且不要弄乱模板或Nuget包。无论如何，这些都是值得了解的技术。我知道一开始这很令人困惑，开始时涉及很多繁琐的工作，并且没有唯一正确的方法，但是最后最好是自己掌握构建过程。
这是我将要描述的步骤的仓库：https://github.com/tedchirvasiu/net-core-react-ts-starter
步骤1：从https://nodejs.org/en/download/安装Node和NPM（如果尚未安装）
步骤2：创建一个新的空.Net Core Web应用程序。我们将为此尽一切可能。
步骤3：打开命令窗口，并将工作目录更改为项目文件夹。或者，在VS中，可以右键单击项目，然后单击“在文件资源管理器中打开文件夹”。然后在Windows资源管理器的地址栏中键入“ cmd”。这应该打开一个已经设置了工作目录的cmd窗口。
现在，在命令窗口中键入以下两个命令：
npm init -y
npm install --save-dev webpack webpack-cli clean-webpack-plugin html-webpack-plugin typescript ts-loader react react-dom @types/react @types/react-dom
第一行将初始化package.json文件。第二行将安装webpack，react，打字稿，reacting的类型以及我们将在构建过程中使用的几个webpack插件。
步骤4：由于这将是一个单页应用程序，因此我们将需要一个主控制器和一个视图来呈现初始页面。因此，转到您的项目，右键单击，添加->新文件夹，然后创建一个名为“ Controllers”的文件夹。右键单击新创建的文件夹，转到“添加->控制器...”，然后创建一个名为DefaultController的新的空MVC控制器。这应该只是一个Index方法返回一个View（）。
步骤5：创建一个名为“ Views”的文件夹，并在其中创建一个名为“ Default”的文件夹，以匹配您的DefaultController。到目前为止，基本的MVC内容。这有一些不同：您将创建一个名为“ Index_template.cshtml”的文件，其中包含以下内容
<!DOCTYPE html>
<html>
<head>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= '@Url.Content("~' + htmlWebpackPlugin.files.css[css] + '")' %>" rel="stylesheet">
<% } %>
</head>
<body>
<div id="app"></div>
<script>
window.baseUrl = "@Url.Content("~/")";
window.resourcesBaseUrl = "@Url.Content("~/dist/")";
</script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= '@Url.Content("~' + htmlWebpackPlugin.files.chunks[chunk].entry + '")' %>"></script>
<% } %>
</body>
</html>为什么使用_template？每当您在前端代码中更改某些内容时，Webpack都会重建您的应用并创建一个新的bundle（包含您所有代码的新的大javascript文件），并且该bundle每次都具有不同的名称（因为它包含一个哈希，因此您不会缓存有问题）。我们不想每次生成新的包时都在视图中手动更新脚本引用，因此我们将使用Webpack生成实际的Index.cshtml文件。您会发现它甚至不是有效的cshtml（如果引起问题，可以将扩展名更改为其他名称），因为它具有类似于
步骤6：更新您的Startup.cs以使用MVC，提供静态文件（以获取我们的javascript代码），并将所有未使用的路径路由到我们的DefaultController。
public void ConfigureServices(IServiceCollection services) {
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.UseMvc(routes => {
routes.MapRoute("default", "{controller=Default}/{action=Index}");
routes.MapRoute("catch-all", "{*url}", new { controller = "Default", action = "Index" });
});
}
步骤7：在您的项目中，创建一个名为“ tsconfig.json”的新文件，其内容如下：
{
"compilerOptions": {
"baseUrl": "./",
"target": "es5",
"lib": [
"es2017",
"dom"
],
"sourceMap": true,
"allowJs": true,
"noImplicitAny": false,
"moduleResolution": "node",
"jsx": "react"
}
}确保将“构建操作”设置为“无”，否则VS可能对此感到烦恼，并开始为您编译ts文件。
步骤8：现在我们需要配置webpack。使用以下代码在项目根目录中创建另一个名为“ webpack.config.js”的文件：
const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/main.tsx'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
include: path.resolve(__dirname, "src"),
}
]
},
plugins: [
new CleanWebpackPlugin(), //This empties the dist folder
new HtmlWebpackPlugin({
chunks: ['app'],
inject: false, //We generate the tags manually with lodash templating
template: path.resolve(__dirname, 'Views/Default/Index_template.cshtml'), //This is our template
filename: path.resolve(__dirname, 'Views/Default/Index.cshtml') //This is our actual Index.cshtml file
})
],
output: {
filename: devMode ? '[name].bundle.[hash].js' : '[name].bundle.[chunkhash].js',
path: path.resolve(__dirname, 'wwwroot/dist'), //This is where our bundles are going to go
publicPath: '/dist/'
}
};步骤9：我们几乎完成了设置。现在，我们要做的就是为要用于构建的命令创建一些快捷方式。转到package.json文件，并在“脚本”对象内，使用以下命令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "set NODE_ENV=development&& webpack -d",
"watch": "set NODE_ENV=development&& webpack --watch -d",
"build": "set NODE_ENV=production&& webpack -p"
}
步骤10：好的，这就是设置步骤。剩下要做的就是在项目中创建一个名为“ src”的新文件夹。在这里，您将拥有所有用于前端内容的源代码。在src内创建一个main.tsx文件。这将是您的切入点。在其中粘贴以下hello-world代码：
import * as React from 'react'
import * as ReactDOM from 'react-dom'
ReactDOM.render(<div>Hello world!</div>, document.getElementById('app'));步骤11：最后，让我们构建并运行我们的应用程序。在您在步骤3中打开的命令窗口中，键入
npm run watch
这将运行我们在package.json文件的第9步中指定的命令。现在，webpack将构建我们的应用程序并观察任何更改。如果发现src中的代码已被修改，它将自动重建。准备发布时，请使用“ npm run build”来创建优化的捆绑包。
现在只需点击播放并运行服务器（F5）。您应该会看到自己的hello world react应用程序:)
不要忘了查看回购以供参考。
关于reactjs - 使用Typescript在Visual Studio 2017中 react Js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59766815/