This document discusses internationalization (i18n) with React. It provides examples of translating text, dates, currencies, and numbers for different languages. It also describes using the Polyglot.js library to implement i18n in a React app, including passing locale data and translated phrases to a Polyglot instance to display translated text. Finally, it mentions a sample React app that implements i18n on a client site using Context API and a server-side Symfony app that supports multiple languages.

1. I18N W2H R3T
Internationalization With React
Jonathan Petitcolas ­ www.jonathan­petitcolas.com
API Hours ­ Clermont Ferrand, France ­ 2017/03/27

2. Jonathan Petitcolas
marmelab developer
Agility FTW!
Exciting technologies: Node, React, Go, etc.
Free for charity!
More details on: @marmelab / www.marmelab.com

3. Jonathan Petitcolas
Open­Source Contributor
admin­on­rest: marmelab/admin­on­rest

4. 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"

5. ARTE+7

6. 5 different languages
Symfony3 for server, React for client
Server­side uses Twig trans filter (isomorphic is coming)
Client­side uses Airbnb Polyglot

7. Using Polyglot.js
import Polyglot from 'node­polyglot';
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 écran
console.log(polyglot.t('fullscreen');
// 42 vues
console.log(polyglot.t('views', { smart_count: 42 }));

8. What About a Real World App?

9. Cascading props? So boring...

10. Context to the Rescue!
In some cases, you want to pass data through the component
tree without having to pass the props down manually at every
level. You can do this directly in React with the powerful
"context" API.
Source: React official docs

11. Context is Experimental!
If you want your application to be stable, don't use context. It
is an experimental API and it is likely to break in future
releases of React.
Source: React (same) official docs

12. Source: @dan_abramov

13. Using Context via a Provider
Declare getChildContext method,
Define childContextTypes ,
Render component children.

14. I Promised Dan to Write an HOC...
But I don't even know what it is!
A higher­order component (HOC) is a function that takes a
component and returns a new component.
const EnhancedComponent = hoc(Component);

15. Using recompose
Recompose is a React utility belt for function components and
higher­order components. Think of it like lodash for React.
Source: recompose repository

16. Any Questions?

17. Thanks!
GitHub repository: jpetitcolas/react­i18n­sample
Blog post (soon): How­to implement Polyglot on a React App?
Further questions: @Sethpolma