- A "framework" is essentially a set of rules that define how code within it will behave. A library is more like the code that is actually used. In other words we may use a specific library to write code, and call on particular library features to accomplish certain novel tasks. Ultimately, however, it will be the framework that decides how the code is interpreted and thus executed.
- When it comes to creating web apps on vanilla JS it is difficult to join our data state with the DOM/UI. It takes careful planning and a decent understanding on when/where your data state changes and where the dom should interject to capture such changes in state. For these reason, it can be difficult for others to come in and debug your code. Enter frameworks, where for a few added rules and changes in syntax (use of a library) we are able to streamline changes in the data state with those in the DOM. This creates a more fluid UI client side and increases maintainability developer side.
- Components are the building blocks of React. They are a way to bundle together a segement of HTML, CSS, and JS into a Class-like syntax (using jsx) that will contain logic and interactions within it. Components allow developers to compartmentalize segments of a web application, making code easier to develop and maintain by a number of developers.
- JSX was created alongside React. It extends traditional JS syntax in a way that allows us to more easily integrate the DOM with our component's state. It looks a lot like HTML and JS put together, but it's actually more a hybrid of Javascript and XML (Extensible Markup Language, a sibling to HTML of sorts). In React apps, a compiler (most often, babel) will read all the JSX is our components at run/build time and turn it to good 'ol JS for our browsers.
- "Props" is short for properties. React "props" are a helpful way to relate "state" from a parent componenet to any of its children components, most commonly, but not exclusively, a functional components.
- React state is a wonderful thing :) It's exclusive to class components, and it's a way to keep track of app relevant data. React seems to be structured around larger class components that make use of smaller functional components to compartmentalize UI features. It's segments of state (only those needed, which is nice) that are passed down as props to other components.
- It's a phrase that helps synthesize the idea of React "state" and "props", or rather how to make best use of these concepts when building a react app. "Data down" means our app data should flow downwards from an HOC ('higher-order component'), essentially our larger class components, to smaller components that make use of this state. Inversely, "actions up" means that this data should be acted upon by smaller children components (functional, usually) and the resulting "action" should move upward to the relevant parent component.