Pessoal, no vídeo, na hora de instalarmos a biblioteca Tanstack Query / React Query eu falei o nome da lib incorretamente. O certo para instalar com npm é @tanstack/react-query
Gosto demais do seu canal primeiro FullStalk que eu vi que não apaga e não atualiza. Simplesmente cria e lista 🤣🤣🤣 Gosto muito dos seus conteúdos, dedica como você não vi ainda uma mulher da sua idade parabéns! Todo meu carinho e respeito : ()
Não cria e nem lista pq geralmente esses sistemas de cardápios tem um painel de controle só pra configurar o cardápio, como: Atualizar o item, excluir, mudar imagem e etc... Ja fica o desafio ai... criar um painel de controle só pra administrar o cardápio
Sensacional! Primeiro eu assisti os vídeos prestando atenção.. depois os revi fazendo junto! São incríveis os conteúdos que você sempre disponibiliza, sou fã! Sem palavras pra agradecer! Muito obrigada!
Parabéns pelos vídeos, está me ajudando muito, mas vou deixar uma dica construtiva: Tente deixar essa bola com sua imagem, um pouco menor(metade do que está) e no canto superior direito, por muitas vezes ficou na frente do código, e quando vc estiver codando, o foco principal é o código e sua voz.
Fernanda muito bom esses 2 videos, mas uma dica poderia dividir em partes o video, pois a parte mais facil é fazer a tela no Front, eu mesmo vim aqui só pra ver a parte da integração (pra usar o front junto com o back) e a criação do backend onde eu estava com muita dificuldade
@kipperdev Não sei nem como agradecer, a maneira como vc explica o conteúdo é única e isso que vc esta fazendo não vi em vários cursos, primeiro vc nos ensinou a fazer um api , agora como conectar, postei essa dúvida em um curso pago de como conectar com a api que fizemos por lá , e obtive uma resposta vaga como: "esse modulo é de backend vejá na aula de front", porem vc separou em duas aulas o back e o front muito lindo isso, parabéns pelo conteúdo!!
Nossa muito obrigado, Fernando 💜 De verdade, eu fico muito feliz lendo esse tipo de comentário e fico mais feliz ainda de saber que o conteúdo tem te ajudado. Um grande abraço
Eu vejo esse tipo de vídeo e acho incrível, sou dev backend eu já tentei inventar de ir pra parte do front mas nunca me dei bem. Admiro muito pessoas como você, moça que tem essa garra, obrigado pelo conteúdo.
9 місяців тому+1
Agradeço demais a Fernanda Kipper pelos vídeos. Nesse mês de Janeiro, consegui estudar por meio desse vídeo e da parte 1, sobre como desenvolver a aplicação back e front end com sucesso! Gostaria de compartilhar meu github, pois aproveitei o gancho dos estudos e adicionei os endpoints PUT e DELETE e adicionei algumas tratativas para retorno de mensagens toast para o cliente, assim que houver uma ação realizada 200 ou erros em geral. github.com/YanBFalcao/JAVA-API-REST-Cardapio/tree/main Fica disponível então o link para a galera que quiser estudar junto comigo e com referência nos vídeos da Fernanda \o/
@kipperdev Feeeer da uma ajuda... Primeiramente parabéns pelo seus ótimos vídeos com didáticas sempre atuais e bem explicadas. Então estudando e aprendendo com seus vídeos e estou criando um projeto com base no seu Porém nesse que estou fazendo utilizei uma Table nativa do HTML, só que quando passa pelo Card componente ele cria uma nova tabela para cada informação vinda do banco Como faz pra resolver isso Precisa usar alguma table específica pra isso não acontecer? Ou tem como ajustar essa padrão? Basicamente pra entender oq fiz Onde vc passa os dados da imagem nome e preço eu usei uma Table e passo por ela na tag td só que o header da Table também réplica para cada informação trazida do banco
Obrigadaa! Simm, posso fazer outro vídeo adicionando testes nesse projeto. Mas já tem vídeo de testes unitários aqui no canal, caso queira dar uma olhada :) ua-cam.com/video/p1bjHvX-DqM/v-deo.html
Deu bug ao utilizar o comando "npm install tanstack-query/react-query", olhei na documentação TanStack Query e adicionei o comando "npm i react-query" e deu certo
O comando correto é " npm i @tanstack/react-query" no vídeo posso ter falado errado, desculpe! Mas quando você instala pelo comando "npm i react-query" acaba instalando a versão antiga que é a v3
10 місяців тому
@JulioCesar-fw5qj Que bom que vim olhar os comentários. Acabei pegando a dica sobre o comando certo que a Fer passou e consegui instalar por meio do "npm i @tanstack/reack-query"
Para quem tiver erro do isLoading, na doc trocaram para "isPending" , e o meu unico problema do projeto até aqui foi envolvendo o css que nao ficou legal mesmo copiando talvez por eu usar edge não ficou legal. fora isso o projeto esta funcional
Aproveita pra você fazer o SEU projeto, a sua estilização, a melhor forma de realmente aprender, é você ter uma ideia de como fazer e se desafiar, fazer outros projetos se baseando nesse, quanto mais você fizer, mais aprende!
Tenho uma noção de html css e javascript, quais as vantagens de se criar uma página usando javastring e react do que usando a forma mais comum citada antes da pra dar uma explicada redumida? A no caso da responsavidade vc trabalhou ela também? Sucesso pra vc sempre.
Todas. kkk Zuera. A vantagem você começa a perceber quando vc começa a ter uma aplicação que vai crescendo muito, e fica cada vez mais difícil dar manutenção. Os conceitos de componentes do react ajudam bastante nesse sentido, onde vc consegue criar aplicações com módulos (partes, funções, componentes, etc) com escopos separados, e vai conseguir reutilizar esses módulos em vários lugares da sua aplicação (sem precisar repetir código). Sem falar que, aplicações que possuem muita interação do usuário na tela, se tornam cada vez mais complexas. O react ajuda muito nesse sentido, pq o objetivo dele ao ser criado pelo Facebook foi justamente esse, conseguir implementar layouts de interfaces complexos, com alto nível de interação dos usuários, sem precisar ter um código tão difícil de implementar e manter. Acrescentando um bonus, ao falar especificamente do react, ainda temos ganhos em produtividade. O react puro, e principalmente com a utilização de outras ferramentas (frameworks), como o Next.js, tornam o desenvolvimento bem mais produtivo, onde muitas atividades, como autenticação e navegação entre páginas são bem mais fáceis de se implementar e manter, do que uma aplicação estática (com html, css e javascript puro), e podem trazer outros ganhos, como uma performance incomparável. Em resumo: utilizar uma lib/framework como o react praticamente tem todas as vantagens possíveis, e as principais são produtividade, escalabilidade e performance.
Concluído com sucesso! kkk...ótimo curso principalmente para quem está começando, só a sua imagem que ficou um pouco grande em alguns momentos atrapalha vê o conteúdo, mas do resto está ótimo.
também não estava conseguindo, resolvi abrindo a imagem em outra aba após pesquisar no google ,após isso só é clicar botão direito na imagem e "copiar link da imagem "
Bom dia mestra, poderia me orientar por favor, vi q tem muitas formas de se criar, queria saber a diferença entre o que esta na doc oficial, que são três forma para se criar um projeto e porque vc usa essa ferramenta?
Fala Fernanda, vi que você utilizou bastante CSS criado por você. É de bom tom usar um biblioteca CSS para modelar isso? Tipo bootstrap ou coisa do tipo? Gostei da tua abordagem do vídeo e como implemento explicado! TMJ! 👊
Oii Bruno, então, depende muito da empresa que você vai trabalhar. Algumas empresas, possuem o design da marca bem definido, vários componentes sendo reutilizados em vários produtos da empresa e sempre seguindo o mesmo padrão etc, então normalmente surge a necessidade para a empresa criar sua própria lib de componentes seguindo o design system da marca e aí o time que cria isso normalmente faz todos os componentes com alguma lib que permita escrever o CSS para ter liberdade de criar exatamente como o Figma como SCSS, Styled Components, Tailwind etc ou até CSS puro. Já em outras empresas você pode não encontrar um design bem definido, normalmente startups, e aí os devs ficam responsáveis de muitas decisões de design, e então nessas horas acho legal usar um Bootstrap, Material UI, Chakra UI etc E também tem empresas em que existe o design certinho para o produto porém esse design só cabe para aquele produto, normalmente para empresas menores ou que estão testando um novo produto diferente dos demais, aí o time acaba decidindo o que fica melhor para eles mesmos afinal só eles irão utilizar. Mas resumo da ópera hahahaha acho legal saber fazer as coisas com CSS puro por que pode ter empresas que você irá precisar, mas também acho bom conhecer essas ferramentas que facilitam a criação de componentes estilizados principalmente para projetos que precisam ser feitos rapidamente 😊
parabens pelo conteúdo, uma dúvida, no video 1 vc utiliza o intelij (back) e agora o vs (front) é uma convenção, porque não usar um dos dois nas duas fases, ou não tem jeito? sendo mais específico, intelij é mais indicado para back e vs para front? podia mostrar como fazer o deploy obrigado
Olá, tudo bem? espero que sim, então, não é questão de convenção ou coisa do tipo, é que para alguns o intellij é uma excelente ferramenta quando se trata do java em si....tem uma interface mais amigavel e por ai vai, no entanto ela em sua versão CE não oferece um suporte decente para html, js, ts e outras coisas voltadas para web, já que eles tem um versão chamada webStorm que é paga e voltada justamente para desenvolvimento do front...então o que fazemos é correr para o VS Code já que além de gratuito ele possui uma vasta gama de extensões que podem ser instaladas para melhorar a sua codificação.
Boa Tarde Fêr, tudo bem. estou com um pequeno problema: em meus inputs, as label estão com erro, e no caso meu modal abre, mas não consigo digitar nada. Segue o erro: Type '{ label: string; value: number; updateValue: Dispatch; }' is not assignable to type 'DetailedHTMLProps'. Property 'label' does not exist on type 'DetailedHTMLProps'. será que consegue me ajudar?
O meu código esta igualzinho ao dela, porém ele não retorna a image, title e price na tela, nao tenho experiencia com front-end apenas back, sera que alguem poderia me ajudar? No console aparece dois erros: The message port was closed before a response was received e o outro erro é: um problema no endpoint /food porta 8080 seguido da mensagem: net::ERR_SSL_PROTOCOL_ERROR
Oii Glauco, para você conseguir usar esse atalho precisa instalar a extensão do VS Code chamada "React Dev Snippets" -> marketplace.visualstudio.com/items?itemName=FernandaKipper.reactcodesnippets
Olá Fernanda, a gostar bastante deste tutorial de fullstack! Descobri hoje o canal e fiquei fã dos vídeos :) Queria perguntar se por acaso vai fazer algum vídeo sobre como dar deploy da aplicação para a cloud, abraço de PT
@@kipperdev Incrível! :) Muito obrigado, preciso de melhorar as minhas práticas de Kubernetes, Docker, Terraform e Azure além da parte de fullstack, uma coisa de cada vez, mas tenho aprendido bastante com você! Esperando por novas coisas agora (Angular tem sido divertido tb)
Oi Fernanda obrigado pelo conteúdo, estou com o seguinte erro, no meu projeto fiz exatamente igual ao seu porém as imagens não são renderizadas, baixei o seu projeto no Github mas ocorreu o mesmo, o que vc acha q poderia ser?
Oii muito obrigadaa 💜 Você diz na Interface FoodData? Quando usamos o "number" no JS ele já é considerado um float ou um integer, mudando de acordo com o necessário!
É uma extensão que eu criei, se chama React Dev Snippets, vou colocar o link aqui para você baixar! marketplace.visualstudio.com/items?itemName=FernandaKipper.reactcodesnippets
Meu react-query está com versão diferente. Acho que mudou a forma de usar o invalidateQueries passando o queryKey e ele também não tem o isLoading. Alterei pra versão que a Fê usou, e deu certo. Vou descobrir como usar na versão mais nova do tanstack.
Oii Anderson, pois é! Acho que realmente a bilioteca teve uma atualização e ai mudou a forma de invalidar as queries... vou deixar o link aqui da documentação atualizada para ajudar :) tanstack.com/query/latest/docs/react/guides/query-invalidation
Tava indo tudo muito bem, até eu ter um problema com o Cors, consigo consultar a API no navegador, no Postman, mas através do novo app não consigo. 😪 Tentei usar plugin, implementar várias coisas e não deu. Queria saber como tu conseguiu resolver isso!!!
tive o mesmo problema, resolvi usando configurações no properties, no meu caso to usanso application.yml ```web: cors: allowed-origins: "*" allowed-methods: GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD max-age: 3600 allowed-headers: "Requestor-Type" exposed-headers: "X-Get-Header"```
Assim até que os Vídeos foram Ótimos, explicou certinho com uma didática excelente, mas poxa não criou uma função para atualizar as comidas ou apagar os itens já adicionados, acho que assim em uma aplicação se a pessoa sem querer clicar em "novo" ela não tem outra escolha a não ser adicionar o item, não tem nem como sair da tela de Cadastro, Não entendo bem, mas tipo não seria melhor juntar as 2 aplicações porque basicamente você tem que rodar 2 servidores locais para poder acessar um site.
Apesar de ser avançado para mim, estava curtindo o vídeo, PARABÉNS. Só fui até 19:30min, deu erro aqui: Uncaught ReferenceError: QueryClient is not defined at main.tsx:7:21 Na lista de importação só tem useQueryClient ou useQuery, não tem QueryClient!
para mim resolveu essa situação quando alterei o diretório em que estava buscando o QueryClient para import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
Gente.... sei nem o que estou fazendo aqui. Eu só sei o básico de HTML, CSS e JS. O suficiente para mesclar com os meus serviços de Java KKKKKKK Acho que aqui está avançado demais para mim.
A menina chega ta com olheira kk , parecendo um soldado do exercito que ficou 1 mes no mato sendo torturado kkkk chega da medo as vezes dessa parada de programacao kkkkkkkkk brincadeira ta FernanadaKipper... a pessoa fica parecendo uma psicopata kkkkkkkkkkkkkkk
Provavelmente o Tanstack Query deve ter atualizado, pois não permite colocar string no parametro da queryClient.invalidateQueries resolvi colocando a mesma versão usada pela Fernanda no meu package.json: "@tanstack/react-query": "^4.26.0"
Parabéns pelos vídeos, está me ajudando muito, mas vou deixar uma dica construtiva: Tente deixar essa bola com sua imagem, um pouco menor(metade do que está) e no canto superior direito, por muitas vezes ficou na frente do código, e quando vc estiver codando, o foco principal é o código e sua voz.
Pessoal, no vídeo, na hora de instalarmos a biblioteca Tanstack Query / React Query eu falei o nome da lib incorretamente.
O certo para instalar com npm é
@tanstack/react-query
O seu rostinho lindo tampou o final desta e de algumas outras coisas que digitou. Mas tranquilo. Obrigado pelo conteúdo!
.card{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 250px;
border-radius: 8px;
box-shadow: rgb(100, 100, 111, 0.2);
}
.card img{
border-radius: 8px 8px 0 0;
width: 250px;
height: 200px;
}
Gosto demais do seu canal primeiro FullStalk que eu vi que não apaga e não atualiza. Simplesmente cria e lista 🤣🤣🤣
Gosto muito dos seus conteúdos, dedica como você não vi ainda uma mulher da sua idade parabéns!
Todo meu carinho e respeito : ()
Não cria e nem lista pq geralmente esses sistemas de cardápios tem um painel de controle só pra configurar o cardápio, como: Atualizar o item, excluir, mudar imagem e etc...
Ja fica o desafio ai... criar um painel de controle só pra administrar o cardápio
Gostaria de propor uma ideia de vídeo: Como subir esse projeto pra um servidor. Tô com muita dificuldade nisso kkkkkkkkk
Você conseguiu?
Pesquisa uns vídeos sobre o hostinger, é bem simples!
Sensacional!
Primeiro eu assisti os vídeos prestando atenção.. depois os revi fazendo junto!
São incríveis os conteúdos que você sempre disponibiliza, sou fã!
Sem palavras pra agradecer! Muito obrigada!
Parabéns pelos vídeos, está me ajudando muito, mas vou deixar uma dica construtiva: Tente deixar essa bola com sua imagem, um pouco menor(metade do que está) e no canto superior direito, por muitas vezes ficou na frente do código, e quando vc estiver codando, o foco principal é o código e sua voz.
Fernanda muito bom esses 2 videos, mas uma dica poderia dividir em partes o video, pois a parte mais facil é fazer a tela no Front, eu mesmo vim aqui só pra ver a parte da integração (pra usar o front junto com o back) e a criação do backend onde eu estava com muita dificuldade
Ótimo vídeo! Gostaria de saber se você ainda vai postar mais aulas referente a esse projeto em relação ao Delete e Update
Bora fazer
@kipperdev , eu amei desenvolver este projeto contigo... aproveitei e implementei os metudos de updade e delete. Ficou muito top... muito obrigada...
Que bomm, Cicera 💜
Fico muito feliz que tenha gostado.
Boaa, parabéns!
@kipperdev Não sei nem como agradecer, a maneira como vc explica o conteúdo é única e isso que vc esta fazendo não vi em vários cursos, primeiro vc nos ensinou a fazer um api , agora como conectar, postei essa dúvida em um curso pago de como conectar com a api que fizemos por lá , e obtive uma resposta vaga como: "esse modulo é de backend vejá na aula de front", porem vc separou em duas aulas o back e o front
muito lindo isso, parabéns pelo conteúdo!!
Nossa muito obrigado, Fernando 💜
De verdade, eu fico muito feliz lendo esse tipo de comentário e fico mais feliz ainda de saber que o conteúdo tem te ajudado.
Um grande abraço
Eu vejo esse tipo de vídeo e acho incrível, sou dev backend eu já tentei inventar de ir pra parte do front mas nunca me dei bem.
Admiro muito pessoas como você, moça que tem essa garra, obrigado pelo conteúdo.
Agradeço demais a Fernanda Kipper pelos vídeos. Nesse mês de Janeiro, consegui estudar por meio desse vídeo e da parte 1, sobre como desenvolver a aplicação back e front end com sucesso!
Gostaria de compartilhar meu github, pois aproveitei o gancho dos estudos e adicionei os endpoints PUT e DELETE e adicionei algumas tratativas para retorno de mensagens toast para o cliente, assim que houver uma ação realizada 200 ou erros em geral.
github.com/YanBFalcao/JAVA-API-REST-Cardapio/tree/main
Fica disponível então o link para a galera que quiser estudar junto comigo e com referência nos vídeos da Fernanda \o/
Muito obrigado pelo conteúdo de super qualidade Fernanda
Conteúdo muito bom, gostaria de saber onde pego os material para criar a tabela no postgres, você não mostra. agradeço se puder me ajudar.
Se estiver dando erro em :
queryClient.invalidateQueries(['food-data'])
eu usei :
queryClient.invalidateQueries({queryKey: ['food-data']})
vlw, ajudou aqui
Vlw mano
você foi luzzzzzz
Obrigada!!
Jesus 2
Parabéns, Fernanda, pelo projeto incrível.
@kipperdev Feeeer da uma ajuda... Primeiramente parabéns pelo seus ótimos vídeos com didáticas sempre atuais e bem explicadas. Então estudando e aprendendo com seus vídeos e estou criando um projeto com base no seu
Porém nesse que estou fazendo utilizei uma Table nativa do HTML, só que quando passa pelo Card componente ele cria uma nova tabela para cada informação vinda do banco
Como faz pra resolver isso
Precisa usar alguma table específica pra isso não acontecer? Ou tem como ajustar essa padrão?
Basicamente pra entender oq fiz
Onde vc passa os dados da imagem nome e preço eu usei uma Table e passo por ela na tag td só que o header da Table também réplica para cada informação trazida do banco
Excelente conteúdo!! Se puder adicionar testes, vai ser muito bom!!
Obrigadaa! Simm, posso fazer outro vídeo adicionando testes nesse projeto. Mas já tem vídeo de testes unitários aqui no canal, caso queira dar uma olhada :)
ua-cam.com/video/p1bjHvX-DqM/v-deo.html
Muito bom. Deu pra fazer o básico que eu precisava pro meu projeto ter um front mínimo. Ótimos vídeos. Parabéns!
Obrigada Anderson! Fico feliz que o video te ajudou 💜
Muito Bom! Queremos conteúdo de CSS sim
Deu bug ao utilizar o comando "npm install tanstack-query/react-query", olhei na documentação TanStack Query e adicionei o comando "npm i react-query" e deu certo
Tive o mesmo problema e tbm resolveu
O comando correto é " npm i @tanstack/react-query" no vídeo posso ter falado errado, desculpe! Mas quando você instala pelo comando "npm i react-query" acaba instalando a versão antiga que é a v3
@JulioCesar-fw5qj Que bom que vim olhar os comentários. Acabei pegando a dica sobre o comando certo que a Fer passou e consegui instalar por meio do "npm i @tanstack/reack-query"
Para quem tiver erro do isLoading, na doc trocaram para "isPending" , e o meu unico problema do projeto até aqui foi envolvendo o css que nao ficou legal mesmo copiando talvez por eu usar edge não ficou legal. fora isso o projeto esta funcional
Aproveita pra você fazer o SEU projeto, a sua estilização, a melhor forma de realmente aprender, é você ter uma ideia de como fazer e se desafiar, fazer outros projetos se baseando nesse, quanto mais você fizer, mais aprende!
Eu te amo sério, perfeita sem defeitos.
Tenho uma noção de html css e javascript, quais as vantagens de se criar uma página usando javastring e react do que usando a forma mais comum citada antes da pra dar uma explicada redumida? A no caso da responsavidade vc trabalhou ela também? Sucesso pra vc sempre.
Todas. kkk Zuera. A vantagem você começa a perceber quando vc começa a ter uma aplicação que vai crescendo muito, e fica cada vez mais difícil dar manutenção. Os conceitos de componentes do react ajudam bastante nesse sentido, onde vc consegue criar aplicações com módulos (partes, funções, componentes, etc) com escopos separados, e vai conseguir reutilizar esses módulos em vários lugares da sua aplicação (sem precisar repetir código). Sem falar que, aplicações que possuem muita interação do usuário na tela, se tornam cada vez mais complexas. O react ajuda muito nesse sentido, pq o objetivo dele ao ser criado pelo Facebook foi justamente esse, conseguir implementar layouts de interfaces complexos, com alto nível de interação dos usuários, sem precisar ter um código tão difícil de implementar e manter. Acrescentando um bonus, ao falar especificamente do react, ainda temos ganhos em produtividade. O react puro, e principalmente com a utilização de outras ferramentas (frameworks), como o Next.js, tornam o desenvolvimento bem mais produtivo, onde muitas atividades, como autenticação e navegação entre páginas são bem mais fáceis de se implementar e manter, do que uma aplicação estática (com html, css e javascript puro), e podem trazer outros ganhos, como uma performance incomparável. Em resumo: utilizar uma lib/framework como o react praticamente tem todas as vantagens possíveis, e as principais são produtividade, escalabilidade e performance.
@@marcospauloamorim8313 vlw 🙂✌️
Poderia rolar um video de : Como colocar esse DB local para um deploy na nuvem.
sua didática é excelente
Obrigadaa Davi, fico feliz que tenha gostado 💜
Oi Fernanda. Quais as extensões vc usa quando está programando em reactjs?
Muito, muito, muito obrigado!
Excelente conteúdo Fernanda, muito obrigado por compartilhar seus conhecimentos.🚀🚀🚀
Valeuuu, que bom que gostou! :)
Fernanda, você é sensacional!
Concluído com sucesso! kkk...ótimo curso principalmente para quem está começando, só a sua imagem que ficou um pouco grande em alguns momentos atrapalha vê o conteúdo, mas do resto está ótimo.
Obrigada William! Simm, nos próximos vídeos ja tenho corrigido isso, realmente a webcam ficava em cima de algumas coisas ali no cantinho, obrigada! 😊
Certo, vc mostrou fazendo, quais os requisitos que eu tenho que ter pra poder ver e entender essa video-aula?
Olá bom dia. Antes de mais nada, parabéns pela sua iniciativa. Minhas imagem não estão carregando. Tem alguma dica do que pode ser?
também não estava conseguindo, resolvi abrindo a imagem em outra aba após pesquisar no google ,após isso só é clicar botão direito na imagem e "copiar link da imagem "
Bom dia mestra, poderia me orientar por favor, vi q tem muitas formas de se criar, queria saber a diferença entre o que esta na doc oficial, que são três forma para se criar um projeto e porque vc usa essa ferramenta?
excelente video Fernanda! mas não acha melhor repensar o tamanho e o posicionamento da sua FaceCam?
Oii, Caio!
Muito obrigadaa 💜
hahaha eu alterei isso já, antes estava muito grande mesmo
Fala Fernanda, vi que você utilizou bastante CSS criado por você. É de bom tom usar um biblioteca CSS para modelar isso? Tipo bootstrap ou coisa do tipo? Gostei da tua abordagem do vídeo e como implemento explicado! TMJ! 👊
Oii Bruno, então, depende muito da empresa que você vai trabalhar. Algumas empresas, possuem o design da marca bem definido, vários componentes sendo reutilizados em vários produtos da empresa e sempre seguindo o mesmo padrão etc, então normalmente surge a necessidade para a empresa criar sua própria lib de componentes seguindo o design system da marca e aí o time que cria isso normalmente faz todos os componentes com alguma lib que permita escrever o CSS para ter liberdade de criar exatamente como o Figma como SCSS, Styled Components, Tailwind etc ou até CSS puro. Já em outras empresas você pode não encontrar um design bem definido, normalmente startups, e aí os devs ficam responsáveis de muitas decisões de design, e então nessas horas acho legal usar um Bootstrap, Material UI, Chakra UI etc
E também tem empresas em que existe o design certinho para o produto porém esse design só cabe para aquele produto, normalmente para empresas menores ou que estão testando um novo produto diferente dos demais, aí o time acaba decidindo o que fica melhor para eles mesmos afinal só eles irão utilizar.
Mas resumo da ópera hahahaha acho legal saber fazer as coisas com CSS puro por que pode ter empresas que você irá precisar, mas também acho bom conhecer essas ferramentas que facilitam a criação de componentes estilizados principalmente para projetos que precisam ser feitos rapidamente 😊
Opa tem algum conteúdo de Docker no canal?
Queria implementar esse projeto usando o Docker.
Seus vídeos são muito topp, nmrl.
Boa tarde. No projeto no github não tem a parte do create modal, poderia por favor atualizar o repositório? Muito bom o conteudo. Ganhou um inscrito.
Fernanda excelente video, uma duvida caso eu queria colocar o R$, vai ter algum problema?
Faz um com Angular ? é mesmo principio?
parabens pelo conteúdo, uma dúvida, no video 1 vc utiliza o intelij (back) e agora o vs (front) é uma convenção, porque não usar um dos dois nas duas fases, ou não tem jeito? sendo mais específico, intelij é mais indicado para back e vs para front? podia mostrar como fazer o deploy obrigado
Olá, tudo bem? espero que sim, então, não é questão de convenção ou coisa do tipo, é que para alguns o intellij é uma excelente ferramenta quando se trata do java em si....tem uma interface mais amigavel e por ai vai, no entanto ela em sua versão CE não oferece um suporte decente para html, js, ts e outras coisas voltadas para web, já que eles tem um versão chamada webStorm que é paga e voltada justamente para desenvolvimento do front...então o que fazemos é correr para o VS Code já que além de gratuito ele possui uma vasta gama de extensões que podem ser instaladas para melhorar a sua codificação.
Boa Tarde Fêr, tudo bem.
estou com um pequeno problema: em meus inputs, as label estão com erro, e no caso meu modal abre, mas não consigo digitar nada.
Segue o erro:
Type '{ label: string; value: number; updateValue: Dispatch; }' is not assignable to type 'DetailedHTMLProps'.
Property 'label' does not exist on type 'DetailedHTMLProps'.
será que consegue me ajudar?
Uma dúvida: com esse Curso eu estarei preparado para entrar no mercado da Programação, ou tem mais coisas?
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
MUCHAS GRACIAS!🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹 Me ayudaste mucho, tarea hecha👋 jaja
Gracias!! 💜
Ótima aula!!!
O meu código esta igualzinho ao dela, porém ele não retorna a image, title e price na tela, nao tenho experiencia com front-end apenas back, sera que alguem poderia me ajudar? No console aparece dois erros:
The message port was closed before a response was received
e o outro erro é:
um problema no endpoint /food porta 8080 seguido da mensagem: net::ERR_SSL_PROTOCOL_ERROR
Ótimo contéudo!
O atalho !ef não está aparecendo para mim..... poderia me ajudar a digitar menos? Obrigado.
Oii Glauco, para você conseguir usar esse atalho precisa instalar a extensão do VS Code chamada "React Dev Snippets" -> marketplace.visualstudio.com/items?itemName=FernandaKipper.reactcodesnippets
@@kipperdev muito obrigado.
@@kipperdev Obrigado! Estava nessa questão também kkk Aproveitei o comentário do @glaucolrc
Olá Fernanda, a gostar bastante deste tutorial de fullstack! Descobri hoje o canal e fiquei fã dos vídeos :) Queria perguntar se por acaso vai fazer algum vídeo sobre como dar deploy da aplicação para a cloud, abraço de PT
Oii Dan, muito obrigada!! Fico feliz que gostou :)
Claro, vou trazer conteúdo sobre deploy simm
@@kipperdev Incrível! :) Muito obrigado, preciso de melhorar as minhas práticas de Kubernetes, Docker, Terraform e Azure além da parte de fullstack, uma coisa de cada vez, mas tenho aprendido bastante com você! Esperando por novas coisas agora (Angular tem sido divertido tb)
Oi Fernanda obrigado pelo conteúdo, estou com o seguinte erro, no meu projeto fiz exatamente igual ao seu porém as imagens não são renderizadas, baixei o seu projeto no Github mas ocorreu o mesmo, o que vc acha q poderia ser?
tem q usar isso tudo so pra fazer um carrnho de compras ?nao tem algo mais facil no mercado nao ?
Olá !!! TUdo joia ? Parabéns pelo video !!!
No caso do preço, ele não deveria ser ponto flutuante ? Tipo 100.50$ ?
Oii muito obrigadaa 💜
Você diz na Interface FoodData? Quando usamos o "number" no JS ele já é considerado um float ou um integer, mudando de acordo com o necessário!
Se estiver dando erro no isLoading só troque por isPending
Qual extensão faz o comando !ef pra criar a interface
É uma extensão que eu criei, se chama React Dev Snippets, vou colocar o link aqui para você baixar!
marketplace.visualstudio.com/items?itemName=FernandaKipper.reactcodesnippets
Meu react-query está com versão diferente. Acho que mudou a forma de usar o invalidateQueries passando o queryKey e ele também não tem o isLoading. Alterei pra versão que a Fê usou, e deu certo. Vou descobrir como usar na versão mais nova do tanstack.
Oii Anderson, pois é! Acho que realmente a bilioteca teve uma atualização e ai mudou a forma de invalidar as queries... vou deixar o link aqui da documentação atualizada para ajudar :)
tanstack.com/query/latest/docs/react/guides/query-invalidation
ótimo vídeo
Queria mesmo era saber qual extensao do vscode ta usando pra completar aos 6:41 kkkk
React snippets
@@joaovictorgadelha8116 vaaaleu manoooo
I eu achando que programar font-end era só HTML, CSS e JS, kkkk to ferrado
Tava indo tudo muito bem, até eu ter um problema com o Cors, consigo consultar a API no navegador, no Postman, mas através do novo app não consigo. 😪 Tentei usar plugin, implementar várias coisas e não deu.
Queria saber como tu conseguiu resolver isso!!!
Eu tive a mesma situação, e consegui resolver colocando a anotação de CORS antes do FoodController
tive o mesmo problema, resolvi usando configurações no properties, no meu caso to usanso application.yml
```web:
cors:
allowed-origins: "*"
allowed-methods: GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD
max-age: 3600
allowed-headers: "Requestor-Type"
exposed-headers: "X-Get-Header"```
@@karinejohanns4625me ajudou denovo, vlw
Assim até que os Vídeos foram Ótimos, explicou certinho com uma didática excelente, mas poxa não criou uma função para atualizar as comidas ou apagar os itens já adicionados, acho que assim em uma aplicação se a pessoa sem querer clicar em "novo" ela não tem outra escolha a não ser adicionar o item, não tem nem como sair da tela de Cadastro, Não entendo bem, mas tipo não seria melhor juntar as 2 aplicações porque basicamente você tem que rodar 2 servidores locais para poder acessar um site.
Sinto como se eu tivesse perdido alguma aula
diva!!!!
💜💜
tô quebrando a cabeça pra tranformar imagem em svr
to com problema no arquivo card.tsx na function Card em suas propriedades
o erro e justamente das propriedades colocadas na interface CardProps = "All destructured elements are unused"
Nossa, muito obrigado!!
incrível!!!!! obrigado
valeuuu Alberto! 😊
Se estiver dando erro no CORS tem que usar @CrossOrigin(origins = "*", allowedHeaders = "*") em cima de todos os @PostMapping e @GetMapping no backend
Alguém mais teve problema com o CORS? Tentei resolver de várias formas e não deu certo :/
Apesar de ser avançado para mim, estava curtindo o vídeo, PARABÉNS.
Só fui até 19:30min, deu erro aqui:
Uncaught ReferenceError: QueryClient is not defined at main.tsx:7:21
Na lista de importação só tem useQueryClient ou useQuery, não tem QueryClient!
para mim resolveu essa situação quando alterei o diretório em que estava buscando o QueryClient para import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
conseguiu resolver? tô com o mesmo problema :(
@@karinejohanns4625aqui resolveu, valeu
Gente.... sei nem o que estou fazendo aqui. Eu só sei o básico de HTML, CSS e JS. O suficiente para mesclar com os meus serviços de Java KKKKKKK Acho que aqui está avançado demais para mim.
Único problema que tive foi com o isLoading, que não é reconhecido.
Que estranho, Andrey. Conseguiu ajustar? Se não, manda aqui!
@@kipperdev Achei, trocaram para "isPending"
Guria ponta firme.... rsrs
não consegui :´(
não carrega os dados que insiro no banco
conseguiu?
0:02
Muito bom vídeo, más seu rosto estava muito grande e na frente do código.
35:18 "cagado/"
hahahahha
KKKKKKKKKKKKKKKK
A menina chega ta com olheira kk , parecendo um soldado do exercito que ficou 1 mes no mato sendo torturado kkkk chega da medo as vezes dessa parada de programacao kkkkkkkkk brincadeira ta FernanadaKipper...
a pessoa fica parecendo uma psicopata kkkkkkkkkkkkkkk
conhecimento 10, didatica 0...
não entendi nada, muito jargões
aprendi nada
Provavelmente o Tanstack Query deve ter atualizado, pois não permite colocar string no parametro da queryClient.invalidateQueries resolvi colocando a mesma versão usada pela Fernanda no meu package.json:
"@tanstack/react-query": "^4.26.0"
Parabéns pelos vídeos, está me ajudando muito, mas vou deixar uma dica construtiva: Tente deixar essa bola com sua imagem, um pouco menor(metade do que está) e no canto superior direito, por muitas vezes ficou na frente do código, e quando vc estiver codando, o foco principal é o código e sua voz.