React in plain english

React is often described as “the V in the MVC structure”. This also happens to be the least tangible explanation one could give a newcomer, as (V)iews are typically logic-less files that are driven by a controller. Further, frameworks like Angular, Backbone, Ember, and more already have sufficient view layers — which then begs the question, why do we need to replace the V in MVC with React?

The answer is that React doesn’t necessarily want to replace our views — it wants to augment them by allowing you to create highly reusable UI components (tab bars, comment boxes, pop up modals, lists, sortable tables, etc).

In other words, the big idea behind React is this: what if you could create your own HTML element that has customized functionality? For example, one could make a <CommentBox> element that would display a textarea, run validations on the text typed into the textarea, submits the form when the enter key is pressed, etc — all just by including one line of code: <CommentBox></CommentBox>. (For those of you coming from the Angular world, you can think of React Components as a close analogy to Directives).

Components: The future of web development

However, React is capable of becoming an entire replacement for your views because you can nest components. What is a view, but a large UI component? For example, a web page that’s entirely rendered by React might look something like this:

<HomePage>
     <Header tab-selected=“home” />
     <ScrollingBanner>Welcome to my webpage!</ScrollingBanner>
     <p>Enter your info below if you want to get in touch!</p>
     <ContactForm />
     <Footer />
</HomePage>

Each of those custom HTML tags would have their own functionality that displays relevant DOM elements (a form for <ContactForm>, a sticky div at the top of the page for <Header>, etc) as well as manipulate their respective DOM nodes (gather the values of the inputs in <ContactForm>, add a CSS class for the home link in <Header>, etc).

The beauty of this structure is that all HTML and javascript functionality is enclosed in their respective React component, which makes reading (and building) the code of large applications significantly easier and faster. Pretty neat — but the awesomeness of React doesn’t end there! Check out Facebook’s resources “Why React?” and “Why did we build React?” as they thoroughly explain the technical design choices that make React particularly unique.

Next up: Learn how to create your first React component!