The difference between a library can be explained using a car analogy. Both Mercedez and Audi are cars, but when you open
them up, you see how differently they are made. They could be said to have different "frameworks" because their structures,
organization, and parts are so different from each other. Their frameworks control the way they are made. They may use common
materials (libraries) like tie arms, head gaskets, engine blocks, dashboards and the like that are made by other manufacturing
companies or they could use their own.
Frameworks in software solve organizational and structural challenges by setting standards that your code must follow,
and then calling that code in certain places. The control is shifted away from your own written code and given over to
the framework. On the other hand, using a library still leaves the control with you and your code. A library just gives you
extra "vocabulary" to use within your code. Essentially, you've just given yourself nicer tools to work with than just
vanilla JS.
One of the major reasons to use a framework is because it lets us keep the DOM and the data in sync. When they are separated our code has to be much longer and more complex to keep everything in sync. When done this way, it also makes things more fragile. When we can define the UI in one go, and not have to update both the data and then the DOM with each action, it makes everything cleaner, succint, and efficient.
Components are similar to the classes we have been making so far in our projects. They are comprised of JS, HTML, and CSS all bundled up into a clean package using React's framework. These components are very insulated and modular because all of their needed detail is contained either within the component itself or it is passed to it by a parent component.
Props are the data that is passed to a child component from a parent component. If you have a multiple components that share a common parent, the parent would manage the state and pass the needed portions of it down to the children as props. Props can only be passed down to children, not up to parents.
State is a built in component object that allows it to create and manage its own data. It can be updated using setState(). Any time there is a change in a component's state, the DOM is immediately re-rendered. State can be used in both class and functional components.
If you have a multi component hierarchy that uses a common parent element to handle state and children elements that may need to influence the state in any way, you can pass data down to them via props and return that data with an action performed on it back up. Specifically, this could be a parent element that holds a function to add data to its state. The child element could be passed that function as a prop and the child element could use it to perform the "action" of adding data to the parent's state.