[RUBY] [Avec des astuces de retour] Comment présenter React aux rails les plus simples

La configuration Rails + React ou Vue est très populaire dans les entreprises Web modernes. Cette fois, nous présenterons React to Rails, qui prend de l'ampleur avec l'introduction de hook.

Environnement d'exécution

ruby 2.6.3p62 Rails 6.0.2.2

Installer Gem

Vous devez installer Gem pour utiliser Helper. Ajoutez ce qui suit au Gemfile et à l'installation du bundle

• Pour la série Rails 5, `gem'webpacker '' est également requis.

Gemfile

gem 'react-rails'
#La série Rails 5 a également ajouté les éléments suivants
gem 'webpacker'

Installez React

Exécutez la commande suivante dans le terminal.

terminal

$ bin/rails wepacker:install:react
$ bin/rails g react:install

#Dans la série Rails 5, exécutez également ce qui suit
$ bin/rails webpacker:install

Ensuite, les modifications suivantes seront ajoutées.

** Ajout du répertoire app / javascript / components / ** Les fichiers React seront créés ici.

** Ajout du traitement pour intégrer React dans app / javascript / packs / application.js **

app/javascript/packs/application.js

//Le code suivant est ajouté à la fin
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

** Ajout du rendu côté serveur (SSR) à app / javascript / packs / server_rendering.js **

app/javascript/packs/server_rendering.js

//Le code suivant est ajouté à la fin
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

• Pour la série Rails 5, il est nécessaire de décrire ce qui suit dans l'en-tête de app / views / layouts / applicationi.html.erb (6 est décrit par défaut)

ruby:app/views/layouts/applicationi.html.erb

<%= javascript_pack_tag 'application' %>

La préparation est terminée.

Créer un composant

En guise de test, créez un composant appelé HelloWorld. Exécutez la commande suivante.

terminal

$ bin/rails g react:component HelloWorld greeting:string
Running via Spring preloader in process 12477
      create  app/javascript/components/HelloWorld.js

salutation: string est respectivement le nom et le type de l'argument. Ensuite, le fichier suivant sera généré.

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

Introduction aux rails

Ajoutez le code suivant à la partie où vous souhaitez appliquer le composant dans le fichier rails ʻerb, et l'installation est terminée! <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>`

Des trucs!

Le code qui est automatiquement ajouté à ʻapp / javascript / packs / application.jslorsque React est installé est ** le processus de lecture du code React sur toutes les pages **, donc il s'applique également aux pages sur lesquelles React n'est pas installé. Et la réponse sera réduite. Supprimez la partie ajoutée automatiquement, ** uniquement sur la page où React est installé **<%= javascript_pack_tag 'server_rendering.js' %>` Vous pouvez éviter cela en ajoutant.