title: Recommended way of using React + Picturefill
body: <p>I want to use Picturefill + React + React Router (Also using Webpack).</p>
  
  <hr>
  
  <p><em>Context: There is no isomorphic architecture yet so the data is fetched after initial page load (Route change).</em></p>
  
  <p>…Because of this the render method is being called twice.</p>
  
  <ol>
  <li>Once for default state</li>
  <li>Once for updated state (fetched data)</li>
  </ol>
  
  <h2>Code</h2>
  
  <pre class="lang-js prettyprint-override"><code>render: function () {
      return (
          &lt;picture&gt;
              &lt;!-- You get the idea --&gt;
  
              &lt;source srcSet={this.props.large} media="(min-width: 1024px)" /&gt;
              &lt;source srcSet={this.props.medium} media="(min-width: 640px)" /&gt;
              &lt;img srcSet={this.props.small} /&gt;
          &lt;/picture&gt;
      );
  }
  </code></pre>
  
  
  
  <hr>
  
  <h2>Example 1:</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;!-- Recommended usage --&gt;
      &lt;script src="https://cdn.rawgit.com/scottjehl/picturefill/2.3.1/dist/picturefill.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  
  
  <ul>
  <li>Works in Safari 8.0.8</li>
  <li>Works in Chrome 45</li>
  <li>Works in Firefox 40.0.3 (Only on refresh, not on resize)</li>
  </ul>
  
  <h2>Example 2:</h2>
  
  <pre class="lang-js prettyprint-override"><code>// Use picturefill JavaScript API
  componentDidUpdate() {
      picturefill();
  }
  </code></pre>
  
  
  
  <ul>
  <li>Works in Safari 8.0.8 (Only on resize, <strong>not</strong> on page load)</li>
  <li>Works in Chrome 45</li>
  <li>Works in Firefox 40.0.3 (Only on refresh, not on resize)</li>
  </ul>
  
  <hr>
  
  <p>More info/Alternatives?</p>
  
  <ul>
  <li><a href="https://github.com/scottjehl/picturefill" rel="nofollow">https://github.com/scottjehl/picturefill</a></li>
  <li><a href="https://github.com/ldesplat/react-picture" rel="nofollow">https://github.com/ldesplat/react-picture</a></li>
  </ul>