Montage de composants React avec des rails : simplifier les interfaces dynamiques

Les applications modernes nécessitent souvent des interfaces dynamiques capables de gérer les appels d'API, les formulaires dynamiques et le routage, et React est un excellent choix. Cependant, l'approche d'application monopage (SPA) de React ne correspond pas tout à fait à Ruby on Rails, un framework full-stack qui restitue le contenu côté serveur. Bien qu'il soit possible d'utiliser React avec Rails en configurant un backend API ou en utilisant l'intégration Webpack, cela ajoute une complexité et un temps de développement considérables.

Défi

Dans des projets comme Raive et Dunu506, nous avons besoin de fonctionnalités dynamiques comme des assistants complexes qui nécessitent une interaction en temps réel. Le rendu traditionnel côté serveur de Rails est fastidieux pour ces cas d'utilisation, et la nature dynamique de React convient parfaitement.

Mais comment utiliser React sans adopter pleinement SPA ? La solution est simple : nous pouvons monter des composants React dans des vues Rails sans abandonner l'approche de rendu côté serveur de Rails.

Solution

Les composants React peuvent être attachés à des éléments spécifiques dans les vues rendues côté serveur. Voici comment nous commençons :

Montage de base : Dans app/javascript/packs/application.js, nous montons un simple composant React :

<code class="language-javascript">import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

document.addEventListener('DOMContentLoaded', () => {
  const div = document.querySelector('#hello')

  if (div) {
    const props = JSON.parse(div.getAttribute('data-props'))
    ReactDOM.render(<Hello />, div)
  }
})</code>

Réutilisabilité : Nous avons ensuite créé une fonction réutilisable pour monter dynamiquement le composant :

<code class="language-javascript">import MyReactComponent from './MyReactComponent'

function mountComponent(id, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const div = document.querySelector(id)

    if (div) {
      const props = JSON.parse(div.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, div)
    }
  })
}

mountComponent('#my-react-component', MyReactComponent)</code>

Gestion de plusieurs composants : Pour les situations où un même composant doit être réutilisé à plusieurs endroits, nous avons généralisé la méthode :

<code class="language-javascript">function mountComponent(selector, Component) {
  document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll(selector)

    elements.forEach(element => {
      const props = JSON.parse(element.getAttribute('data-props'))
      ReactDOM.render(<Component {...props} />, element)
    })
  })
}</code>

Éviter les conflits : pour éviter les conflits avec d'autres classes CSS ou JS, nous avons décidé d'utiliser un attribut de composant de données personnalisé au lieu d'utiliser id ou class :

<code class="language-javascript">function mountComponents(components) {
  document.addEventListener('DOMContentLoaded', () => {
    const roots = document.querySelectorAll('[data-component]')

    Array.from(roots).forEach((root) => {
      const props = JSON.parse(root.dataset.props)
      const Component = components[root.dataset.component]

      ReactDOM.render(<Component {...props} />, root)
    })
  })
}

mountComponents({ MyReactComponent })</code>

Résultats

Cette solution fournit un moyen propre et réutilisable de monter des composants React dans des vues Rails. Cela nous permet de profiter des capacités dynamiques de React tout en conservant la simplicité du rendu côté serveur Rails. Nous avons regroupé cette approche dans une bibliothèque qui peut être utilisée dans n'importe quel projet, économisant ainsi du temps de développement et rationalisant notre flux de travail.

Conclusion

En utilisant l'attribut data-component et en créant une fonction simple pour monter dynamiquement un composant React, nous avons réussi à combiner la puissance de React avec l'approche traditionnelle de rendu côté serveur de Rails. Cette approche est flexible, réutilisable et concise, ce qui en fait un bon choix pour les équipes qui ont besoin d'interfaces dynamiques dans les applications Rails.

N'hésitez pas à consulter notre dépôt GitHub pour plus de détails et pour vous impliquer dans le projet !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!