Solucionado
Olá, pessoal. Quando rodo o projeto local com npm start e digito no navegador http://localhost:3000/posts a página exibida para mim é aquela página de erro que desenvolvemos no início do curso "Ops! Essa página não existe."
Eu não estou conseguindo encontrar o motivo, alguém pode me auxiliar, por favor?
Muito obrigada!
Oi Natália, tudo bem?
Para iniciar o servidor, precisamos inicializar o json-server com o seguinte comando no terminal: json-server --watch db.json --port 3000. Assim, ele irá inicializar na porta 3000 do nosso servidor local (localhost).
Você digitou esse comando e mesmo assim não está funcionando? Ele deu algum erro na hora de inicializar o comando? Se você preferir, pode mandar uma foto aqui pra mim do que aparece quando você inicia o json-server!
De qualquer maneira, espero ter ajudado =)
Oi, Giovanna, muito obrigada pela resposta. Quando inicializo com o comando que você sugeriu e em seguida rodo o npm start, a mensagem que recebo é que já existe algo rodando na porta 3000. Quando contruímos nossa api no curso, usamos a porta 5000
import axios from 'axios'
export const api = axios.create({
baseURL: 'http://localhost:5000'
})
export const busca = async(url, setDado) => {
const reposta = await api.get(url)
setDado(reposta.data)
}Mas mesmo assim não consigo chegar até a página localhost:3000/posts no console aparece um erro 304 e caio na página "Ops! Essa página não existe."
Oi Natália, obrigada pelo retorno!
Entendi o que está acontecendo, veja só: você está rodando a sua aplicação React na porta 3000, e o servidor na porta 5000. Por isso que está dando um erro, pois você está tentando acessar o servidor como localhost:3000/posts, mas na verdade a porta do servidor é a 5000, então para acessar os posts vindo do servidor, no formato JSON, você precisa acessar: localhost:5000/posts.
Agora deve funcionar! Me retorne aqui se precisar de mais alguma coisa, estou à disposição!
Sim! Isso funciona =) Mas eu não consigo ver o dados do JSON renderizados na tela através dos componentes React em localhost:3000/posts =(
Entendi! Então, mas pelo que eu vejo no curso, a aplicação React só possui duas rotas: a home (que é dada apenas por uma barra /), e a sobre (/sobre), então os posts devem aparecer no Home (e para acessar o Home, é só digitar: http://localhost:3000/). Acredito que seja por isso que está dando um erro de página não encontrada, porque realmente não existe um caminho /posts na aplicação web, apenas no servidor. Tanto é que importamos o componente ListaPost dentro do componente Home, passando a URL /posts, mas essa URL é para fazer a pesquisa no servidor!
De qualquer maneira, você poderia mandar seu código do componente Home e ListaPost, para eu entender melhor o que está acontecendo?
Acredito que eu tenha confundido as rotas. Muitíssimo obrigada pela atenção e pela explicação! <3