[JAVA] Présentation de React to Rails avec react-rails

Salut à tous, cette fois je vais vous montrer comment introduire React to Rails en utilisant un joyau appelé "react-rails". Il existe plusieurs façons de déployer React dans Rails, mais je l'ai choisi car c'est probablement facile et courant. En guise de mise en garde, cela dépend de Rails, donc je pense que vous l'aimez ou non.

À propos, le document officiel est accessible à partir de l'URL suivante. URL de react-rails: https://github.com/reactjs/react-rails#server-side-rendering

Je vais l'introduire selon le flux suivant.

--Prémisse --Introduction de react-rails --Créer un composant

• Sortie avec vue

supposition

(1) Une application a déjà été créée avec rails-new. ② Utilisez les rails 5.0 ou version ultérieure

Introduction de react-rails

Écrivez ce qui suit au bas du Gemfile.

gem 'webpacker'
gem 'react-rails'

• Selon la version des rails, "webpacker" peut être inclus par défaut, veuillez donc vérifier à l'avance. Veuillez vous déplacer vers le répertoire de l'application cible avec la commande cd. Ensuite, exécutez les commandes suivantes dans l'ordre.

$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install

Notez que les commandes ① et ② ne peuvent être exécutées que si rails est 5.0 ou supérieur!

Vous êtes maintenant prêt à partir! !!

Créer un composant

Pour décrire React, il est courant de créer des fichiers dans un répertoire appelé composants. Vous pouvez le créer manuellement, mais créons-le selon la documentation officielle. Exécutez la commande suivante dans le terminal, etc.

$ rails g react:component HelloWorld greeting:string

Ensuite, le fichier suivant sera créé.

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

Ceci termine la création du fichier.

Sortie en vue

Sortons le contenu de React à partir du composant créé.

app/views/posts/index.html.erb

<%= react_component('HelloWorld', greeting: 'Mike') %>

Voyons le contenu de sortie dans le navigateur. Vous devriez voir "Greeting: Mike".

En passant, en plus du répertoire des composants, vous pouvez également créer votre propre répertoire. Exécutez la commande suivante.

$ rails g react:component my_subdirectory/HelloWorld greeting:string

Ensuite, le fichier js a été créé sous le répertoire des composants dans la commande exécutée précédemment, mais cette fois, ce sera comme suit.

app/javascript/my_subdirectory/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

J'ai pu créer un fichier js sous "mon_sous-répertoire" spécifié dans la commande. Lorsque vous appelez pour visualiser, décrivez ce qui suit.

app/views/posts/index.html.erb

<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>

Si vous vérifiez votre navigateur, vous devriez voir "Salutations: Bonjour de react-rails."

C'est pratique car il peut être facilement appelé avec la méthode react_component. Je viens de le présenter, donc je vais jouer avec.

En passant, il fait plus froid ces jours-ci. Je suis trop en colère et frappe le clavier avec ma main en forme de mannequin. (Si vous allumez le chauffage, ouais ...)

Merci d'avoir lu jusqu'au bout! !!