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 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.
<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.
