A framework is reliant on a library however a library isn't reliant on a frame work. A Library has fewer rules as to how it can be used vs a framework that has specific use cases.
Frameworks require less code, they keep the state of the app up to date with the DOM, and the code isn't as fragile as vanilla JS
There are different types of components such as functional components and class components. Functional/Class components are similar to their vanilla js counterparts, however they allow you to manipulate the DOM using JSX. The Class components contain state which holds key value pairs that can be updated as data is manipulated and then used to update the DOM.
JSX allows us to put HTML into our JS so that we can manipulate the DOM more effeciently. JSX isn't HTML however it is converted to HTML.
Props are similar to parameters in vanilla JS. They allow you to pass arguments from one component to another which can be used to update the DOM.
State is a property in a class component. It is typically an object and it holds on to key value pairs that can be updated in order to keep the DOM up to date.
This means that Parent components pass data down to their child components and that once a child component takes an action it lets that parent component know that it took that action so that the parent can determine what to do with the new action.