Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Integrar ReactJS com uma aplicação já pronta

Bom dia, tudo certo? Fiz os três cursos de reactjs aqui do alura e fiquei com uma dúvida. Todo o curso foi baseado em uma Simple Page Application (SPA). Entretando, como eu faço para criar um componente Reactjs e integrar com uma página já existente?

PS: Execelente cursos de REACT!!!!

Desde já Agradeço,

Maicon.

3 respostas

Oi Maicon, essa pergunta foi respondida no episódio 66 do podcast hipsters.tech (https://hipsters.tech/react-o-framework-onipresente-hipsters-66/)

A ideia é que você comece apenas com a ideia de componentes. Antes mesmo de pensar em SPA. Começa desacoplando os componentes visuais, pra depois pensar nos comportamentos. Só depois, caso ache que seja uma boa ideia, você transforma a aplicação em uma SPA.

Não é um processo rápido, mas gradual. Ouve o podcast e vê se ajuda em algo a explicação do Maurício. Se não me engano é ele quem explica essa parte.

acho que eu não fui claro,

como eu faço, à partir de um certo html, que o componente X renderize-se naquela div... exemplo:

<div id="meuSistema">
   <div id="aquiQueroQueRenderizeUmComponente">
   <div id="outraParteDoSistema">
   <div id="aquiQueroQueRenderizeOutroComponente">
</div>

isso que eu estou confuso....

Como exportar o projeto para arquivos estáticos onde eu passe parâmetro e diga que o componente vai renderizar na div X

solução!

Entendi. Onde você define em qual div vai renderizado o componente é justamente a parte de react-dom, que tem o render.

Veja o Hello World no site do React, lá tem um exemplo: https://reactjs.org/docs/hello-world.html

Veja que temos duas libs no caso a do React em si, onde você escreve seus componentes e a ReactDOM que renderiza tudo no HTML.

O render do react-dom vai receber dois parâmetros, o primeiro deles é o componente que quer renderizar e o segundo é uma referencia a um componente HTML. É por ai que você deve começar.

Nas aplicações inteiramente em React, é mais comum ter apenas um div, já que todos os componentes virão das classes. No seu caso, com um processo gradativo, vai precisar ir separando aos poucos e fazendo render de cada um.