A framework is the structure in which your code is organized. Frameworks provide specific places to insert specific code and differ from libraries in that they have more rules associated with them. A library is a set of code that can be used anywhere in the existing code and typically offers its own unique syntax, separate from that of the language in which the code is written. An example of a framework would be mocha. There is a certain structure that you must follow in order to properly execute tests in mocha. An example of a library would be chai, which can run on the mocha framework. Chai has a specific syntax that you must follow in order for your tests to run properly.
Frameworks offer structure and organization that you would otherwise have to create from scratch. When remodeling a kitchen, you wouldn't want to tear down the entire house and rebuild it from scratch. Rather, you would want to use the existing structure and find a way to place the parts you want inside of it. Of course when you have all the money in the world this isn't an issue. In the case of our analogy, money is like time. We could use vanilla JS if we have a lot of time and don't mind the inefficiency but this isn't typically the case. In short, frameworks save us time and provide us with a structure to build off of.
Components are the building blocks of React. They are reusable bits of code that return a rendered HTML element and operate like functions, accepting props as arguments. Components can either be functional or class based and hold the code necessary for rendering on the page. They are useful because you can use them repeatedly and you can think about the emelents on the page in isolation. In React, all components must act like pure functions when it comes to its props. That is, a component should not mutate any of its inputs.
JSX is an HTML-like syntax that gets transformed into lightweight JS objects. This transformation is made possible by the use of a transpiler, or source-to-source compiler. In our case, Babel is the built in transpiler found in React. JSX is powerful because we can manipulate these HTML-like objects with our JS code.
Props (short for properties) are the pieces of data that you would want to pass from one component to another. The only catch with these bad boys is: props can only be passed in one direction, from parent to child. If a component is nested within another the child component can receive data from its parent, but not the other way around. This is helpful because a child may need information from its parent, but a parent rarely needs information from its child.
State is a built in object on React components. This stores the property values of the component. Components re-render when a value within the state object changes. Unlike props, state can be lifted up from a child component to its parent. There are times in which you want a parent componenet's data to reflect changes made in the child component. This is when we would want to 'lift up' the state.
This phrase basically talks about the direction in which props (data) and state (actions) are passed between components. Parent components pass data to their children. The children do what they want with the data and send the actions back up to the parent so the parent can include the changes in its render.