internationalizing a react application with polyglot

I18N W2H R3T

Internationalization With React

Jonathan Petitcolas ­ www.jonathan­petitcolas.comAPI Hours ­ Clermont Ferrand, France ­ 2017/03/27

Jonathan Petitcolas

marmelab developer

Agility FTW!

Exciting technologies: Node, React, Go, etc.

Free for charity!

More details on: @marmelab / www.marmelab.com

Jonathan Petitcolas

Open­Source Contributor

admin­on­rest: marmelab/admin­on­rest

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"

ARTE+7

5 different languages

Symfony3 for server, React for client

Server­side uses Twig trans filter (isomorphic is coming)

Client­side uses Airbnb Polyglot

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 écranconsole.log(polyglot.t('fullscreen');

// 42 vuesconsole.log(polyglot.t('views', smart_count: 42 ));

What About a Real World App?

Cascading props? So boring...

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

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

Source: @dan_abramov

Using Context via a ProviderDeclare getChildContext method,

Define childContextTypes ,

Render component children.

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 acomponent and returns a new component.

const EnhancedComponent = hoc(Component);

Using recompose Recompose is a React utility belt for function components andhigher­order components. Think of it like lodash for React.

Source: recompose repository

Any Questions?

Thanks!GitHub repository: jpetitcolas/react­i18n­sample

Blog post (soon): How­to implement Polyglot on a React App?

Further questions: @Sethpolma