juntar front end com backend

Olá, Matheus, tudo bem?

Se prepara porque vou te encher de siglas rsrs.

Existem tecnologias que já entregam tanto o front quanto o back para você. Ou seja, a pessoa dev é responsável tanto pela visualização (que será renderizada no navegador) quanto pelo código que executa no servidor web (o backend). Só pra facilitar a explicação vou chamar esse tipo de aplicação de Web app (não é um termo plenamente reconhecido para este tipo de aplicação, só quero mesmo facilitar a distinção do próximo parágrafo, ok?). Observe que neste tipo só existe uma única aplicação rodando.

Já o cenário que você descreveu (quando falou de React) tem se tornado bastante comum no mercado. Uma diferença é que nele existem pelo menos duas aplicações rodando. Vamos descrever o tipo das duas a seguir.

Aplicações frontend neste cenário

Uma delas é responsável pelo front do sistema, a visualização no navegador. Você deu um exemplo de tecnologia usada para este tipo de projeto, o React. Outros exemplos seriam Angular e Vue. Uma das características predominants deste tipo de aplicação é que o javascript é usado para carregar partes da tela no navegador. Então é quase como se houvesse uma única página HTML cheia de partes (uma colcha de retalhos?) que vão sendo carregadas de acordo com o objetivo da pessoa usuária. Por isso (página única) este tipo de aplicação é chamado SPA, de Single Page Application.

Importante destacar que tanto o front das web apps quanto o das SPAs vai utilizar HTML e CSS. Por isso aqui na Alura enfatizamos que o conhecimento nestas linguagens é fundamental para devs web.

Um artigo da Alura detalhando e comparando Angular, React e Vue: https://www.alura.com.br/artigos/angular-vs-react-vs-vue-js

Aplicações backend neste cenário

A outra aplicação é responsável pelo backend, só que neste modelo ela não tem obrigação de entregar HTML. Em outras palavras ela não é responsável pela interface com a pessoa usuária (UI). E é aí que vem a chave para a resposta a sua pergunta ("como estes dois tipos de aplicação conversam?"). O backend em geral entrega a informação solicitada em um formato que é facilmente reconhecido pelo javascript (lembre-se que o javascript em SPAs é predominante). Os dados são entregues pelo backend usando a mesma maneira que representamos objetos em javascript, uma sintaxe ou notação Javascript para objetos. Este é o famoso JSON. As aplicações backend podem entregar as informações em outros formatos, ok? Quis enfatizar o JSON porque é o padrão de mercado atualmente. Antigamente usávamos XML para esta troca, por exemplo.

Mais detalhes sobre JSON: https://developer.mozilla.org/pt-BR/docs/Glossary/JSON

Respondendo a pergunta...

Então é através destas informações (de novo: geralmente no formato JSON) que as duas aplicações conversam! O fluxo é o seguinte:

1. a SPA se comunica com o backend usando algum padrão ou protocolo
2. o backend responde a solicitação entregando os dados sem obrigação visual (por ex. JSON)
3. o SPA recebe os dados e os renderiza na parte da tela específica para isso

Vale lembrar que o backend precisará implementar esse padrão ou protocolo de maneira que consiga lidar uniformemente com diferentes tipos de solicitação. Por exemplo em um sistema de filmes, o frontend vai querer mostrar na tela filmes, gêneros, artistas, diretores. Para isso precisaria solicitar estas info para o backend. E este precisa entregar (ou transferir) estes dados (ou recursos) de forma padronizada. Um dos "padrões" mais usados atualmente no backend para entregar estas informações é o REST, de REpresentational State Transfer.

Aprofundando REST: https://www.alura.com.br/artigos/rest-conceito-e-fundamentos

Ufa, Matheus! Espero que agora tenha criado ainda mais curiosidade e motivação para aprender e estudar estes tópicos que abordei neste texto.

Deixo mais dois artigos que procuram explicar (bem melhor) esta distinção: https://www.alura.com.br/artigos/o-que-e-front-end-e-back-end https://www.alura.com.br/artigos/comecando-com-front-end

Abraços e bons estudos!