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.
Also in this series:
Part 3 – React Core Concepts
React Core Concepts
React is just one of many way of creating components.
- Isomorphic Friendly
- 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:
- Cascading updates
- Tricky debugging
These are the reason why they decided to design a uni-directional binding solution instead.
We see an example of some simple JSX. It is the return value for a React render function.
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
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 friendly editors include:
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.
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.
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.