Reagieren, reagieren Routing und HTML-Vorlagen

Question

Ich arbeite mit einem Team an einem großen Web-Projekt. Dies sind die Technologien beteiligt: ​​

• Meteor: Vollstapel JavaScript-Framework
• MongoDB: DBMS
• Reagieren: in Meteor enthalten wie die folgenden zwei Hauptpakete reagieren v15.6.1 und reagieren-Router-dom v4.1.2

Meine Frage betrifft den Front-End-Teil der Website und deren Integration in bereits entwickelte frühe Versionen. Die Spezifikationen des Front-End-Bereichs wurden zuerst in handgezeichnete Wireframes und dann in digitale mit Balsamiq übersetzt.

Während der Entwicklung der ersten Versionen der Website, habe ich React verwendet und jetzt bin ich in ihn verliebt (und Art von steckte es auch um ehrlich zu sein: D). Ich bin normalerweise nicht für den Front-End-Bereich des Projekts verantwortlich, aber ich werde für meine bereits durchgeführte Arbeit verantwortlich sein oder sie integrieren.

Da wir wissen, dass die digitalen Wireframes in HTML, CSS und JavaScript kodiert werden, lautet meine Frage: Gibt es eine Möglichkeit, eine HTML-, CSS- und JavaScript-Vorlage in React zu integrieren/zu übersetzen?

Meine Frage läuft im Grunde auf; Wie integriert man eine HTML-, CSS- und JS-Vorlage in ein React-Projekt? Wenn es keine Möglichkeit gibt, dies zu tun, was wäre der beste Ansatz: Schreiben Sie meinen Code neu, oder die Vorlage sollte in React geschrieben werden?

Answer 1

Was ich normalerweise tue, ist die HTML-Tags/-Elemente aus der Datei in Reactions return() {} zu kopieren und dann React-Komponenten hinzuzufügen und einige CSS zu ändern, damit es so aussieht, wie Sie es wollen. Denken Sie daran, dass Reacts return() {} HTML und Ihre eigenen React-Komponenten und Javascript im Grunde so rendert, dass sie so funktionieren, wie Sie es möchten.

Wenn Sie jedoch wollen nur eine Seite anzuzeigen, können Sie immer

import React, { Component, PropTypes } from 'react'; 


static contextTypes = { 
    router: PropTypes.object 
} 
this.context.router.push('/page'); 

und den Pfad zur HTML-Seite in Ihrer route.js Datei zu leiten.