Getting to Know React
Probably the most important aspect to remember about React is that it is components based. The idea is to have a parent component that contains children components. With this structure, you can pass information from the parent to the child and vice versa.
Assume you are creating a news page. At its most basic level the components of the site may consist of the following:
1. Parent: News Page
i. Child: Header
ii. Child: News Article
iii. Child: Footer
However, as the app grows, these four components can be divided further. The News Article component may contain title, author, and body components. What if we added a comments component above the footer? This section would itself contain multiple components. Although components help establish a pattern for developing the app, they can also become difficult to keep track of when beginning to use React.
This React component displays “Hello World!”:
<h1> Hello World! </h1>,
The Virtual DOM
JSX allows React to create a copy of the DOM. When a change is made, the whole virtual DOM reloads, but because it does not change anything on the screen, it reloads quickly. The real DOM is then compared to the virtual DOM. Because React has already specified where everything goes, the DOM does not need to figure everything out — it only needs to change the updated elements. In other words, if the user adds one item to a to-do list, the virtual DOM rethinks the layout quickly, so that the actual DOM only has to add the new item.
Although these are only a few of React’s characteristics, grasping the concepts above will help you make wise decisions while developing React applications.