larlet-fr-david-cache/cache/352a1ada40f12fec1e986f17364605f6/index.md

title: ReactJS For Stupid People
url: http://blog.andrewray.me/reactjs-for-stupid-people/
hash_url: 352a1ada40f12fec1e986f17364605f6

<p><strong>TL;DR</strong> I struggled for a long time trying to understand what React is and how it fits in the application architecture. This post is what I wish someone had told me.</p>

<h2 id="whatisreact">What is React?</h2>

<p>How does React compare to Angular, Ember, Backbone, et al? How do you handle data? How do you contact the server? What the heck is JSX? What is a "component"?</p>

<p>Stop.</p>

<p>Stop it right now.</p>

<p><strong>React is ONLY THE VIEW LAYER.</strong></p>

<p>React is often mentioned in the same breath as other Javascript frameworks, but "React vs Angular" doesn't make sense because they aren't directly comparable things. Angular is a complete framework (including a view layer), React is not. This is why React is so confusing to understand,  it's emerging in an ecosystem of complete frameworks, but it's just the view.</p>

<p>React gives you a template language and some function hooks to essentially render HTML. That's all React outputs, HTML. Your bundles of HTML / Javascript, called "components", are allowed things like storing their own internal state in memory (such as which tab is selected in a tab view), but in the end you just barf out HTML.</p>

<p>You absolutely <strong>cannot build a fully functional dynamic application with React alone.</strong> We'll learn more about why below.</p>

<h2 id="thegood">The Good</h2>

<p>After working with React for a while, I've seen three very important benefits surface.</p>

<p><strong>1. You can always tell how your component will render by looking at one source file.</strong></p>

<p>This may be the most important benefit, even though it is not different from Angular templates. Let's use a real world implementation example.</p>

<p>Say you have to update your site's header with the user's name upon log in. If you're not using a Javascript MVC framework, you might do this:</p>

<pre><code class="lang-markup">&lt;header&gt;  
   &lt;div class="name"&gt;&lt;/div&gt;
&lt;/header&gt;  
</code></pre>

<pre><code class="lang-javascript">$.post('/login', credentials, function( user ) {
    // Modify the DOM here
    $('header .name').show().text( user.name );
});
</code></pre>

<p>I can tell you from experience that this code will ruin your life and your friends' lives. How do you debug the output? Who updated the header? Who else has access to the header HTML? Who holds the source of truth for the name being visible? This DOM manipulation is <strong>just as bad as a GOTO statement</strong> for reasoning about your program. </p>

<p>Here's how you might do it in React:</p>

<pre><code class="lang-javascript">render: function() {  
    return &lt;header&gt;
        { this.state.name ? &lt;div&gt;this.state.name&lt;/div&gt; : null }
    &lt;/header&gt;;
}
</code></pre>

<p>We can tell instantly how this component will render. <strong>If you know the state, you know the rendered output.</strong> You don't have to trace program flow. When working on complex applications, especially in teams, this is critically important.</p>

<p><strong>2. Bundling Javascript and HTML into JSX makes components easily understandable.</strong></p>

<p>The weird mix of HTML / Javascript soup above might make you cringe. We've been conditioned to not put raw Javascript in the DOM (like <code>onClick</code> handlers) since we were wee developers. You'll have to trust me, though; working with JSX components is <strong>really nice.</strong></p>

<p>Traditionally you separate views (HTML) from functionality (Javascript). This leads to monolithic Javascript files containing all  functionality for one "page", and you have to trace complex flow from JS &gt; HTML &gt; JS &gt; bad-news-sad-time.</p>

<p>Tying functionality directly to markup and packaging it in a portable, self contained "component" will make you happier and less filthy in general. Your Javascript has intimate knowledge of your HTML, so mashing them together makes sense.</p>

<p><strong>3. You can render React on the server.</strong></p>

<p>If you're building a public facing site or app and you're following the render-it-all-on-the-client path, you've already done it wrong. Client-only rendering is why <a href="https://soundcloud.com">Soundcloud</a> feels so slow and why <a href="http://stackoverflow.com/">Stack Overflow</a> (purely server side rendering) feels so fast. You can <a href="https://www.npmjs.org/package/react-server-example">render React on the server</a>, and you should.</p>

<p>Angular and others encourage you to do disgusting things like render your page with PhantomJS and serve that to search engine crawlers based on user agent, or <a href="https://prerender.io/pricing">pay actual cash money for that as a service</a>. Ugh.</p>

<h2 id="thebad">The Bad</h2>

<p>Don't forget that React is <strong>only the view.</strong></p>

<p><strong>1. You DO NOT GET any of the following:</strong></p>

<ul>
<li>An event system (other than vanilla DOM events)</li>
<li>Any AJAX capabilities whatsoever</li>
<li>Any form of a data layer</li>
<li>Promises</li>
<li>Any application framework at all</li>
<li>Any idea how implement the above</li>
</ul>

<p>React on its own <strong>is useless for the real world.</strong> Worse yet, as we'll see, this leads to everyone reinventing the wheel.</p>

<p><strong>2. The documentation is not "accessible" nor "good."</strong> Again, this is a blog post for stupid people. Look at the first part of the sidebar on the <a href="http://facebook.github.io/react/docs">documentation page</a>:</p>

<p><img src="/content/images/2014/Sep/Screen-Shot-2014-09-22-at-12-08-18-AM.png" alt="React documentation sidebar"/></p>

<p>There are three separate, competing quickstart guides. I'm overwhelmed and I'm not even drunk. The sidebar below that is straight out of my nightmares, with sections that obviously shouldn't be there, like "More About Refs" and "PureRenderMixin".</p>

<p><strong>3. React is large for how little you get, including how little cross browser support.</strong></p>

<p><em>Update:</em> React is not 144 KB as I <a href="/content/images/2014/Sep/Screen-Shot-2014-09-22-at-3-48-19-PM.png#full-img">previously wrote</a>. React is about <strong>35 KB gzipped</strong> over the wire.</p>

<p><img src="/content/images/2014/Oct/react-size.png" alt="React file size"/></p>

<p>That's <strong>without the <a href="http://facebook.github.io/react/downloads.html">react-with-addons</a> library</strong> you will need to actually develop a real app!</p>

<p>That's <strong>without the <a href="https://github.com/es-shims/es5-shim">ES5 Shim</a> library</strong> you need to support IE8!</p>

<p>That's <strong>without</strong> any sort of application library of any kind!</p>

<p>React is a <strong>comparable size with Angular,</strong> even though Angular is a complete application framework. React is frankly bloated for how little functionality you get. Hopefully this will improve in the future.</p>

<h2 id="stopsayingflux">Stop Saying Flux</h2>

<p>Perhaps the most annoying part of React development is "Flux." It's far more confusing than React. The name "Flux" is a pretentious barrier to understanding.</p>

<p><strong>There is no such thing as Flux.</strong> Flux is a concept, not a library. Well, there <a href="https://github.com/facebook/flux">is a library</a>, sort of:</p>

<blockquote>
  <p>"Flux is more of a pattern than a framework"</p>
</blockquote>

<p>Ugh. The worst part is the name: React didn't reinvent the last 40 years of UI architecture knowledge and come up with some brand new concept for data management.</p>

<p><strong>The concept "Flux" is simply</strong> that your view triggers an event (say, after user types a name in a text field), that event updates a model, then the model triggers an event, and the view responds to that model's event by re-rendering with the latest data. <strong>That's it.</strong></p>

<p>This one way data flow / decoupled observer pattern is designed to guarantee that your source of truth always stays in your stores / models. It's a Good Thing™.</p>

<p><strong>The bad side of Flux</strong> is that everyone is re-inventing it. Since there's no agreed on event library, model layer, AJAX layer, or anything, <a href="https://www.npmjs.org/package/compose-flux-dispatcher">there</a> <a href="https://www.npmjs.org/package/flux-action">are</a> <a href="https://www.npmjs.org/package/react-flux">many</a> <a href="https://www.npmjs.org/package/fluxxor">different</a> "<a href="https://www.npmjs.org/package/reflux">Flux</a>" implementations, and they all compete with each other.</p>

<h2 id="shouldiusereact">Should I Use React?</h2>

<p>Short answer: <strong>yes.</strong></p>

<p>Long answer: unfortunately, yes, for most things.</p>

<p><strong>Here's why</strong> you should use React:</p>

<ul>
<li>Works great for teams, strongly enforcing UI and workflow patterns</li>
<li>UI code is readable and maintainable</li>
<li>Componentized UI is the future of web development, and you need to start doing it now.</li>
</ul>

<p><strong>Here's why you should think twice</strong> before you switch:</p>

<ul>
<li>React will <strong>slow you down tremendously</strong> at the start. Understanding how props, state, and component communication works is not straightforward, and the docs are a maze of information. This will be countered, in theory, by a grand speed up when your whole team is on board.</li>
<li>React does not support any browser below IE8, and never will</li>
<li>If your application / website doesn't have very much dynamic page updating, you will be implementing a lot of code for a very small benefit.</li>
<li>You will reinvent a lot of wheels. React is young, and because there's no canonical way to do events / component communication, you'll have to build large component libraries from scratch. Does your application have dropdowns, resizable windows, or lightboxes? You'll probably have to write those all from scratch.</li>
</ul>

<h2 id="thatsit">That's It!</h2>

<p>Check out the follow-up post, <a href="http://blog.andrewray.me/flux-for-stupid-people/">Flux For Stupid People</a>.</p>

<p>I hope this helped someone as stupid as me understand React better. If this post made your life easier, consider following me <a href="https://twitter.com/andrewray">on Twitter</a></p>