Una breve introducción a internacionalización y como implementarlo en una aplicación de React.

1. en React
internacionalización
Richard Kaufman (aliada.mx)
@sparragus

2. ejercicios

3. ¿cuánto cuesta?

7. ¿cuándo hay que
entregar el trabajo?

8. 02/01/2018
a) 2 de enero de 2018
b) 1 de febrero de 2018

9. 02/01/2018
a) 2 de enero de 2018
Asia (Central, SE, West), Australia (25), New Zealand (5), parts of
Europe (c. 640), Latin America (625), North Africa (195), India (1315),
Indonesia (265), Bangladesh (165), Russia (145)
b) 1 de febrero de 2018
United States (325), Federated States of Micronesia, Marshall Islands

10. ¿a qué hora es la
llamada con el cliente?

11. 5:30 pm

12. 5:30 pm
¿de Ciudad de México?
¿de Tijuana?
¿de Nueva York?
¿de São Paulo?

13. 5:30 pm (UTC -6)
¡de Ciudad de México!

14. 5:30 pm (UTC -6)
¡de Ciudad de México! (la mitad del año)

15. internacionalización

16. i18n

17. localización

18. l10n

19. internacionalización
localización

20. i18n no solo se trata de
adaptar a otros
lenguajes. también es
sobre manejar cambios
regionales.

21. value=90014.20
currency=‘USD’
locale=
a) México
b) Costa Rica
c) Chile
→ US$90,014.20
→ US$90 014,20
→ US$90.014,20

22. muchas veces también
se trata sobre manejar
particularidades de cada
lenguaje.

27. herramientas para
internacionalizar apps
hechas en React

28. global.Intl
Format.js
(low level)
(menos low level)

29. react-intl
react-i18next

30. react-intl
react-i18next

31. ¿cómo funciona
react-intl?

32. import {
IntlProvider,
FormattedMessage,
FormattedNumber,
FormatterDate,
} from ‘react-intl’

33. const locale = ‘es-MX’
ReactDOM.render(
<IntlProvider
locale={locale}
messages={translations[locale]}
defaultLocale={‘es-MX’}
>
<App/>
</IntlProvider>,
document.getElementById(‘app')
)

34. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

35. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

36. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

37. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

38. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

39. user.firstName = ‘Alushe’
notificationsCount = 0
App ===
<span>Hola Alushe, no tienes notificaciones.</span>

40. user.firstName = ‘Alushe’
notificationsCount = 1
App ===
<span>Hola Alushe, tienes 1 notificación.</span>

41. user.firstName = ‘Alushe’
notificationsCount = 42
App ===
<span>Hola Alushe, tienes 42 notificaciones.</span>

42. const App = () => (
<FormattedNumber
value={item.price}
style=‘currency’
currency={item.priceCurrency}
currencyDisplay=‘symbol’
/>
)

43. item.price = 1199.99
item.priceCurrency = ‘MXN’
App ===
<span>$1,199.99</span>
<IntlProvider locale=‘es-MX’ />

44. item.price = 1199.99
item.priceCurrency = ‘MXN’
App ===
<span>MX$1,199.99</span>
<IntlProvider locale=‘es-ES’ />

45. const App = () => (
<FormattedDate
value={post.createdAt}
year='numeric'
month='long'
day='2-digit'
/>
)

46. post.createdAt = '2018-01-09T03:03:13.448Z'
App ===
<span>08 de enero de 2018</span>
<IntlProvider locale=‘es-MX’ />

47. post.createdAt = '2018-01-09T03:03:13.448Z'
App ===
<span>January 08, 2018</span>
<IntlProvider locale=‘en-US’ />

48. traducciones

49. const locale = ‘es-MX’
ReactDOM.render(
<IntlProvider
locale={locale}
defaultLocale={‘es-MX’}
>
<App/>
</IntlProvider>,
document.getElementById(‘app')
)

50. const locale = ‘es-MX’
ReactDOM.render(
<IntlProvider
locale={locale}
messages={translations[locale]}
defaultLocale={‘es-MX’}
>
<App/>
</IntlProvider>,
document.getElementById(‘app')
)

51. const translations = {
‘es-ES’: {
greeting: ‘Hola {name}, vos {count, plural,
zero {no tiene mensajes}
one {tiene # mensaje}
other {tiene # mensajes}
}.’
},
‘en’: {
greeting: ‘Hello {name}, you {count, plural,
zero {do not have any messages}
one {have # message}
other {have # messages}
}.’
},
‘jp’: {
greeting: ‘こんにちわ{name}。{count}メッセージがあります。’
}
}

52. const App = () => (
<FormattedMessage
id=‘App.greeting’
defaultMessage=‘Hola {name}, {count, plural
zero {no tienes notificaciones}
one {tienes # notificación}
other {tienes # notificaciones}
}.’
values={{
name: user.firstName,
count: notificationsCount,
}}
/>
)

53. <IntlProvider locale=‘en’ />
user.firstName = ‘Alushe’
notificationsCount = 42
App ===
<span>Hello Alushe, you have 42 messages.</span>

54. <IntlProvider locale=‘jp’ />
user.firstName = ‘Alushe’
notificationsCount = 42
App ===
<span>こんにちわAlushe。42メッセージがあります。</span>

55. trabaja conmigo en
hablemos al rato :)
Richard Kaufman
@sparragus