web-dev-qa-db-fra.com

Variables côté serveur vers côté client avec React-Engine et Express

Je suis assez nouveau sur React/React-Engine. J'ai une configuration côté serveur dont je dois transmettre certaines valeurs à côté client, mais j'ai une dépendance sur NODE_ENV afin d'obtenir la configuration correcte.

var config = {
    local: { ... }
    production: { ...}
}

module.exports = config[process.env.NODE_ENV]

Ce qui fonctionne très bien côté serveur, cependant puisque je dois référencer certaines des valeurs contenues dans ces objets du côté client, je ne peux donc pas avoir besoin de (./ config); dans mon React JSX.

Existe-t-il un moyen simple de transférer ces informations dans React? À la fin de la journée, je serais heureux de pouvoir simplement passer la 'configuration' directement dans React sans même avoir à vous soucier de NODE_ENV du côté client.

Merci

expressreactjsreact-engine
13
Ant

Le moyen le plus commun de transmettre des données du serveur au client avant le rendu consiste à les incorporer dans une variable JavaScript globale sur la page où votre analyse React est en cours de rendu.

Ainsi, par exemple, dans le middleware où vous êtes en train de restituer un modèle incluant vos balises <script> avec votre application React, vous pouvez ajouter les informations et les récupérer sur le modèle:

var config = require('../config-from-somewhere');
app.get('/', function (req, res) {
  res.render('index', {config: JSON.stringify(config)});
});

Et un exemple de modèle de moustache:

<html>
<body>
<script>
  window.CONFIG = JSON.parse({{{config}}});
</script>
<script src="my-react-app.js"/> 
</body>
</html>

CEPENDANT apparemment react-engine fournit déjà son propre moyen d’envoyer des données par le client:

Données pour le rendu des composants

Les données réelles qui sont introduites dans le composant pour le rendu sont l'objet renderOptions généré par express.

https://github.com/Paypal/react-engine#data-for-component-rendering

Comme vous pouvez le voir dans cet exemple , le movies json est simplement passé dans render:

app.get('*', function(req, res) {
  res.render(req.url, {
    movies: require('./movies.json')
  });
});

Et puis, par la magie du framework, probablement sur cette ligne , les informations sont fournies pour vos composants, puis la List les utilise à partir de props.movies.

module.exports = React.createClass({
  displayName: 'List',

  render: function render() {
    return (
      <div id='list'>
        <h1>Movies</h1>
        <h6>Click on a movie to see the details</h6>
        <ul>
          {this.props.movies.map(function(movie) {
            return (
              <li key={movie.id}>
                <Router.Link to={'/movie/' + movie.id}>
                  <img src={movie.image} alt={movie.title} />
                </Router.Link>
              </li>
            );
          })}

        </ul>
      </div>
    );
  }
});

Donc, fondamentalement, ajoutez votre config à votre appel de rendu et il devrait être disponible dans votre props de votre composant.

Et pour les très curieux:

En effet, comme on peut le voir sur cette ligne à partir de maintenant , le moteur fusionne renderOptions et res.locals et le transmet à React.

// create the data object that will be fed into the React render method.
// Data is a mash of the express' `render options` and `res.locals`
// and meta info about `react-engine`
var data = merge({
  __meta: {
    // get just the relative path for view file name
    view: null,
    markupId: Config.client.markupId
  }
}, omit(options, createOptions.renderOptionsKeysToFilter));

Et:

return React.createElement(Component, merge({}, data, routerProps));
15
firstdoit

React-helper ( https://github.com/tswayne/react-helper ) constitue une alternative au moteur de réaction qui fonctionne bien avec express (et avec tout autre framework de noeud de rendu de vue). Il gère pratiquement tout ce que vous devez faire pour rendre les composants de réaction pour vous dans n’importe quel framework de nœud. Vous venez de créer un point d’entrée (fichier js) pour WebPack (il peut générer votre configuration WebPack pour vous) et d’ajouter une ligne à votre contrôleur et à votre vue. Votre composant sera alors rendu sur cette page. Vous pouvez également transmettre des données à votre composant de réaction à partir d’express et, lorsque le composant se lie à votre navigateur, il aura accès à ces données côté serveur. 

const component = reactHelper.renderComponent('MyComponent', {prop: config.prop}) res.render('view-to-render', {component})

Il existe également un middleware express pour react-helper ( https://github.com/tswayne/express-react-helper ) qui vous permet d'ajouter un contexte disponible pour toutes les vues, ce qui est pratique pour les données de configuration.

app.use(expressReactHelper.addToReactContext({configProp: config.foo}))

0
Tyler