GUILHERME YAMAKAWA DE OLIVEIRA

PT|EN

Configurando ReactJS no Rails com Webpacker

O Javascript moderno usa muitas bibliotecas e estruturas de processamento, incluindo NPM, Yarn e Webpack. Então, quando você usa o React, precisa de todas essas ferramentas. O Rails tem asset pipeline há muito tempo e usou o Sprockets como a principal ferramenta.

Desde o Rails 5.1 existe uma alternativa ao Sprockets pra Javascript, o Webpacker. No Rails 6.0, o Webpacker virou padrão. Ele usa o Webpack pra compilar todos os seus arquivos Javascript.

Uma das grandes vantagens do Webpack é que, no ambiente de desenvolvimento, ele oferece compilação ao vivo do Javascript via webpack-dev-server. Você altera um arquivo e ele é automaticamente compilado e até enviado pro navegador. Isso permite um desenvolvimento muito rápido. Em produção, claro, você usa pré-compilação, juntando todos os arquivos Javascript em apenas um reduzido.

Aqui vou mostrar como criar uma aplicação Ruby on Rails do zero com Webpacker e configurar o ReactJS através do Webpacker.

O que vamos precisar

  1. Ruby 2.5.1 ou superior
  2. Rails 5.2.1 ou superior
  3. Webpacker 3.5.5 ou superior

Criando a aplicação

rails new rails-com-reactjs --skip-test --webpack

Esse comando cria a aplicação e configura o Webpacker. Ele ignora a estrutura de testes.

bundle exec rails webpacker:install:react

Esse comando instala e configura o ReactJS da seguinte forma:

  • Adiciona as configurações do babel no root
  • Cria um exemplo em app/javascript/packs/hello_react.jsx
  • Atualiza as configurações do Webpacker pra aceitar arquivos com a extensão .jsx
  • Instala todas as dependências que o React precisa

O exemplo criado hello_react.jsx insere um componente direto no <body> da aplicação. Achei isso sem sentido, sem nenhuma estrutura, e se utilizarmos vai aparecer em todas as páginas. Por isso eu sempre ignoro ele e uso uma estrutura de pastas separando todos os componentes React dentro dela. Pra usar um componente eu utilizo um helper da gem 'react-rails'.

Configurando o ReactJS

Adicione no seu Gemfile:

gem 'react-rails'

Depois de salvar o arquivo não esqueça de rodar bundle install pra baixar e instalar a gem na aplicação.

Instale o react_ujs:

yarn add react_ujs

O react_ujs é um driver do react-rails. Ele varre a página e monta os componentes usando data-react-class e data-react-props.

Agora vamos criar uma estrutura bem simples pra deixar os componentes organizados e criar o nosso componente.

mkdir app/javascript/components
touch app/javascript/components/hello_world.jsx

Dentro do arquivo hello_world.jsx adicione o seguinte código:

import React, { Component } from 'react'

export default class HelloWorld extends Component {
  render() {
    return <h1>Hello World</h1>
  }
}

Pra conseguirmos chamar o componente de dentro de uma página, precisamos adicionar as seguintes configurações no final do arquivo:
app/javascript/packs/application.js

const componentRequireContext = require.context('components', true)
const ReactRailsUJS = require('react_ujs')
ReactRailsUJS.useContext(componentRequireContext)

No arquivo:
app/views/layouts/application.html.erb

# Remova o javascript do asset pipeline.
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

# Adicione o javascript do webpacker.
<%= javascript_pack_tag 'application' %>

Utilizando o componente nas views

Agora vamos criar uma página pra a mágica acontecer.

rails g controller pages index --no-helper --no-assets --no-controller-specs --no-view-specs

Esse comando cria um controller chamado pages e uma action index. Ele ignora a estrutura de testes, assets e helpers.

No arquivo:
config/routes.rb

# Remover
get 'pages/index'

# Adicionar
root 'pages#index'

Chame o componente na view com o helper do react-rails: app/views/pages/index.html.erb

<%= react_component 'hello_world' %>

Pra iniciar a aplicação:

rails s

Em outra aba do terminal:

bin/webpack-dev-server

Pronto. Agora você pode criar componentes com ReactJS pra auxiliar no desenvolvimento da sua aplicação Rails, sem ter que usar o React como um Single Page Application.

Coloquei o exemplo do código no Github:
https://github.com/guilhermeyo/rails-com-reactjs

Fontes:

Comentários