Uma página ReactJS no Wordpress

Fala ai José, tudo bem? Vamos lá:

Tenho um blog em Wordpress (ex: meublog.com) e gostaria de colocar uma página do blog a partir de um build de React (meublog.com/calculadora) mas não tenho ideia de como fazer isso.

Isso pode ser feito de N maneiras, o jeito mais simples que eu poderia te dizer é gerar o buildar o seu projeto em React, isso vai gerar a pasta build.

Pegue os assets (js, css, imagens, etc...) necessários e jogue para dentro do seu projeto do WP, depois na página que representa a calculadora, você vai precisar adicionar a tag script e link para importar os arquivos .js e .css necessários.

Outra coisa, essa página estou fazendo com React no frontend e C# no backend. Quando o usuário utilizar a calculadora ele realizará os cálculos utilizando os recursos do servidor?

Depende, para que a calculadora utilize os recursos do servidor você vai precisar subir o servidor no cloud e via requisições AJAX se comunicar com o mesmo.

Espero ter ajudado.

Olá, Matheus,

Muito obrigado pela resposta!

Eu coloquei os recursos originados no processo de build do react dentro de public_html/customhtml. Dessa forma eu consigo acessar meublog.com/customhtml e consegui acessar a página.

Em outra página minha, eu já coloquei os arquivos originados pelo build do react junto com o publish da Api em C# direto na public_html e a requisição funcionava.

Na época, eu colocava uma requisição no arquivo JS:

xhr.open('POST', 'https://outrosite.com/api/Calculadora/', true);

Agora eu não sei que requisição devo fazer. Já tentei colocar o Global.asax do ASP.NET dentro da mesma pasta do build do React (customhtml) e fazer uma requisição

xhr.open('POST', 'https://meublog.com/customhtml/api/Calculadora/', true);

Mas não funcionou.

Grato desde já.

Fala ai José, sobre a API precisa ver como e onde você subiu ela.

Ela precisa estar rodando em algum servidor na nuvem e que tenha um endereço.

No caso da sua requisição acho que está fazendo a requisição para um endereço do qual a API não sabe responder.

Não manjo de ASP.NET, então não sei como subir um servidor e deixar a API no ar.

Mas em Node por exemplo eu poderia subir ela em um Droplet da Digital Ocean, em uma porta X com o endereço Y. Ficando:

fetch('http://meu-endereco:minha-porta/api')

Acho que a ideia seria mais ou menos essa.

Um ponto legal é garantir que a API esteja no ar e disponível primeiro antes de integrar ambos. Você pode estar usando o Insomnia para testar a API:

https://insomnia.rest/download/

Espero ter ajudado.