React Core Concepts


Welcome to the Part 3 of this new series on Cory House’s Pluralsight course Building Applications with React and Flux.

Cory is a Microsoft MVP in C#, founder of, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.
Building Applications with React and Flux is the prequel to Cory’s course Building Applications with React and Redux in ES6.

If you are new to React JS or React-Router, or prefer to do your development in regular JavaScript without using Babel and other tools that you don’t necessarily need, then this course is for you. Alternatively, check out the review of his other React course above.

Also in this series:

Part 1 – Introductory topics

Part 2 – Environment Setup

Part 3 – React Core Concepts

Part 4 – Creating Components Introduction

Part 5 – React Lifecycle

Part 6 – React Composition

Part 7 – React Router

React Core Concepts


React is just one of many way of creating components.

Alternative options for creating components include jQuery, Angular2 and  Bootstrap to name just a few. So why React? Cory explains that React is:

  • Fast
  • Composable
  • Pluggable
  • Isomorphic Friendly
  • Simple
  • Battle Proven

React and MVC

Some say that React is the V in MVC, but most react components include functionality for both the V and the C in MVC.

Controller Views promote reuse and separation of concerns.

Two-way Binding Risks

Two Way Binding is a feature of many frameworks, including Knockout, Angular 1 and Ember, but not a feature in React.

Facebook found that two-way binding leads to:

  • Unpredictability
  • Cascading updates
  • Tricky debugging

These are the reason why they decided to design a uni-directional binding solution instead.

JSX Introduction

JSX is a XML-like syntax, and it is commonly thought of as HTML in your JavaScript, although it’s not quite HTML.

JSX compiles down to plain JavaScript. You don’t have to use JSX with React, but it makes your code easier to write and easier to read.

We see an example of some simple JSX. It is the return value for a React render function.

We also see a before and after example showing how much more terse JSX is compared with the equivalent in JavaScript.

Next we see a more complex example, and there is a big difference in the amount of code that we need to read and write.

Without JSX, it’s harder to read, takes longer to type, and it’s a lot less friendly to designers.

HTML in JS: A Justification

Doesn’t putting HTML in your JavaScript ignore separation of concerns?

Other frameworks such as Angular, Handlebars, Ember and Knockout effectively put JavaScript in your HTML. To use any of them you need to first learn their proprietary domain specific language.

So JSX isn’t as wild of an idea as you might think, and it has some clear advantages because JavaScript is much more powerful than HTML.

If you make a typo in your JSX, JSX tells you what line it is on. If you do that in HTML your app will just silently fail. Fail fast, fail loudly.

For the full argument from Cory House, see his article React JSX: The other side of the coin

JSX Editors

JSX friendly editors include:

Virtual DOM

Cory uses the analogy of a professional photography studio to describe the benefits of the Virtual DOM.

The virtual DOM compares the current setup to the desired setup, and only makes the minimal amount of changes required to get there.

Being efficient is increasingly important in the new world of mobile devices: it helps conserve battery power as well as create a faster and more pleasant user experience.

Most probably, React’s virtual DOM was the inspiration for Angular’s Track by feature and Ember’s Glimmer feature. Many frameworks have been influenced by the Virtual DOM in one way or another.

We see an example from Khan Academy showing the major increases in performance and visual polish that were gained by switching from Backbone to React.

We also learn that declaring shouldComponentUpdate on our component will make it go even faster, as does using PureRenderMixin with immutable data structures.

The virtual DOM is not only about performance however. Cory explains the benefits of, and relationship of the Virtual DOM with:

So the virtual DOM doesn’t just offer performance: it offers the flexibility to try these other innovative approaches.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s