title: i18n for react, formatjs, react-intl
body: <p>I want to use ICU standard for my i18n in my react app. I want to store my language files like <a href="http://userguide.icu-project.org/locale/localizing#TOC-.txt-resource-bundles">http://userguide.icu-project.org/locale/localizing#TOC-.txt-resource-bundles</a> :</p>
  
  <pre><code>de {
    key1 { "Deutsche Sprache "
           "schwere Sprache" }
    key2 { "Düsseldorf" }
  }
  </code></pre>
  
  <p>I've found this library <a href="http://formatjs.io/react/">http://formatjs.io/react/</a>. <a href="http://formatjs.io/">http://formatjs.io/</a> supports ICU, however I can't find any good example how to wire my language files with my app.</p>
  
  <p>I was going through their tutorial and it seems I could use the component <code>&lt;FormattedMessage&gt;</code>. So e.g.</p>
  
  <pre><code>var intlData = {
      "locales": "en-US",
      "messages": {
          "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
      }
  };
  
  React.render(
      &lt;Component {...intlData} /&gt;,
      document.getElementById('example')
  );
  </code></pre>
  
  <p>then in some component I have</p>
  
  <pre><code>...
  render: function () {
          return (
              &lt;p&gt;
                  &lt;FormattedMessage
                      message={this.getIntlMessage('photos')}
                      name="Annie"
                      numPhotos={1000}
                      takenDate={Date.now()} /&gt;
              &lt;/p&gt;
          );
      }
  </code></pre>
  
  <p>My biggest problem is how to convert my language file e.g.</p>
  
  <pre><code>en-US {
    photos { "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n" }
  }
  </code></pre>
  
  <p>into format:</p>
  
  <pre><code>var intlData = {
      "locales": "en-US",
      "messages": {
          "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
      }
  };
  </code></pre>
  
  <p>Is there any parser/converter at all?</p>