The Virtual DOM
Do you know how to write a JavaScript function? If you do, that's great! You're well on your way to understand how React and React Native work under the hood. What do we mean exactly? Well, when you research how React works, you'll eventually encounter someone explaining it in the following manner:
UI = f(data)
You may say, Nerd alert! How is this helpful? Well, it's saying that your UI is a function of your data. To put it in more familiar terms, let's say that:
var todos = function(data) { return data.join( " -- " ) }You can call the function with an array of data, such as:
var ui = todos( ["wake up", "get out of bed", "drag a comb across my head"] ); console.log(ui);
This is not a particularly earth-shattering code; however, you're now rendering some content, in this case to the console.
What if, all your UI rendering code could be this predictable? It can be! Let's start getting a little more advanced. What if, in addition to our todos() function, we had a function called todoItem...