A framework has more rules and conventions to follow than a library. It may require you to name files a certain way. A framework also differs from a library in that it calls your code. A library on the other hand is something that we can call from our code at anytime. For example, we can call the jQuery library at any point we need it.
As we begin to write more complex applications it is not possible to maintain User Interface with vanilla javascript alone. To quote the article by Alberto Gimeno, "It is not possible to write complex, efficient and easy maintain UIs with Vanilla JavaScript." Alberto states that the main reason to use a framework is because "Keeping the UI in sync with state is hard." In addtion frameworks offer: A virtual DOM, solutions for common problems, and included functionality.
Compenents are the building blocks of React. A component is a collection of HTML, CSS, JavaScript and some internal data specific to that component. They are standalone and independent parts of an application that are responsible for handling only a single UI element. They have the structore of an ES6 class and use the constructor and super keywords.
Props are the data which is passed to the child component from the parent component. Shorthand for properties. Props is an object that is given from it's parent component down to the child component. Props should remain immutable. With React we can handle state in the highest coponent which needs to use the specific data and then pass it down as props to any child component that also needs the data. Constructor(props) { super(props) }. If you need to manipulate data outside where the data lives, you can pass the method into the component as props.
State is the internal data store of a component. It is an object. State holds data that represents the actual state of an application. State can be changed and mutated through user interactions. Each component has the ability to manage its own state and pass ts state down to child components if needed. If you have a multi component hierarchy, a common parent component should manage the state and pass it down to its children components (via props). State is declared as part of the constructor method... this.state = {}. The component can modify its internal state with the setState method.
Methods can be passed down through props. This would happen if you need to manipulate data outside of where the data/state was declared. The method would ber passed down, "data down", and then the parent component is notified of the change (actions up). My understanding is that a functional component could receive a method from a class component, call that method and then the class component could change its state, etc.