[PT-BR] Configurando ReactJS no Rails com o Webpacker
Guilherme Yamakawa de Oliveira
Posted on February 6, 2020
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?
- Ruby 2.5.1 ou superior
- Rails 5.2.1 ou superior
- 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:
Posted on February 6, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.