O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Internationalizing a React Application with Polyglot

745 visualizações

Publicada em

How to handle internationalization of a React application on a real world application using Polyglot? The answer, using Context and Provider.

Publicada em: Engenharia
  • Seja o primeiro a comentar

Internationalizing a React Application with Polyglot

  1. 1. I18N W2H R3T Internationalization With React Jonathan Petitcolas ­ www.jonathan­petitcolas.com API Hours ­ Clermont Ferrand, France ­ 2017/03/27
  2. 2. Jonathan Petitcolas marmelab developer Agility FTW! Exciting technologies: Node, React, Go, etc. Free for charity! More details on: @marmelab / www.marmelab.com
  3. 3. Jonathan Petitcolas Open­Source Contributor admin­on­rest: marmelab/admin­on­rest
  4. 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. 5. ARTE+7
  6. 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. 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. 8. What About a Real World App?
  9. 9. Cascading props? So boring...
  10. 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. 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. 12. Source: @dan_abramov
  13. 13. Using Context via a Provider Declare  getChildContext  method, Define  childContextTypes , Render component children.
  14. 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. 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. 16. Any Questions?
  17. 17. Thanks! GitHub repository: jpetitcolas/react­i18n­sample Blog post (soon): How­to implement Polyglot on a React App? Further questions: @Sethpolma