[BR][Front-End] React - Aplicações multi idiomas
HTML-код
- Опубликовано: 5 окт 2024
- Neste vídeo mostro como tornar uma aplicação React em multi idiomas, dessa maneira podemos atingir público brasileiro, americano, espanhol, etc... Para o desenvolvimento do vídeo é utilizado a biblioteca 18next.
Projetos:
github.com/mah...
Redes Sociais:
Blog: blog.matheuscas...
Site Pessoal: www.matheuscast...
Facebook: / matheus.castiglioni.5
Github: github.com/mah...
Instagram: / mahenrique94
Linkedin: / matheus-castiglioni-7a...
Medium: / mahenrique94
Twitch: / mahenrique94
Twitter: / mahenrique94
Referências
A.R Efeitos Sonoros: / @arefeitossonoros
Freepik: www.freepik.com/
GreenScreen: / @greenscreenbrasil
GreenScreen Nation: / channel
Velosofy: www.velosofy.c...
![[BR][Front-End] JavaScript - Criando o meu Redux](http://i.ytimg.com/vi/A-k_aw-tLXI/mqdefault.jpg)
![[BR][Front-End] JavaScript - Criando o meu Redux](/img/tr.png)
![[BR][Front-End] React - Aplicações real time com Socket.io](http://i.ytimg.com/vi/n0XTxlp68wc/mqdefault.jpg)
21:20 ele explica o que foi feito.
Direto e reto. Melhor impossível. Internacionalização até então eu nunca tinha feito e com esse vídeo implementei o espanhol na aplicação do meu cliente em pouco mais de 15 minutos. Muito obrigado por compartilhar conhecimento!
Obrigado Fabiano, o único detalhe desse vídeo é hoje em dia da pra atualizar os textos sem atualizar a página
@@MatheusCastiglioni Saquei. Como teste de implementação eu deixei com reload mesmo, mas vou pesquisar a respeito da troca de idioma sem reload.
@@MatheusCastiglioni Olha aí, funcionando (com o reload ainda): ruclips.net/video/uB0mkE9FuwU/видео.html
@@FabianoRamosInfo Muito bom
Perfeita a explicação! Obrigada
Obrigado
Muito obrigado. Vídeo perfeito.
Obrigado Edi
Vídeo perfeito!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Obrigado Thiago
Vídeo perfeito! Você tem algum vídeo similar a tradução, mas falando de formatação de máscara, moeda,..., Formatações que é particular de cada país. Entendeu?
Infelizmente sobre formatação eu ainda não gravei nada, está ai uma boa ideia
Show de bolaaaa
Obrigado Edson
Muito top parabéns.
Obrigado Nelson
Melhor impossível!
Obrigado José
Bacana, muito bom.
Apenas o áudio está bem baixo
Obrigado Jefferson, troquei de microfone, ainda estou achando a melhor config dele.
SENSACIONAL !!!!!
Obrigado Matheus
Muito boa explicação, mas acho que devia ter uma outra solução melhor para atualizar o componente app, o react não foi feito pra da reload, não tenho 100% de ctz mas se chamar o componente app ali funcionaria, acho
Obrigado Anderson, então, eu prefiro dar o reload, dado que a mudança será propagada para o sistema como um todo, mudando a identidade visual dele. Se você quiser fazer sem o reload dá uma olhada na lib react-i18next e nas funções: withTranslation e initReactI18next, provavelmente é o que você precisa.
Conteúdo show 🔥
Obrigado Lucas
Show, Valeu!
Magina, eh nois
Matheus, obrigado pelo conteúdo desde já. Me surgiu uma dúvida. No meu caso apareceu esse erro> 'TypeError: Cannot read properties of undefined (reading 't'). Eu preciso criar uma váriavel t e passar o i18 ? Obrigado!!
Fala Gabrie, depende mano, precisa ver como você exportou o `i18n` no arquivo de configuração e tradução e como está importando e fazendo o uso dele nos componentes.
Sei que faz tempo que postou, mas adorei o tema do vscode kkkk sabe me dizer qual é?
Viiish, pior que não vou lembrar viu Matheus, sipa acredito que seja o Palenight
valeu mesmo a ajuda !!!
magina Erika
Muito bom!!
Valeu Paulo
Ótimo vídeo.
Obrigado Paulo
Parabéns pelo vídeo.... Me deparei com um impasse. Meu projeto esta segregado por components. E eu coloquei o conteúdo do no component Home.jsx. Logo o que esta nesse component sofreu alteração da linguagem, mas os outros não muda.... como devo corrigir ou incrementar? Muito obrigado
Fala Jtomio, como assim? Quando você está trocando o idioma alguns componentes estão recebendo as novas mensagens e outros não?
top demais, cara deixa eu te perguntar. existe algo para traduzir uma resposta do backend?
Fala Guilherme, depende: Se tu precisa pegar um dado do back-end e internacionalizar, seria bom trabalhar com códigos e chaves em vez da mensagem em si. Agora se tu precisa que seu back-end responda erros ou coisas assim em multi idiomas, da para utilizar a i18next com Node também.
Oi Matheus!
Nesse window.location, quando chamado ele altera a URL pra por exemplo app/pt-br ou a URL continua a mesma depois da chamada no select?
Fala Rafael, ele vai manter a mesma URL, mas, se tu quiser é possível trocar sim.
Tem como fazer isso seguindo o conceito de uma SPA? Mudar o idoma sem recarregar a página.
Tem como sim man, existe uma função chamada changeLanguage onde você passa o novo idioma para a i18n, algo assim: i18n.changeLanguage("en").
Talvez seja necessário mudar como as traduções são usadas, em vez de importar direto a i18next precise utilizar o hook useTranslation ou o hoc withTranslation.
E como eu faço quando os dados vem da api e são dinâmicos?
Fala Joyce, depende, se eles vieram do banco de dados ai é bem mais complicado e como é um valor salvo e informado pelas pessoas que utilizam a plataforma, não acho que faça sentido traduzir os mesmos não.