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 OutlierDeveloper.com, 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 3 – React Core Concepts
Part 4 – Creating Components Introduction
React Core Concepts
Introduction
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:
- Sublime Text with babel-sublime
- Adobe Brackets
- WebStorm
- Atom
- Visual Studio 2015
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:
- Synthetic Events
- Isomorphic Support
- React Native
So the virtual DOM doesn’t just offer performance: it offers the flexibility to try these other innovative approaches.
Zombie Code Kill 