DEV Community

Guilherme Yamakawa de Oliveira
Guilherme Yamakawa de Oliveira

Posted on

[PT-BR] Configurando ReactJS no Rails com o Webpacker

O Javascript moderno usa muitas bibliotecas e estruturas de processamento, incluindo NPM, Yarn e Webpack. Então, quando você usa o React, você 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 para Javascript, o Webpacker e no Rails 6.0, o Webpacker será o padrão. O Webpacker usa o Webpack para compilar todos os seus arquivos Javascript.

Uma das grandes vantagens do Webpack é que, em seu ambiente de desenvolvimento, ele oferece a opção de compilação ao vivo do Javascript via webpack-dev-server. Isso significa que você altera um arquivo e ele é automaticamente compilado e até mesmo enviado para o navegador. Isso permite um desenvolvimento muito rápido. É claro que, em produção, você deseja usar pré-compilação, compilando 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 aplicação

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

Este comando cria o aplicativo e configura o Webpacker. Ele ignora a estrutura de testes.

bundle exec rails webpacker:install:react

Este 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 para aceitar arquivos com a extensão .jsx
  • Instala todas as dependencias 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 o ignoro e utilizo uma estrutura de pastas separando todos os componentes React dentro dela e para usar um componente eu utilizo um helper da gem 'react-rails'.

Configurando o ReactJS

Adicione no seu Gemfile.

gem 'react-rails'

Após salvar o arquivo não esqueça de executar o comando bundle install para baixar e instalar a gem na aplicação.

Instale o react_ujs com o comando:

yarn add react_ujs

O react_ujs é um driver do react-rails ele varrerá a página e montará os componentes usando data-react-class e data-react-props.

Agora vamos criar uma estrutura bem simples para deixarmos 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>
  }
}

Para 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 para a mágica acontecer.

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

Este 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 na view o componente com o helper do react-rails.
app/views/pages/index.html.erb

<%= react_component 'hello_world' %>

Na hora de iniciar a aplicação utilize o comando:

rails s

Em outra aba do terminal execute:

bin/webpack-dev-server

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

Coloquei o exemplo do código feito no Github:

https://github.com/guilhermeyo/rails-com-reactjs


Fontes:

Top comments (0)