The data model is term we use to refer to how and where our information is stored and manipulated. The DOM is just the bridge between the data model and how all of that data shows up on the page - by accessing and manipulating the DOM, a developer can tell it where and how to display relevant data.
From my understanding right now, I see a framework as a sort of "code foundation" that a developer uses to build their applications off of - it's a collection of libraries and specific sets of rules about how and when to use those libraries. Its difference from a library stands out in that libraries don't care how and when you use their code - within a framework though, you have a specific set of rules that you have to adhere to.
Tying the display logic and the data logic together in vanilla JS is hard. Now, with the introduction of modern frameworks like React or Angular, they do a lot of the heavy lifting for us. That's the main argument to be made for using a framework over vanilla JS.
A component is a piece of reusable code in React, usually a class or a function, that accepts inputs and then uses the info from those inputs to decide how a piece of information is displayed in a UI. Components keep your code modular, easy to test, and help with scalability of your application.
JSX is a JavaScript syntax extension that allows you to write HTML-like code in your JavaScript to explicitly describe and produce React elements.
Props, short for properties, are pieces of information passed between React components (as objects) that affect how those components render.
State functions kind of similarly to props - they're pieces of information that influence how React components render. The key difference between state and props is that state is only manageable within its respective component. A component's state isn't passed in like a prop would be.
Basically, if you have multiple components that all need to render in response to a piece of data changing, you want the new information to start with the parent component and get passed down as a prop to its children components. Once the information has trickled all the way down to the final child component, the corresponding changes to a state start with that child component and ripple their way back up, all the way to the original parent.