在 Visual Studio、MVC5 项目中使用 ReactJS 和 TypeScript答案

【问题标题】：Using ReactJS together with TypeScript in Visual Studio, MVC5 project在 Visual Studio、MVC5 项目中使用 ReactJS 和 TypeScript
【发布时间】：2017-02-19 13:02:01
【问题描述】：

我正在尝试构建一个最小的工作示例，以便在 Visual Studio 2015 中使用 ReactJS 和 TypeScript。

在学习了大多数教程后，发现它们都不起作用，也没有一个完全针对我的需求。

我想将组件编写为 .tsx 文件以具有类型安全性并重用已编写的现有类、定义和接口。

这些应转换为.jsx，以便在cshtml中用作React.render(<SomeComponent />, document.getElementById("content"))。

根据我的项目配置，我会在 SomeCompnent.tsx 中收到 require is not a function 或意外的错误。

以后应该可以使用 ReactJS.NET 的服务器端渲染来提高性能/用户体验。

我是否缺少任何描述如何从头开始使用 TypeScript、ReactJS、Visual Studio 2015、MVC5 的教程？

这些是我项目属性的TypeScript Build 选项卡中的设置：

<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

这是我SomeComponent.tsx的内容

import * as React from "react";
import * as ReactDOM from "react-dom";

interface IProps {
    name:string
}

class SomeComponent extends React.Component<IProps, undefined> {
    render() {
        return <div>Say hello to {this.props.name}</div>;
    }
}

export function render(componentName:string, mountNode: HTMLElement) {
    ReactDOM.render(<SomeComponent name={componentName} />, mountNode);
}

我的 App.ts：

import * as ReactDOM from "react-dom";
import {render} from "./Components/SomeComponent";

render("some name", document.getElementById("content"));

转换为 App.js：

"use strict";
var SomeComponent_1 = require("./Components/SomeComponent");
SomeComponent_1.render("some name", document.getElementById("content"));
//# sourceMappingURL=App.js.map

Index.cshtml 很简单：

<body>
    <div>
        <div id="content"></div>
    </div>
    <script src="~/Scripts/App.js"></script>
</body>

最后但并非最不重要的 package.json

{
  "name": "reactjstest",
  "version": "1.0.0",
  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2"
  },
  "devDependencies": {
    "@types/react": "15.0.9",
    "@types/react-dom": "0.14.23"
  }
}

【问题讨论】：

.tsx文件编译成.js文件也可以和React.render一起使用，不需要编译成.jsx，但这是可能的。请包括您的tsconfig.json 和您导入的代码。
@NitzanTomer 编译成.js 时，我得到的错误信息告诉我require 不是函数。
@NitzanTomer 我没有 tsconfig.json，因为设置存储在 .csproj 文件中。将部分添加到我的问题中

标签： visual-studio reactjs typescript

【解决方案1】：

此设置有效（我没有使用 VS，但您可以理解）：

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs"
    }
}

（您可以选择不同的模块系统）

page.ts

import { render } from "./main";
render("how are you?", document.getElementById("content"));

main.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Prompt } from "./prompt";

class HelloWorld extends React.Component<{ prompt: string }, void> {
    render() {
        return <div>Hello world><Prompt value={ this.props.prompt } /></div>;
    }
}

export function render(prompt: string, mount: HTMLElement) {
    ReactDOM.render(<HelloWorld prompt={ prompt }/>, mount);
}

prompt.tsx

import * as React from "react";

export class Prompt extends React.Component<{ value: string }, void> {
    render() {
        return <span>{ this.props.value }</span>;
    }
}

你需要确保你有 react 包：

npm install --save react react-dom @types/react @types/react-dom

【讨论】：

使用import React = require("react")和import * as React from "react"有什么区别？
import * as X from Y 是新的es6 表单。 import X = require(Y) 是 used when the lib exports 使用 export =。在这种情况下，您可以同时使用两者，但我建议使用第一个 (import * ...)。
我现在收到错误 require is not defined。我已经通过添加相关文件的文件内容来更新我的问题，因为我看不到我缺少什么。错误在import {render} from "./Components/SomeComponent"; 行抛出
您正在使用<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind> 进行编译，但您是否正在使用requirejs 加载您的js 文件？
目前我正在尝试使用 webpack。但这最终会出现在React is not defined。