Aplicação do React com Ruby para um Design System

Quando trabalhamos com aplicações Rails e queremos implementar um Design System utilizando React, seguimos alguns passos para garantir que tudo funcione corretamente e de forma integrada.

1. Verificação das Rotas do Rails:
A primeira coisa a fazer é verificar se a rota que será utilizada já existe ou se precisará ser criada. Isso é importante porque o Design System pode ser aplicado tanto em rotas existentes quanto em novas rotas.

2. Identificação do Controller e Views:
Uma vez identificada a rota, determinamos qual controller e actions estão envolvidos, além da view associada. Isso é fundamental para saber onde o novo componente React será inserido.

3. Criação da Rota no React:
Para renderizar um componente React, precisamos criar uma rota correspondente no lado do frontend. Mantemos o nome da rota consistente com a rota do Rails para evitar confusão. Isso envolve criar um arquivo de componente no diretório app/javascript/componentes. Por exemplo, para uma página de administração, criaríamos app/javascript/componentes/pages/admin/index.jsx.

4. Implementação de Feature Toggles (para sistemas legados):
Em sistemas legados, pode ser interessante habilitar a nova interface apenas para uma parte dos usuários enquanto o restante continua utilizando a versão antiga. Para isso, podemos usar feature toggles, que permitem controlar quem vê o novo componente React.

5. Estrutura Básica do Componente React:
O arquivo index.jsx conterá o código React que define o componente da página. Aqui está um exemplo básico de como pode ser estruturado:

   import React from 'react';
   import ReactDOM from 'react-dom';

   const AdminPage = () => {
     return (
       <div>
         <h1>Admin Page</h1>
         {/* Adicione mais componentes ou lógica aqui */}
       </div>
     );
   };

   document.addEventListener('DOMContentLoaded', () => {
     ReactDOM.render(<AdminPage />, document.getElementById('react-root'));
   });

Neste exemplo, o componente AdminPage é renderizado em um elemento HTML com o id react-root.

6. Integração com Rails:
No lado do Rails, você precisará incluir um elemento HTML com o id apropriado (react-root no exemplo) na view correspondente. Isso permite que o React tome controle daquela parte da página.

   <!-- app/views/admin/index.html.erb -->
   <div id="react-root"></div>

7. Configuração do Webpacker:
Certifique-se de que o Webpacker está configurado corretamente para compilar seus arquivos JavaScript. O Webpacker é o gem do Rails que facilita a integração de bibliotecas modernas de JavaScript como o React.