The data model holds and organizes data in programming. It is the "single source of truth" where data is accessed and manipulated before display. In vanilla JS the data model and DOM are kept separate - you don't store data on the DOM.
The DOM (Document Object Model) represents the HTML and provides ways (button clicks, form inputs, etc) that data can accessed/modified through JS functionality (data model) to create what is displayed on your screen.
A metaphor for the difference between a framework and a library is that a framework is like your workplace and a library is like your home - frameworks have more rules and are more restrictive whereas libraries have fewer rules, and you dictate how and when you call the code. Frameworks call the code and it has conventions/rules/structures that must be followed throughout using it. You can add on a library - and can pick and choose whatever pieces of the library you want to use.
The biggest reason to consider using a framework instead of vanilla JS is to keep the UI in sync with state. A framework allows us to define the UI once and automatically update it when the state changes. This allows us to write complex code more efficiently, which makes the codebase easier to maintain as it grows.
Components are the building blocks of React. It is a modular block of code -- like "legos" that can be used to build bigger blocks to form an app. A component is a collection of HTML, CSS, JS and some related internal data that gets bundled together. It is defined in either pure JS or JSX with transpilation.
Compnents are functions or classes that can accept inputs and returns a React element, which describes what you want to see on the screen.
Root div is main parent of HMTL elements - like <main> in index.html
JSX allows us to write code that appears like a combination of JS/HTML that gets transformed/transpiled into lightweight JS objects so that it can be read by the browser. It provides syntax of what a component UI should be.
JSX is still JS under the hood, and therefore prefers JS syntax rules like using camelCase instead of dashes, for example. The HTML-like features in JSX is actually another language, XML.
JSX separates concerns using components that have both markup and logic in one place based on the idea that rendering logic is inherently coupled with other UI logic - how events are handled, how state changes as users interact with the page, and how data is prepared for UI. It also prevents injection attacks by converting all inputs to strings before rendering.
React props are the data passed from parent components to child components
React state is the internal data store (obj) of a component.
this.state is used to establish the initial state of a component and can be updated with a method like setState or passing a function that is passed state
State is held in the parent componennt (generally a class) and can be updated. Props (data) get passed down from parent to child. When an action, e.g. click happens in child element and it returns info back up to the parent element. This invokes a function that lives in parent element -- necessary info is passed to child -- action (by user) makes it so that parent element can share data with it/ or sibling elements so the DOM can be updated.