The data model refers to the original data or information that an application is built upon and depends on. The data model is the single source of truth that should not be changed or manipulated. The DOM is the browser's display of the application. It is the interface between JavaScript and HTML. When changing what is displayed to a user, the DOM should be manipulated, not the data model. These two need to remain separate in order to protect the data model.
There are two main differences between frameworks and libraries that help me understand the distinction better. First, frameworks generally have more rules and strict formatting than libraries. Second, when working with a framework, it is the framework that makes calls to your code, whereas with a library, you have the power to call the code whenever you like. This means that when using a framework, the framework is in charge of the flow and when using a library, you are in control of the flow of the application.
The main benefit of using a framework is that it helps with keeping the UI in sync with the state. This means you do not need to update the UI on every state change. Without a framework, keeping the UI in sync with the state requires a significant amount of code which means more opportunities for errors. It is not possible to write complex, efficient and easy to maintain UIs with Vanilla JavaScript.
Components are the building blocks of React. A component is essentially a collection of HTML, CSS, JS, and some internal data specific to that component.
JSX — Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
Props, are used to pass properties down from a parent component to its child component similar to how arguments are passed into a function's parameters.
State can sometimes get confused with props. State holds data that represents the current state of an application. This means that state is changed by user interactions but props should be kept unmutated.