Aufruf Reagieren Ansicht von Express

Ich kann nicht finden, ein gutes minimum, Beispiel, wo kann ich Draht ein express.js route zu rufen reagieren Ansicht.

Bisher dies ist, was ich habe.

+-- app.js
+-- config
|   +-- server.js
+-- routes
|   +-- index.js
+-- views
|   +-- index.html

app.js

require('./config/server.js');
require('./routes/index.js');

config | server.js

"use strict";
var express = require('express'),
app = express(),

routes = require('./routes');

app.set('view engine', 'html');
app.engine('html', ); //how do I tell express that JSX is my template view engine?

var port = process.env.PORT || 3000;

app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
app.set('view engine', 'handlebars');


var server = app.listen(port, function(){
    console.log('Accepting connections on port ' + port + '...');
});

Routen | index.js

app.get('/', function(request, response){
    //how do we call the route that will run index.html ?
    request.render('index');
});

views | index.html

<!DOCTYPE html>
<html>
<head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script type="text/jsx" src="build/noEpisodes.js"></script>
</head>
<body>
    <div id="noEpisodesMessage"></div>
</body>
</html>

- und dann meine index.htm Seite sowie jsx erzeugt.

InformationsquelleAutor PositiveGuy | 2015-04-14

  1. 9

    Den üblichen, was ist die Verwendung reagieren-router kümmern sich um die Routen, schreiben Sie Ihre app Reagieren wie eine einzelne app Reagieren (d.h. alle Ihre JSX-Quelle endet bündelt in einem einzigen app.js Datei, die weiß, wie laden alle "Seiten" oder "Ansichten") und dann verwenden express (oder Hapi, oder jede andere server-Prozess) vor allem als Ihre API-und asset-server, nicht Ihre Seite/view generator.

    Können Sie dann Tippen Sie in die Routen, die Sie in den react-router - Router-Objekt, so dass auf der express-Seite können Sie uns Ihre Benutzer zu der URL, die react-router befassen können, für Inhalte zu laden, so erhalten Sie

    1. user-Wunsch site.com/lol/monkeys
    2. express leitet weiter auf /#/lol/Affen
    3. Ihr reagieren app lädt die korrekte Ansicht, da die Routen im Router
    4. Optional, Ihre app hat eine Geschichte.replaceState, so dass der Benutzer sieht site.com/lol/monkeys (es gibt einige reagieren-router-tricks, um dies für Sie tun)

    Sie können auch automatisieren die meisten dies durch server-side-rendering, aber der name kann verwirrend sein: Sie noch schreiben Sie Ihre app Reagieren, als wenn es kein server involviert, und verlassen sich dann auf Reagieren die render-Mechanismus, um vollständig Rendern einzelnen "Seiten" für eine angeforderte URL, die zeigen alle das Recht ursprünglichen Inhalt, während auch dann laden Sie Ihre app und leise Einhaken es wieder in den Inhalt der Benutzer betrachtet, so, dass alle Interaktionen Vergangenheit das erstmalige laden der Seite behandelt werden, Reagieren erneut, und die anschließende navigation ist "fake" - navigation (Ihre url-Leiste zeigt eine neue URL, aber nicht die tatsächliche Netzwerk-navigation passieren wird, Reagieren einfach-swaps Inhalt in/out).

    Ein gutes Beispiel HIERFÜR ist https://github.com/mhart/react-server-example

    Was meinst du schreiben reagieren die app in einer einzigen app reagieren und bündeln von jsx in die app.js Datei?
    express ist nicht ein Seiten-viewer / erzeugen jedenfalls so nicht zu verstehen, dass Punkt oben, bitte erklären Sie einmal danke. Ich meine, gut er hat die render () - Methode. Also sagen Sie nicht verwenden, und die reagieren-router, wie es hat render-Funktion
    also, wenn Sie nicht gonna verwenden Sie express, wie die Seite/view-generator, ich nehme an, bedeutet, ich würde nicht legen Sie dann die app.Motor für express, was macht der Blick?
    Reagieren, der im browser ausgeführt wird, hat Ihre Ansichten (es sei denn, Sie haben Ihre app als isomorph Anwendung, dann drückt Ihnen dienen können). Dies ist eine "sehr lange Antwort" für die hervorragende tutorials, die bereits existieren auf dem web, so würde ich empfehlen, finden diese. Geben jlongster.com/Presenting-The-Most-Over-Engineered-Blog-Ever Lesen-über, zum Beispiel.
    Sie nicht bekommen, meine Frage dann. Ich Frage über die app.set('view engine', 'html'); app.Motor('html', ), was sollte dies für Reagieren? wie Stelle ich die view-engine

    InformationsquelleAutor Mike 'Pomax' Kamermans

  2. 3

    Den anderen Antworten arbeiten mit der üblichen Art und Weise zu verwenden, zu reagieren, dann ersetzen Sie ein element in den dom-wie so

    React.render(<APP />, document);

    aber wenn Sie wollen, reagieren auf Ihre "template-Sprache", in express, Sie können auch reagieren auf das Rendern einer einfachen html-string wie so

    app.get('/', function(req, res) {
  var markup = React.renderToString(<APP />);  //<-- render the APP here
  res.send(markup);                          //<-- response with the component
});

    gibt es ein paar andere Dinge, die Sie brauchen zu kümmern, im Hinblick auf eine Bündelung aller Abhängigkeiten und die Arbeit mit jsx. dieses einfache, minimalistische tutorial und diese blog-post hat mir geholfen, zu verstehen, die situation besser

    beachten Sie, dass der Beispielcode aus dem tutorial verwendet diese syntax

    var markup = React.renderToString(APP());

    wurde als veraltet markiert und wird einen Fehler verursachen. um es zu verwenden müsste man ersetzen

    var APP = require('./app');

    mit

    var APP = React.createFactory(require('./app'));

    oder einfach machen jsx, wie ich in dem ersten Beispiel. um das Lernprogramm zu arbeiten könnte ich habe auch zu verwenden, neuere Versionen der Abhängigkeiten im Paket.json.

    sobald Sie sich daran gewöhnt haben Züchter tutorial zeigt eine leistungsfähigere Weise zu verwenden, zu reagieren-engine zum Rendern reagieren innerhalb express

    Die "tutorial" - link ist nun gebrochen. Sieht aus wie, dass die domain geparkt ist.

    InformationsquelleAutor ChetPrickles

  3. 2

    Wenn Sie möchten, um es einfach zu halten Sie können dies tun, für den Einstiegspunkt der app:

    Routen | index.js

    app.get('/', function(request, response){

    //how do we call the route that will run index.html ?
    res.sendfile('../views/index.html');
});

    Reagieren, ist das Ziel ein bestimmtes element auf Ihrer index.html Seite in seiner render-Methode: 

    React.render(<Application />, document.getElementById('foo'));

    Also, wenn Ihr javascript ist enthalten in index.html und ein element mit dieser id vorhanden ist, reagieren wird, Spritzen Sie Ihre Anwendung in das div. Von diesem Zeitpunkt an können Sie alles tun, die routing mit reagieren-router, ODER Sie können setup verschiedene Routen, die in Ausdrücken und mit Ihnen umgehen, wie Sie es index.html

    danke, ich hätte gedacht, res.render (), aber ich offensichtlich nicht verstehen, dass durchaus noch...
    Vergnügen, bitte denken Sie daran, markieren Sie Ihre Antwort akzeptiert, wenn es dein problem gelöst...:)
    Ich bin jus neugierig, wie Sie es tun, ohne zu reagieren-router nur um zu wissen, wie die einheimischen reagieren - /express-Werke, die ohne zusätzliche Bibliotheken noch
    Ich habe es noch nicht getestet noch, also nicht bereit zu markieren, gelöst.
    was über die Einstellung der view-engine. Muss ich tun, dass mit jsx zu reagieren und für die expressJS?

    InformationsquelleAutor deowk

  4. 1

    Anstelle der manuellen Umgang mit Reagieren.Rendern Sie können eine Bibliothek namens reagieren-Helfer (https://github.com/tswayne/react-helper). Es wird eine div für Sie, bindet Ihre Komponenten reagieren, um die div, ermöglicht das übergeben von Eigenschaften Ihrer Komponenten, der server-Seite, und können sogar Griff-server-side-rendering, wenn Sie webpack konfiguriert für Ihren Knoten app oder bereit sind, zu verwenden babel-register (nicht empfohlen für prod).

    InformationsquelleAutor Tyler

Schreibe einen Kommentar