React.js & i18n

Transcript

1. React.js & i18n @ericf - Yahoo ReactConf

2. 1.002 2/1/2015

3. But I only care about English in the USA!

4. English 5.2% 27% Native Speakers Internet Users Source: Wikipedia

5. None
6. None
7. None

8. Formatting

9. None
10. None

11. function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,

    ","); return parts.join("."); } “How to print a number with commas as thousands separators in JavaScript?” 25 Answers

12. Intl.NumberFormat Intl.DateTimeFormat Intl.Collator

13. new Intl.NumberFormat().format(1000); new Intl.DateTimeFormat({
 month: 'long',
 day : 'numeric',
 year

    : 'numeric'
 }).format(Date.now());
 1,000 January 28, 2015 Intl Built-ins

14. <FormattedNumber value={1000} /> <FormattedDate value={Date.now()}
 month="long"
 day="numeric"
 year="numeric" />
 React

    Intl 1,000 January 28, 2015

15. <p className=“post-meta”>
 Posted <FormattedRelative value={this.props.date} />
 </p>
 Relative Times Posted

    3 hours ago

16. “Hello, {name}!” “You’re {age, number} years old.” String Messages

17. var msg = `{numComments, plural, 
 one {# comment} 


    other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1} /> Pluralization 1 comment

18. var msg = `{numComments, plural, 
 one {# comment} 


    other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1200} />
 Pluralization 1,200 comments

19. var App = React.createClass({
 mixins: [IntlMixin],
 render: function () {


    return <FormattedNumber value={this.props.price}
 style="currency"
 currency="USD" />
 }
 }); React.render(
 <App locales="fr-FR" price={1099.95} />,
 document.getElementById("container")
 ); Intl Mixin 1 099,95 $US

20. 7.7k 150+ React Intl min + gz languages English as

    default
21. None

22. CLDR ICU JS Runtimes (Intl.*) Format.js Core Format.js Integrations

23. Intl.MessageFormat Intl.RelativeFormat Future Intl Built-ins?

24. Questions? formatjs.io @ericf - Yahoo ReactConf