![Page 1: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/1.jpg)
I18N W2H R3T
Internationalization With React
Jonathan Petitcolas www.jonathanpetitcolas.comAPI Hours Clermont Ferrand, France 2017/03/27
![Page 2: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/2.jpg)
Jonathan Petitcolas
marmelab developer
Agility FTW!
Exciting technologies: Node, React, Go, etc.
Free for charity!
More details on: @marmelab / www.marmelab.com
![Page 3: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/3.jpg)
Jonathan Petitcolas
OpenSource Contributor
adminonrest: marmelab/adminonrest
![Page 4: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/4.jpg)
What Is Internationalization?
Translating sentences using dictionnary
"Hello world!" FR> "Bonjour le monde !"
Translating date and currencies format
"$199 on 2016/30/10" FR> "199 € le 30/10/2016"
Translating numbers
"14,910.45 units" FR> "14 910,45 unités"
![Page 6: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/6.jpg)
5 different languages
Symfony3 for server, React for client
Serverside uses Twig trans filter (isomorphic is coming)
Clientside uses Airbnb Polyglot
![Page 7: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/7.jpg)
Using Polyglot.js
import Polyglot from 'nodepolyglot';
const locale = 'fr';const phrases = fullscreen: 'Voir en plein écran', views: '%smart_count vue |||| %smart_count vues',;
const polyglot = new Polyglot( locale, phrases );
// Voir en plein écranconsole.log(polyglot.t('fullscreen');
// 42 vuesconsole.log(polyglot.t('views', smart_count: 42 ));
![Page 8: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/8.jpg)
What About a Real World App?
![Page 9: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/9.jpg)
Cascading props? So boring...
![Page 10: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/10.jpg)
Context to the Rescue!In some cases, you want to pass data through the componenttree without having to pass the props down manually at everylevel. You can do this directly in React with the powerful"context" API.
Source: React official docs
![Page 11: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/11.jpg)
Context is Experimental!If you want your application to be stable, don't use context. Itis an experimental API and it is likely to break in futurereleases of React.
Source: React (same) official docs
![Page 13: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/13.jpg)
Using Context via a ProviderDeclare getChildContext method,
Define childContextTypes ,
Render component children.
![Page 14: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/14.jpg)
I Promised Dan to Write an HOC...But I don't even know what it is!
A higherorder component (HOC) is a function that takes acomponent and returns a new component.
const EnhancedComponent = hoc(Component);
![Page 15: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/15.jpg)
Using recompose Recompose is a React utility belt for function components andhigherorder components. Think of it like lodash for React.
Source: recompose repository
![Page 16: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/16.jpg)
Any Questions?
![Page 17: Internationalizing a React Application with Polyglot](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9ad33760da3da068b95d8/html5/thumbnails/17.jpg)
Thanks!GitHub repository: jpetitcolas/reacti18nsample
Blog post (soon): Howto implement Polyglot on a React App?
Further questions: @Sethpolma