[PT-BR] Configurando ReactJS no Rails com o Webpacker
Tags: rails, ruby, react, reactrails
Published: 2020-02-06 23:04:48

---
title: [PT-BR] Configurando ReactJS no Rails com o Webpacker
published: true
description: Se você quer precisa de campos de textos robustos mas com a simplicidade do rails, esse post é para você
tags: rails, ruby, reactjs, react-rails
---

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:<br>
- 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:

```jsx
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:<br> `app/javascript/packs/application.js`

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

No arquivo:<br> `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:<br> `config/routes.rb`


```ruby
# 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`

```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:<br>
[https://github.com/guilhermeyo/rails-com-reactjs](https://github.com/guilhermeyo/rails-com-reactjs)

---

Fontes:

- [Documentação oficial](https://github.com/rails/webpacker)
- [Documentação da gem react-rails](https://github.com/reactjs/react-rails)