Section 1 - What is React?
React is a JavaScript library for creating user interfaces. Facebook released the library in 2013 and has been developing the library since.
In React, everything in a UI (user interface) is a component. A component is essentially a skeleton of HTML. For example in Airbnb’s homepage, the cards for homes are components. React allows you to reuse the same skeleton (i.e. component), but pass different data to them. You can write your component once, but have different components display different information. This keeps your code clean and concise!
Due to the fact that React components are reusable, there’s a huge community of open-sourced React component available. Some examples are React Color and React Vis. Meaning you often don’t even have to write your own components!
React started out as a UI library for websites, but it has since extended its influence to mobile app development and VR development, with React Native and React VR respectively.
This article provides an excellent high level description of React, while the paragraphs below contain a more technical explanation. I recommend reading the article first.
To understand how React works, you first have to understand what a DOM (document object model) is.
What is a DOM?
A DOM is an interface for programming languages like Javascript to manipulate a how a webpage looks. When a browser receives an HTML, it parses it and creates a DOM. The DOM is exposed to the programmer to manipulate. For example, document.getElementById() is a function that accessed the DOM.
In the past, programmers have used pure JavaScript or old JavaScript frameworks to manipulate the DOM. Using pure JavaScript is difficult for programmers because they would have to write complex and clumsy code. Using old frameworks is inefficient because in the past, these frameworks would update the DOM more than needed. For example, if one out of ten items in a <ul> … </ul> unordered list is changed, they would re-render all 10 items. This is slow and inefficient, especially as webpages’ UI and functionalities get more complex everyday. Here's where React fits in.
React's Virtual DOM
React has an internal data structure called the virtual DOM. A virtual DOM is essentially a lightweight copy of the DOM. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn on screen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
When you create elements in React, you interact with the virtual DOM instead of the DOM. After you’re done, React compares a snapshot of the virtual DOM before the change and the current virtual DOM, then it figures out exactly what has changed. After that, it make those, and only those, changes to the browser’s DOM!
Let’s stop talking and start coding! Follow the instructions in Section 0, Option 0 to setup React in Codepen, and head to Section 1 - JSX to get started!