Introduction to React
React is a front-end library initially developed by Facebook. It is used to manage the view layer for web applications. React allows developers to create reusable UI components. It is currently one of the most popular JavaScript libraries (if not the most popular), with a strong foundation and a large community. We’ll be using React in combination with other technologies on top of it to develop the TaskFlow web app.
Component-based thinking
Working with React encourages a new approach to design by breaking it down into reusable components. Each component can represent various visual states depending on the data's current state. Together, these components form a cohesive whole, and their relationship can be visualized as a hierarchical tree. The top-level component that requires data receives it as a prop, and this data flows down to all dependent components. This approach is known as one-way data flow.
Users can modify the app’s data through interactions such as clicks, form inputs, or dropdown selections. The changes a user makes are stored in state. Think of state as the minimal set of dynamic data that your app needs to remember through a session.
This is of course a rather brief explanation of how React works. It is strongly recommended to read the article “Thinking in React” which is provided in the further reading section.
How React interacts with the browser
After updating data in a React app, the browser triggers a re-render. This is usually after the user has interacted with the app, or some external data that is being fetched. React doesn’t update browser elements directly. When an app renders, React creates a virtual representation of the app’s UI called the virtual DOM.
The virtual DOM is a lightweight copy of the actual DOM. It doesn’t immediately update the real DOM. Before updating the real DOM, React performs a process called reconciliation. It compares the previous virtual DOM with the new virtual DOM to determine what the differences (or "diffs") are. This process ensures that React efficiently identifies the minimal set of changes need to update the real DOM. Once React has determined all the differences, in applies the necessary updates to the real DOM. It is important to note that when a component re-renders, all its child components also re-render. This is something to take into account while developing applications, because minimizing re-renders can significantly improve the performance of your app.