Kombinieren von reagieren und jade

Arbeite ich an einem isomorph javascript app mit express + reagieren. Angefangen haben wir mit jade für server-side-templates für statische Inhalte, aber die Kombination der beiden wird schnell unhandlich. Wir haben am Ende mit etwas wie dieses:

In der express-Routen:

router.get("/", function(req, res) {
  var webpackStats = require('../../config/webpack-stats.json');
  var reactHtml = React.renderToString(HiwApp({}));
  var slideshowHtml = React.renderToString(slideshowApp({}));
  var config = {
    webpackStats: webpackStats,
    reactOutput: reactHtml,
    slideshowHtml: slideshowHtml
  };
  res.render("how_it_works/howitworks", config);
});

In Jade:

body
  .company-logo.center
  #react-main-mount
    != reactOutput
  include ./content_block_1.jade

  include ./content_block_2.jade

  #slideshow-main-mount
    != slideshowHtml

Dies ist sehr spröde-wenn wir wollen, dass jsx dann ein jade-template dann mehr jsx, wir haben sicher zu stellen, dass die richtige Reihenfolge.

Meine Idee ist, es zu tun alle mit jsx. Ich weiß, es ist zu Reagieren.renderToStaticMarkup für diese Art der Sache, aber das löst nicht das problem der Vermischung dynamische mit statischen Seiten.

Die großen Fragen: wenn wir uns entscheiden, all dies zu tun mit jsx (layout sagen.jsx enthält alle Komponenten), dann rufen Sie React.renderToString(App({});wird dies einen großen performance-hit? Wenn ja, gibt es einen besseren Weg, es zu tun, um sich gut kombinieren, statische und dynamische Blöcke?

InformationsquelleAutor der Frage johnnyutah | 2015-04-01

  1. 5

    Dies ist zwar ein kleines bisschen off-topic: Wir stecken mit jade Vorlagen.

    Im Grunde wollten wir die Flexibilität, eine nicht-reagieren + - flux-Architektur für die Bereiche der site, wenn Sie und wenn die Notwendigkeit entstanden. Unsere Website ist im Grunde aus einer Anzahl von kleineren SP-apps: Website, Benutzerkonto, Team und Admin.

    Warum haben wir das tun?

    • Kleinere Dateigröße und Aufwand für Benutzer, die keinen Zugriff auf alle Bereiche der Website.

    • Option zum "opt-out" Reagieren und flux, wenn und, wenn die Notwendigkeit entsteht.

    • Einfacher, eine serverseitige Authentifizierung.

    InformationsquelleAutor der Antwort AndrewMcLagan

  2. 2

    Die Art, wie wir getan haben, es zu erfolgreich war, um das Rendern einer JSX-shell-Vorlage (Html.jsx) auf dem server mit React.renderToStaticMarkup() und dann schickt es als Antwort auf jede server-side-express-route request, der dazu bestimmt ist, zu liefern einige HTML an den browser. Html.jsx ist nur eine Hülle, mit der html-Kopf Informationen und GA-Skripte etc. Es sollte enthalten keine layout. 

    //Html.jsx
render(){
  return (
    <html>
      <head>
        //etc.
      </head>
      <body>
        <div
          id="app"
          dangerouslySetInnerHTML={{__html: this.props.markup}}>
        </div>
      </body>
      <script dangerouslySetInnerHTML={{__html: this.props.state}</script>
      <script>
        //GA Scripts etc.
      </script>
    </html>
  )
}

    Sie daran, es ist völlig in Ordnung und sogar empfohlen, zu verwenden dangerouslySetInnerHTML auf dem server, wenn feuchtigkeitsspendende die app.

    Dynamisches layout sollte getan werden, mit Ihrer isomorph Komponenten durch eine Hierarchie von Komponenten basierend auf Ihren Zustand/Requisiten-Konfiguration. Wenn Sie geschehen, werden mit Reagieren Router, dann der router render view-Handler basierend auf den Routen, die Sie liefern es so, dass heißt, Sie brauchen nicht, um Sie zu verwalten sich selbst.

    Der Grund, warum wir diese Technik verwenden, ist architektonisch separates unsere "App", die isomorph und reagiert auf Zustand von unserem server-side-Vorlage-shell ist nur eine Lieferung Mechanismus und ist effektiv boiler plate. Wir selbst halten die Html.jsx Vorlage unter all den express-Komponenten in der app und lassen Sie es nicht zu mischen mit den anderen isomorph Reagieren Komponenten.

    Eines der hilfreichsten Ressourcen, die ich gefunden, um Reagieren/isomorph Architektur war https://github.com/yahoo/flux-examples/tree/master/react-router das ist, wo wir Stahlen diese Technik aus.

    Erkundeten wir die Idee der Integration LENKER wie eine Template-engine für client-Entwickler die Verwendung unserer Produkte in der Zukunft, aber beschlossen, dass es weniger Komplex zu schreiben, unsere eigene DSL in JSX und verwenden Sie einige einfache Routinen zum Parsen von HTML-wie eine DSL-JSX durch das hinzufügen Dinge wie export default (ES6-Modul syntax) am Anfang der Vorlage und importieren Sie dann die Vorlage, um eine rendering-Komponente.

    Natürlich könnten Sie Folgen Sie dieser Linie des Denkens, und verwenden Sie eine jade-compiler spuckte die Vorlage und fügen Sie Modul-syntax umgehen, wenn Sie denken, separate jade-Dateien sind unverzichtbar. Ich habe auch bemerkt, dass dieses Projekt so gut, obwohl ich noch nicht erkundet haben es in Wut: https://github.com/jadejs/react-jade.

    InformationsquelleAutor der Antwort rickard

Schreibe einen Kommentar