Build Real App with React #11: Internationalisation with React-Intl



In this episode we’ll setup React-Intl package and use it to implement internationalisation of our application.

**Support my work**:

– Become a Patron: http://www.patreon.com/remzolotykh
– Make a one-time contribution on PayPal: http://www.paypal.me/remzolotykh/5usd
– Sign up to my newsletter to get FREE chapter of my course: https://jsfullstacker.com

**Links**:

– Trello Board: https://trello.com/b/KeQ9iysY/dd-adventure-league-app
– alhub-react repo: https://github.com/Remchi/alhub-react
– alhub-api repo: https://github.com/Remchi/alhub-api

Related Posts
Create React App Netlify Tutorial 2018

This is just a quick and dirty Netlify tutorial that shows how to start a project wiith Create React App Read more

Build an Image Carousel with React in 5 Minutes (incl. Gesture Support, Hooks)

? Build Amazing React Apps @ Code Artistry ►► https://codeartistry.io ? Become a Web & Mobile Master: The Complete Subscriber Read more

Let's Build a React Native App: React Navigation

I'm building a React Native application and I'm taking you along for the ride! I'll be vlogging my experience of Read more

Easy Redux Tutorial: Adding Redux to a Simple React App

Starting with a simple "counter" app that uses React state, this video walks through the process of adding Redux and Read more

30 thoughts on “Build Real App with React #11: Internationalisation with React-Intl”

  1. okay but its not dynamic in real world clients need to click on component and change it dynamically at runtime you know how to ?

    Reply
  2. One more thing, what is the best way to get the right data from the back-end based on the locale I'm in? do I attach the locale to every single API request I make or what? If you could direct me to the right place where I can learn that it would be great, and if you could make another tutorial about that it will be even more awesome 😀

    Reply
  3. Dude, I've been searching for "How to do internationalization in react" for quite some time now, and I came across your video by accident, and let me tell you, your tutorial is simply awesome. It's exactly what I've been looking for. Great stuff, man. Great Stuff.

    Reply
  4. am getting errors over here
    import en from "react-intl/locale-data/en";
    import es from "react-intl/locale-data/es";
    import fr from "react-intl/locale-data/fr";

    Reply
  5. I want to add the locale to the URL so that I can share the link to my friend over IM in a particular language. How to achive that?

    Reply
  6. Hey Rem could you clear one confusion of mine? Using react intl we are translating our app into another locale but what about the data coming from APIs. How do we translate them? or they come translated from backend

    Reply
  7. Hello Rem! Grate tutorial! But I faced the problem with FormattedMessages in list rendering. For example how to translate nav items if they are stored as object array? In common react we use array.map method but when we use FormattedMessage we can specify only array ID but not array item… how to sole this problem? This is my question on stackoverflow. https://stackoverflow.com/questions/52745263/how-to-render-a-list-of-formatted-messages-using-react-intl Can you quick look?

    Reply
  8. This is the best dev course video I have ever seen and I have followed through every episode. Thank you very much.
    I'm a little curious, what tool do you use to draw those mockups? It looks cool.

    Reply
  9. Thank you so much for this video! I was having troubles using React-Intl and it helped me to solve them!

    Reply
  10. Nice tutorial! I'd recommend using separate files for each language. Placing all messages in 1 file makes translations hard if you have more to translate.
    There's also babel-plugin-react-intl which helps you to extract messages from your source code and create template files for the translations. Finally there's BabelEdit  https://www.codeandweb.com/babeledit – a (currently) free editor to work with translation files for react-intl.

    Reply
  11. Hey Rem, its really easy to follow your coding and how well you explain things! I tried using the formatted message in the new character page but the new language only applies after a page reload whereas the formatted messages in the navigation translate without reloading.

    Reply
  12. I did the same on the react-bookworm and the swicher does not work. In addition, I changed the components to state, but it also did not help. Where's the problem? Redux works. The view does not rerender. no errors

    Reply
  13. Rem , почему при смене языка в redux сторе article стейт опустошает ?
    например. Есть список артиклов и язык анлийский. Когда нажимаю на русский , весь этот массив артиклов опустошает

    Reply
  14. I like this series because it teaches me how to take the easy ways for solving problems. Keep the good work.

    Reply

Leave a Comment