Slide 1

Slide 1 text

React.js & i18n @ericf - Yahoo ReactConf

Slide 2

Slide 2 text

1.002 2/1/2015

Slide 3

Slide 3 text

But I only care about English in the USA!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Formatting

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Intl.NumberFormat Intl.DateTimeFormat Intl.Collator

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text


 React Intl 1,000 January 28, 2015

Slide 15

Slide 15 text


 Posted 



 Relative Times Posted 3 hours ago

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

var msg = `{numComments, plural, 
 one {# comment} 
 other {# comments}
 }`; Pluralization 1 comment

Slide 18

Slide 18 text

var msg = `{numComments, plural, 
 one {# comment} 
 other {# comments}
 }`; 
 Pluralization 1,200 comments

Slide 19

Slide 19 text

var App = React.createClass({
 mixins: [IntlMixin],
 render: function () {
 return 
 }
 }); React.render(
 ,
 document.getElementById("container")
 ); Intl Mixin 1 099,95 $US

Slide 20

Slide 20 text

7.7k 150+ React Intl min + gz languages English as default

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Questions? formatjs.io @ericf - Yahoo ReactConf