React em aplicação MVC

Como assim? Creio que você está se questionando e esse questionamento é devido não ser a forma comum de aplicar essa tecnologia, na grande maioria das vezes o react.js é utilizado na parte da visual de um software para consumir informações de  apis Rest.

Então vamos lá, react em aplicações MVC, antes de sair utilizando alguma tecnologia precisamos entender a finalidade dela é em que cenário é adequado aplicá-la. 

Imagine o seguinte cenário: existe um empresa que possui um software arquitetura MVC é já cresceu bastante, mas sempre surgirá demandas na parte do javascript para serem feita, beleza você vai lá usa jquery para facilitar no desenvolvimento das funcionalidades até que chega o react.js que simplificará mais ainda o processo de desenvolvimento da demandas na parte de javascript, você vai e apresenta para empresa a tecnologia, todos ficam interessados, mas a empresa percebe que será necessário fazer um grande alteração na aplicação isso fará uma pausa de um bom tempo para aplicar essa tecnologia que você apresentou, então a empresa decide não aderir a tecnologia.

O que aconteceu foi que muitas da vezes nós programadores ficamos empolgamos com uma tecnologia é saímos querendo aplicar um tecnologia, mas quando estamos lidando com um software é necessário analisar alguns pontos como: adoção da tecnologia pelo mercado para que ela continue cresce é não morra, impacto dessa nova tecnologia no software seja em questão de alterações ou mesmo financeiro, pois no final das contas estamos falando de dinheiro é uma empresa se mantém viva apenas se estiver lucrando.

Por isso que eu acho que essa abordagem de react em aplicações MVC  é interessante pois irá evitar que tenha que ser feitas grandes alterações na aplicação para que seja aplicada a tecnologia, é assim o programador fica feliz em trabalhar com react.js e a empresa também, pois a produtividade na entrega das tarefas aumentam.

Falei muito é não mostrei nada ainda, então vamos lá. Na imagem abaixo está a estrutura do projeto que criei de exemplo para explicar essa abordagem.

Detalhes sobre a estrutura de pastas:

1. No diretório componentsReact é onde ficam os componentes react. OBS: o nome do diretório poderia ser diferente, isso não afetaria em nada.
2. No diretório src é onde se encontra o código da aplicação web node.js
3. No diretório public é onde fica os arquivos públicos com js e css 
4. No diretório views é onde se encontram as páginas da aplicação.

Agora vamos entrar mais a fundo na parte que utiliza react. A imagem abaixo demonstra as configurações do webpack:

Resumidamente o arquivo webpack.config.js funciona da seguinte forma:

• O entry nada mais é que o arquivo de entrada que o webpack usará para gerar o arquivo bundle.js
• O output está definindo que o arquivo bundle.js gerado pelo webpack será colocado no diretório public para que mais a frente seja utilizado no arquivos dentro do diretório views
• Quando for gerado o código do arquivo bundle.js ele será atribuído a uma variável com o nome especificado na chave library. 
• O module onde se encontram as regras e loader que deve ser aplicados para que seja possível o webpack lidar com as versões mais recentes do javascript e também com css.

No arquivo ./src/index.js da diretório componentsReact ficará da seguinte forma:

Vamos lá, deixa eu explicar isso daqui:

1. Você deve estar vendo que possui duas funções a renderLogin e renderLogout ambas possuem parâmetros, o container receberá a id de um elemento html onde será injetado o componente, já o segundo parâmetro settings recebe um objeto com informações que podem ser necessárias para o componente é são passadas como propriedades.
2. É no final do arquivo são exportadas as funções que serão adicionadas no bundle.js 

Você deve estar se perguntando como vou renderizar o componente react em uma página. A imagem abaixo demonstra como é feito.

Vou resumir o que está acontecendo aqui:

1. É importado o arquivo o bundle.js na página.
2. Depois é criado um bloco script onde é chamada a variável definida no webpack.config.js onde é atribuída a ela o código gerado pelo bundle.js, é com isso as funções renderLogin e renderLogout. Na linha 45 estou chamando a função renderLogin passando como parâmetros o elemento onde será injetado o componente de login e um objeto com informações necessárias para o componente.

O componente será renderizado na página, o resultado é esse:

Uma coisa importante é em relação às requisições http feitas pelo react.js, não será necessário implementar autenticação com token jwt, pois toda vez que for feita uma requisição que é disparada por um código javascript automaticamente será atribuído  os cookies da aplicação na requisição com isso a aplicação irá conseguir identificar o usuário autenticado pela sessão.

Caso tenha interesse esse é o link do projeto no github:

Resumo:

Nesse post queria passar uma abordagem diferente de como usar react.js. Tendo em mente que a forma que uma tecnologia vai ser usada será baseada no cenário. 

É fazer você entender que muitas das vezes não basta você querer usar uma tecnologia apenas por moda, mas também entender o impacto que isso trará ao software.

Nesse exemplo usei uma aplicação em node.js, mas você pode usar essa abordagem para aplicações laravel, spring, ruby on rails, etc.