What is a "data model", and how does it relate to the DOM in a front-end application?
The data model is the architecture of your application that stores all of the core information needed for the application. It is often manipulated and changed and is then used to display HTML on the DOM for users to view. The data model is the "source of truth" where updates to core information unrelated to the visual display are kept, whereas the DOM is simply where that information is displayed, not where it is updated or manipulated.
What is a "framework?" And how does it differ from a "library?" A library is a collection of functions that are packaged together and allow you to accomplish some specific useful tasks. You can call these functions whenever you like within your code. A framework is a collection of libraries that provide developers with pre-written code that makes accomplishing certain routine programming features and tasks much easier. Unlike a library, a framework has many more rules that you are bound to, and the framework itself calls your code.
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
Using a framework allows you to build applications more quickly, debug code more easily, and use pre-written code to handle common issues and tasks. It also helps you keep the UI in sync with the state, meaning that you can more easily make sure the DOM is displaying the correct information at all times.
What is a "component" in React? Why is it useful to have components?
In React, a component is like a building block that can be re-used within a program. In actuality, it is a Javascript class or function that can accept properties and then returns an element that will appear on the UI.
What is JSX?
JSX is a JavaScript rendition of HTML that allows us to write HTML elements in our JavaScript that will later be compiled into plain JavaScript. The React library enables us to use JSX.
What are React "props?"
React "props" are properties that are passed from a parent component to one of its child componenets. They allow data to be passed between components in the form of an object. Props are immutable, meaning they cannot be changed.
What is React "state?"
A React "state" is an object in a componenet that stores data representing the state of an application. State can be changed based on user interactions, and the component on the UI is then re-rendered to display the new state.
What does "data down, actions up" mean in React?
"Data down, actions up" refers to uni-directional flow of data, and describes the process of passing data down from a parent component that "owns" the data down to its child component. While the child component now has access to this data, it cannot modify it. Instead, it can trigger an action that is then passed back up to the parent component to make the changes needed to the data. This action is handled upstream rather than in the child component where the data is rendered, and then the component is re-rendered with the modifications.