These are the docs for React on Rails 12. To see the version 11 docs, click here.

News

October 14, 2020: RUBY ROGUESRR 474: Réagissez sur Rails V12 – Ne Rasez Pas Ce Yak ! avec Justin Gordon.

1er octobre 2020 : Voir l’exemple de dépôt spec/dummy pour une configuration simple de webpack via la gemme rails/webpacker qui prend en charge SSR.

2 août 2020 : Voir l’exemple de tutoriel Repo de React on Rails Avec SSR, HMR fast refresh et TypeScript pour une nouvelle façon de configurer la création de votre bundle SSR avec rails/webpacker.

8 juillet 2020 : Sortie v12 de React on Rails.

Améliorations majeures

1. Prise en charge des Hooks React pour les composants de niveau supérieur
2. Liaisons Typescript
3. rails/webpacker « fonctionne simplement » avec React on Rails par défaut.
4. prise en charge i18n pour générer un fichier JSON plutôt qu’un fichier JS.

Assurez-vous de voir le CHANGELOG.md et lisez les instructions de mise à niveau: docs/basics/upgrading-react-on-rails.

• Voir la discussion RailsConf de Justin: Webpacker, Ça marche, Mais Comment?.
• Êtes-vous intéressé par le support de React on Rails ? Voulez-vous utiliser Node.js pour faire votre rendu côté serveur afin que les bibliothèques comme Emotion et les composants chargeables fonctionnent simplement, par rapport au rendu via Ruby embedded JS? Si c’est le cas, consultez React on Rails Pro.
• HMR travaille avec des composants chargeables pour une expérience de développeur à rechargement à chaud incroyable et d’excellentes performances d’exécution. Veuillez m’envoyer un e-mail si vous souhaitez utiliser le fractionnement de code de composants chargeables pour accélérer votre application en réduisant la taille de votre bundle et en chargeant paresseusement le code nécessaire.

À propos de

React on Rails intègre Rails avec le framework frontal React de Facebook (rendu par le serveur).

Ce projet est maintenu par la société de conseil en logiciels ShakaCode. Nous nous concentrons sur les applications Ruby on Rails avec les frontaux React, souvent en utilisant TypeScript ou ReasonML. Nous construisons également des sites Gatsby. Voir nos travaux récents pour des exemples de ce que nous faisons.

Vous souhaitez optimiser la configuration de votre pack web pour React on Rails, y compris le partage de codes avec react-router et les composants chargeables avec rendu côté serveur ?Nous venons de le faire pour Popmenu, en réduisant les coûts Heroku de 20 à 25% tout en obtenant une diminution de 73% des temps de réponse moyens.

N’hésitez pas à contacter Justin Gordon, [email protected] , responsable de React on Rails, pour plus d’informations.

Cliquez pour rejoindre React + Rails Slack.

Objectif du projet

Fournir un framework haute performance pour intégrer Ruby on Rails à React via la gemme Webpacker, en particulier en ce qui concerne le rendu côté serveur de React pour un meilleur référencement et des performances améliorées.

Fonctionnalités et pourquoi Réagir sur Rails ?

Étant donné que rails/webpackergem fournit déjà une intégration de base de React, pourquoi utiliseriez-vous « React on Rails »?

1. Passage facile des accessoires directement de votre vue Rails à vos composants React plutôt que de charger votre vue Rails, puis de faire une demande séparée à votre API.
2. Intégration étroite avec rails/webpacker.
3. Le rendu côté serveur (SSR), souvent utilisé pour l’indexation des robots SEO et les performances UX, n’est pas offert par rails/webpacker.
4. Intégration des routeurs Redux et React avec le rendu côté serveur.
5. Internationalisation (I18n) et (localisation)
6. Une communauté de soutien. Cette recherche sur le Web montre comment les sites publics en direct utilisent React on Rails.
7. Raison du soutien ML.

Voir les options d’intégration de Rails/Webpacker React pour les comparaisons avec d’autres gemmes.

Voir le tutoriel react-webpack-rails pour un exemple d’implémentation et de code en direct.

Le contenu Premium du forum ShakaCode

Nécessite la création d’un compte gratuit.

• Comment utiliser différentes versions d’un fichier pour le rendu client et serveur
• Comment rendre conditionnellement le côté serveur en fonction du type de périphérique

Docs

Envisagez de naviguer sur notre site Web.

Prérequis

Ruby on Rails >=5 et rails/webpacker 4.2+.

Mise en route

Remarque, la meilleure façon de comprendre comment utiliser ReactOnRails est d’étudier quelques exemples simples. Vous pouvez effectuer une configuration de démonstration rapide, soit sur votre application existante, soit sur une nouvelle application Rails.

1. Faites le tutoriel rapide.
2. Ajoutez React on Rails à une application Rails existante conformément aux instructions.
3. Regardez spec/dummy, un exemple simple, sans base de données.
4. Regardez github.com/shakacode/react-webpack-rails-tutorial ; c’est un exemple complet en direct à www.reactrails.com .

Installation de base

Voir également les instructions d’installation dans une application Rails existante.

1. Ajoutez la gemme react_on_rails au fichier gemme:

   bundle add react_on_rails --strict

2. Validez cela sur git (sinon vous ne pouvez pas exécuter le générateur à moins de passer l’option --ignore-warnings).

3. Exécutez le générateur:

   rails generate react_on_rails:install

4. Démarrez l’application:

   rails s

5. Visitez http://localhost:3000/hello_world.

Activation du rendu serveur

Avec le code de l’exécution du générateur React on Rails ci-dessus:

1. Modifiez app/views/hello_world/index.html.erb et définissez prerender sur true.
2. Actualisez la page.

Voici la ligne sur laquelle vous activez le rendu du serveur en définissant prerender sur true :

<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

Remarque, si vous avez une erreur dans votre console concernant « ReferenceError: la fenêtre n’est pas définie », vous devez modifier config/webpacker.yml et définissez hmr: false et inline: false.Voir rails / webpacker PR 2644 pour une solution à ce problème.

Utilisation de base

Configuration

• Configure config/initializers/react_on_rails.rb. Vous pouvez ajuster certains paramètres et valeurs par défaut nécessaires. Voir le fichier docs/basics/configuration.md pour la documentation de toutes les options de configuration.
• Configure config/webpacker.yml. Si vous avez utilisé le générateur et la configuration par défaut du webpacker, vous n’avez pas besoin de toucher à ce fichier. Si vous personnalisez votre configuration, consultez le spec/dummy/config/webpacker.exemple yml ou le webpacker officiel par défaut.lml.
  • Astuce: définissez compile: false pour le développement si vous savez que vous compilerez toujours avec un processus de veille. Sinon, chaque demande vérifiera si une compilation est nécessaire.
  • Votre public_output_pathdoit correspondre à votre configuration Webpack personnalisée pour output de vos bundles.
  • Définissez uniquement cache_manifest sur true dans votre environnement de production.

Inclure votre composant React dans vos vues Rails

• Les composants React sont rendus via vos Vues Rails. Voici un échantillon ERB:

  <%= react_component("HelloWorld", props: @some_props) %>

• Rendu côté serveur : Votre composant react est d’abord rendu en HTML sur le serveur. Utilisez l’option prerender :

  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>

• Le paramètre component_name est une chaîne correspondant au nom que vous avez utilisé pour exposer globalement votre composant React. Ainsi, dans les exemples ci-dessus, si vous aviez un composant React nommé « HelloWorld », vous l’enregistreriez avec les lignes suivantes:

  import ReactOnRails from 'react-on-rails';import HelloWorld from './HelloWorld';ReactOnRails.register({ HelloWorld });

  Exposer votre composant de cette manière permet à React on Rails de référencer votre composant à partir d’une vue Rails. Vous pouvez exposer autant de composants que vous le souhaitez, tant que leurs noms ne se heurtent pas. Voir ci-dessous pour plus de détails sur la façon dont vous exposez vos composants via la configuration du webpack react_on_rails. Vous pouvez appeler ReactOnRails.register plusieurs fois.

• @some_props peut être une chaîne de hachage ou JSON. Il s’agit d’un argument facultatif en supposant que vous n’avez pas besoin de passer d’options (si vous souhaitez passer des options, telles que prerender: true, mais que vous ne souhaitez passer aucune propriété, passez simplement un hachage vide {}). Cela rendra les données disponibles dans votre composant :

   # Rails View <%= react_component("HelloWorld", props: { name: "Stranger" }) %>

• C’est ce que votre HelloWorld.le fichier js peut contenir. Le railsContext est toujours disponible pour tous les paramètres que vous souhaitez toujours disponibles pour vos composants React. Cela n’a rien à voir avec le concept du contexte React. Voir Render-Functions et RailsContext pour plus de détails sur ce sujet.

  import React from 'react';export default (props, railsContext) => { // Note wrap in a function to make this a React function component return () => ( <div> Your locale is {railsContext.i18nLocale}.<br/> Hello, {props.name}! </div> );};

Consultez l’API View Helpers pour plus de détails sur react_component et sa fonction sœur react_component_hash.

Exposer globalement vos Composants React

Pour l’assistant de vue React on Rails react_componentpour utiliser vos composants React, vous devrez les enregistrer dans votre code JavaScript.

Utilisez les modules comme vous le feriez lorsque vous utilisez Webpack et Réagissez sans Rails. La différence est qu’au lieu de monter des composants React directement sur un élément en utilisant React.render, vous enregistrez vos composants dans ReactOnRails, puis vous les montez avec des assistants à l’intérieur de vos vues Rails.

Voici comment exposer un composant à l’assistant de vue react_component.

 // app/javascript/packs/hello-world-bundle.js import HelloWorld from '../components/HelloWorld'; import ReactOnRails from 'react-on-rails'; ReactOnRails.register({ HelloWorld });

Code de rendu côté serveur différent (et un ensemble spécifique au serveur)

Vous pouvez vouloir un code différent pour vos composants rendus côté serveur exécutant côté serveur par rapport au côté client. Par exemple, si vous avez une animation qui s’exécute lorsqu’un composant est affiché, vous devrez peut-être la désactiver lors du rendu du serveur. Une façon de gérer cela est un code conditionnel comme if (window) { doClientOnlyCode() }.

Une autre façon consiste à utiliser un fichier de configuration webpack séparé qui peut utiliser un fichier d’entrée côté serveur différent, comme ‘serverRegistration.js ‘ par opposition à ‘Enregistrement client.js. »Cela configurerait un code différent pour le rendu du serveur.

Pour plus de détails sur les techniques d’utilisation du code différent pour le rendu client et serveur, voir: Comment utiliser différentes versions d’un fichier pour le rendu client et serveur. (Nécessite la création d’un compte gratuit.)

Spécifier vos composants React : Enregistrez-vous directement ou utilisez des fonctions de rendu

Vous avez deux façons de spécifier vos composants React. Vous pouvez soit enregistrer directement le composant React (composant de fonction ou de classe), soit créer une fonction qui renvoie un composant React, que nous utilisons sous le nom de « fonction de rendu ». La création d’une fonction de rendu permet :

1. Vous avez accès au railsContext. Consultez la documentation du railsContext pour savoir pourquoi vous pourriez en avoir besoin. Vous avez besoin d’une fonction de rendu pour accéder au railsContext.
2. Vous pouvez utiliser les accessoires transmis pour initialiser un magasin redux ou configurer react-router.
3. Vous pouvez retourner différents composants en fonction de ce qui se trouve dans les accessoires.

Remarque, la valeur de retour d’une Fonction de rendu doit être soit une Fonction React, soit un composant de classe, soit un objet représentant les résultats du rendu du serveur.

Ne renvoie pas d’élément React (JSX).

ReactOnRails détectera automatiquement une fonction de rendu enregistrée par le fait que la fonction prend plus de 1 paramètre. En d’autres termes, si vous souhaitez pouvoir fournir une fonction qui renvoie le composant ACT, vous devez spécifier au moins un deuxième paramètre. Il s’agit du railsContext.Si vous n’utilisez pas ce paramètre, déclarez votre fonction avec le paramètre inutilisé :

const MyComponentGenerator = (props, _railsContext) => { if (props.print) { // This is a React FunctionComponent because it is wrapped in a function. return () => <H1>{JSON.stringify(props)}</H1>; }}

Ainsi, il n’y a aucune différence entre l’enregistrement d’un Composant de Fonction React ou d’un Composant de classe par rapport à une Fonction de rendu « . »Appelez simplement ReactOnRails.register.

react_component_hash pour les fonctions de rendu

Une autre raison d’utiliser une fonction de rendu est que parfois dans le rendu du serveur, en particulier avec React Router, vous devez renvoyer le résultat de l’appel de ReactDOMServer.renderToString (élément). Vous pouvez le faire en renvoyant un objet avec la forme suivante : {renderedHtml, redirectLocation, error}. Assurez-vous d’utiliser cette fonction avec react_component_hash.

Pour le rendu serveur, si vous souhaitez renvoyer plusieurs chaînes HTML à partir d’une Fonction de rendu, vous pouvez renvoyer un Objet à partir de votre Fonction de rendu avec une seule propriété de niveau supérieur de renderedHtml. Dans cet objet, placez une clé appelée componentHtml, avec toutes les autres clés nécessaires. Un exemple de scénario de ceci est lorsque vous utilisez des bibliothèques d’effets secondaires comme React Helmet. Votre code Ruby obtiendra cet objet sous forme de hachage contenant des clés componentHtml et toutes les autres clés personnalisées que vous avez ajoutées:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Pour plus de détails sur l’utilisation de react_component_hash avec react-helmet, consultez notre documentation react-helmet.

Gestion des erreurs

• Toutes les erreurs de ReactOnRails seront de type ReactOnRails::Error.
• Les erreurs de préenregistrement (rendu serveur) obtiennent des informations contextuelles pour HoneyBadger et Sentry pour faciliter le débogage.

I18n

React on Rails fournit une option pour les conversions automatiques des fichiers de paramètres régionaux des Rails *.yml en *.json ou `.js.Voir Comment ajouter I18n pour un résumé de l’ajout d’I18n.

Plus de détails

Parcourez les liens dans la Table des matières Récapitulative

Voici quelques prochains articles fortement recommandés à lire :

1. Comment Fonctionne React on Rails
2. Configuration du Webpack
3. API des aides à la vue
4. Mise en cache et performances : React on Rails Pro.Déploiement
5. .

Support

Cliquez pour rejoindre React+ Rails Slack.

Ressources communautaires

Veuillez cliquer pour vous abonner pour rester en contact avec Justin Gordon et ShakaCode. J’ai l’intention d’envoyer des annonces de nouvelles versions de React on Rails et de nos derniers articles de blog et tutoriels.

• Slack Room: Contactez-nous pour une invitation à la Slack room ShakaCode! Faites-nous savoir si vous souhaitez contribuer.
• forum.shakacode.com :Postez vos questions
• @railsonmaui sur Twitter
• Pour un exemple en direct, open source, de ce joyau, voir www.reactrails.com .
• Voir les projets utilisant et FÉLICITATIONS pour React on Rails. Veuillez soumettre le vôtre! Veuillez modifier la page ou nous envoyer un e-mail et nous ajouterons vos informations. Nous aimons aussi les stars car cela nous aide à attirer de nouveaux utilisateurs et contributeurs.
• Voir NEWS.md pour plus de notes au fil du temps.

Contribuer

Les rapports de bogues et les pull requests sont les bienvenus. Voir Contribution pour commencer et la liste des problèmes recherchés.

React on Rails Pro

Soutenez le développement de React on Rails Pro en devenant un sponsor Github et bénéficiez de ces avantages.

React on Rails Pro inclut le rendu de serveur de nœuds, la mise en cache de fragments, le fractionnement de code et d’autres améliorations de performances pour React on Rails. Pour une étude de cas, consultez l’article Réduction de 90% du temps de réponse du serveur de HVMN par React on Rails Pro. Le Wiki contient plus de détails.

Le plan de support React on Rails Pro peut vous aider!

• Optimisation de la configuration de votre webpack avec le dernier Webpack pour React on Rails, y compris le fractionnement de code avec des composants chargeables.
• Mise à niveau de votre application pour utiliser la configuration actuelle rails/webpacker qui ignore le pipeline d’actifs de Pignons.
• Meilleures performances côté client et serveur.
• Meilleures pratiques basées sur plus de 6 ans d’expérience de React on Rails sur de nombreux projets de production.
• Utiliser Reason avec (ou sans) React on Rails.

ShakaCode peut également vous aider avec vos besoins de développement de logiciels personnalisés. Nous nous spécialisons dans les applications de marché et de commerce électronique qui utilisent à la fois Rails et React. Parce que nous possédons HiChee.com , nous pouvons tirer parti de ce code pour votre application!

Veuillez envoyer un courriel à Justin Gordon [email protected] , le responsable de React on Rails, pour plus d’informations.

Pro: Mise en cache de fragments

La mise en cache de fragments est une fonctionnalité de React on Rails Pro. La mise en cache de fragments est un ÉNORME booster de performances pour vos applications. Utilisez le cached_react_component et cached_react_component_hash. L’API est la même que react_component et react_component_hash, mais pour 2 différences :

1. L’assistant de vue cache_key prend les mêmes paramètres que tous les Rails cache.
2. Les props sont passés via un bloc de sorte que l’évaluation des props n’est pas effectuée à moins que le cache ne soit cassé. Supposons que vous posiez le calcul de vos props dans une méthode appelée some_slow_method_that_returns_props:

<%= cached_react_component("App", cache_key: , prerender: true) do some_slow_method_that_returns_propsend %>

Une telle mise en cache de fragments économise le travail du processeur pour votre serveur Web et réduit considérablement le temps de demande. Il ignore complètement les coûts d’évaluation des appels de base de données :

1. pour calculer les accessoires.
2. Sérialisation du hachage des valeurs des accessoires dans une chaîne JSON pour évaluer le rendu JavaScript au serveur.
3. Coûts associés à l’évaluation de JavaScript à partir de votre code Ruby.
4. Création de la chaîne HTML contenant les accessoires et le code JavaScript rendu par le serveur.

Remarque, même sans rendu serveur (sans étape 3 ci-dessus), la mise en cache des fragments est toujours efficace.

Pro : Intégration avec Node.js pour le rendu du serveur

Le rendu du serveur par défaut est effectué par ExecJS. Si vous souhaitez utiliser un nœud.serveur js pour un rendu de serveur plus performant, email [email protected] .ShakaCode a construit un serveur de rendu de nœuds premium qui fait partie de React on Rails Pro.

Témoignages pour ShakaCode

Témoignage HVMN, par Paul Benigeri, 12 octobre 2018

Le prix que nous avons payé pour la consultation + la licence React on Rails pro a déjà été remboursé à plusieurs reprises à partir des seuls frais d’hébergement. L’ensemble du processus était super facile, et notre équipe de base a pu se concentrer sur l’expédition de nouvelles fonctionnalités lors de ce sprint.

Témoignage de ResortPass, par Leora Juster, le 10 décembre 2018

Justin et son équipe nous ont aidés à établir les bases de conception et les normes pour notre transition vers une application react on rails. Seulement trois mois de travail avec l’équipe de Shaka code et nous avons une page principale de notre rendu côté serveur d’applications à des vitesses exponentiellement améliorées.

De Joel Hooks, Co-fondateur, Nerd en chef à egghead.io , 30 janvier 2017:

Pour plus de témoignages, voir Projets en direct et Félicitations.

Supporters

Les entreprises suivantes soutiennent ce projet open source, et ShakaCode utilise leurs produits ! Justin écrit React on Rails sur RubyMine. Nous utilisons Scout pour surveiller les performances en direct de HiChee.com , Rails AutoScale pour mettre à l’échelle les dynos de HiChee, BrowserStack pour résoudre les problèmes avec les navigateurs bizarres.

Clubhouse

Je viens de déplacer le développement de ShakaCode vers ClubHouse de Trello. Nous allons le faire avec tous nos projets. Si vous souhaitez essayer ClubHouse et bénéficier de 2 mois gratuits au-delà de la période d’essai de 14 jours, cliquez ici pour utiliser le code de parrainage de ShakaCode. Nous participons à leur formidable programme de parrainage à trois côtés, que vous pouvez lire ici. En utilisant notre code de parrainage, vous supporterez ShakaCode et, par conséquent, Réagirez sur Rails!

Si vous souhaitez soutenir React on Rails et que votre entreprise soit répertoriée ici, contactez-nous.

Aloha et meilleurs voeux de Justin et de l’équipe ShakaCode!

Travaillez avec nous