ReactJS zusammen mit Typoskript in Visual Studio, MVC5 Projekt

Ich versuche, mit einem minimalen Arbeits expample mit TypeScript in Visual Studio 2015ReactJS zusammen mit Typoskript in Visual Studio, MVC5 Projekt

Nachdem Sie die meisten Tutorials zu bauen ReactJS zusammen nichts von ihnen gefunden für die Verwendung arbeiten und keiner von ihnen zielt genau auf meine Bedürfnisse ab.

Ich möchte Komponenten wie .tsx Dateien schreiben, um Typ-Sicherheit zu haben und bestehende Klassen, Definitionen, Schnittstellen, die bereits geschrieben wurden, wiederzuverwenden.

Diese sollten in .jsx konvertiert werden, um die Verwendung als React.render(<SomeComponent />, document.getElementById("content")) in cshtml zu ermöglichen.

Abhängig von meiner Projekt-Konfiguration bekomme ich entweder den Fehler, dass keine Funktion erforderlich ist oder unerwartete < in SomeCompnent.tsx.

Später sollte es auch möglich sein, das serverseitige Rendering von ReactJS.NET zu verwenden, um die Leistung/Benutzererfahrung zu verbessern.

Gibt es ein Tutorial, das ich vermisse, das beschreibt, wie TypeScript, ReactJS, Visual Studio 2015, MVC5 von Grund auf neu zu verwenden?

Dies sind die Einstellungen von der TypeScript Build Registerkarte Eigenschaften meines Projekts:

<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 />

Dies ist der Inhalt meiner 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); 
}

Mein App.ts:

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

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

Das wird in App.js konvertiert:

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

Die Index.cshtml ist einfach:

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

Last but not least 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" 
    } 
}

Quelle

2017-02-19 KingKerosin

'.tsx' Dateien, die in '.js' Dateien kompiliert werden, können auch mit' React.render' verwendet werden, es ist nicht nötig sie in '.jsx' zu kompilieren, aber das ist möglich. Bitte fügen Sie Ihren 'tsconfig.json' und Code, wo Sie importieren. –

@NitzanTomer beim Kompilieren in '.js' Ich am Ende mit dem Fehler sagen mir, dass 'require' ist keine Funktion. – KingKerosin

@NitzanTomer Ich habe kein tsconfig.json, da die Einstellungen in der '.csproj' Datei gespeichert sind. Will die Teile zu meiner Frage hinzufügen – KingKerosin

Dieses Setup funktioniert (ich verwende VS nicht, aber man kann das bekommen idea):

tsconfig.json

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

page.ts (können Sie ein anderes Modul-System wählen)

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>; 
    } 
}

Sie müssen dafür sicher, dass Sie die Reaktionspakete haben:

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

Quelle

2017-02-19 13:22:13

Was ist der Unterschied zwischen der Verwendung von 'import React = require (" react ")' und 'import * als React von" react "'? – KingKerosin

Der 'Import * als X von Y' ist die neue' es6' Form. Das 'import X = require (Y)' ist [wird verwendet, wenn die lib exportiert] (https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require) mit 'export = '. In diesem Fall können Sie beide verwenden, aber ich empfehle die erste ('import * ...'). –

Ich bekomme jetzt den Fehler 'require is not defined'. Ich habe meine Frage aktualisiert, indem ich den Dateiinhalt der fraglichen Dateien hinzugefügt habe, da ich nicht sehe, was mir fehlt. Der Fehler wird in der Zeile 'import {render} von" ./Components/SomeComponent ";' – KingKerosin

ReactJS zusammen mit Typoskript in Visual Studio, MVC5 Projekt

Antwort

Verwandte Themen