This past week, I decided to start picking up React since I was hearing and reading about it EVERYWHERE. My expectations were pretty low, since I'd previously worked with Angular and although I understood why it was valuable (primarily two-way data binding), I didn't find it to be very intuitive and I frequently heard senior developers complaining about its limitations and saying that it wasn't scalable.
I haven't had a chance to use React 'in the wild' yet but my first reaction is that it's fun to use and is much easier to get used to than Angular. Plus, you still get the benefit of the two-way data binding that was so important with Angular.
A really interesting breakthrough made popular by React is the virtual DOM.
The Virtual DOM:
DOM manipulation is significant in modern web applications. However, it's also much slower than a lot of other JavaScript operations. React works around this problem by only updating the DOM elements which have actually changed, instead of updating all of the DOM elements every time some sort of DOM manipulation happens.
const ReactDOM = require('react-dom');
It does this by creating something called the virtual DOM. This is similar to the DOM we're already familiar with. In fact, it's exactly like it except that virtual DOM objects don't actually have the power to change what's going on in the browser. This makes manipulating the virtual DOM faster than manipulating the regular DOM.
React works by updating the virtual DOM with all of your changes (new/edited/deleted elements). It then compares this NEW version of the virtual DOM with an OLD version of the virtual DOM (the version that existed right before you made all of your recent changes). It then compares these two, finds the differences (like when git "diffs" your files), and updates the real DOM only with those differences. These changes then show up in the browser for your user to see!
Resources:
Although it had been a while since I'd used Codecademy, I went back to it for the purpose of learning React (I used it back in the good old days when I was learning HTML and CSS! It taught me how to build my first website, which was table-based. Thanks, I guess?). They have a two-part course which is meant to take 10 hrs. I signed up for the PRO account so that I'd also have access to quizzes and projects. I've only gone through the first half of the course so far, but I highly recommend it. In typical Codecademy fashion, they walk you through the concepts slowly, and it's more interactive than just reading an article or docs.
You can find the course here: https://www.codecademy.com/courses/react-101