A data model is the one source of truth for a particular application. A data model can take the shape of an array, an object, etc. A data model relates to the DOM in a front-end application by the DOM components being contrived from the underlying data model.
A framework is a "collection" of pre-written code that helps developers avoid having to write routine lines of code over and over. A framework essentially makes writing code much more quickly and efficient due to the developer being able to use a provided template that does not need to be repeatedly re-written.
The difference between a "framework" and a "library" is that a framework is more widespread when using on an application. A framework has certain rules and restrictions that a developer must abide by. A libraray in its simplest terms can be a function or group of functions that may help with a particular feature of your program
Using a framework makes manipulating the DOM much more efficient and easier. Using vanilla JS to update the DOM is very tedious and often leands to typos or errors. A framework allows us access to the virtual DOM and a much easier process and cleaner syntax to update the DOM.
The virtual DOM used with React is a JS object which is a DOM structure copy. By using an object, DOM manipulation is much faster than accessing the DOM directly.
Components are reusable pieces of code that represent templates for a particular instance of a UI element. React componenents serve the same purpose as JS functions, only they also return HTML.
Components can come in two types, function and class. One of the most useful features of using React components is being able to pass through 'props' as a parameter which can then be used in your HTML elements within the function component.
JSX stands for JavaScript XML and is used in React to more easily write HTML and JS together. JavaScript XML allows us to write HTML in React by converting HTML tags into React elements. When a developer writes code in JSX, it is converted into JS through the use of 'Babel' which compiles the code into a format that browsers support. Using JSX is not required, but makes creating React applications much easier.
Props is short for the word properties and represent arguments passed into React components. Props are comparable to HTML attributes, where HTML elements have attributes, React components have props. Props are used to pass data from one component to another, which allows your code to be DRYer and avoids duplication of code.
A React 'state' is an object in React where we can store data that will impact the rendering of our components. State is similar to props except that state can be changed throughout user interaction with our app whereas props should not be changed.
Data down refers to the passing of information and data from a parent component to a child component. This passing of information is typically done via props and once a prop has been received by a child from the parent component, the related data can be rendered to the DOM.
Action up refers to sending data back up to the parent component, from the child. Typically, this data is sent using a callback function of some sort. The callback function will often be attached to a React event such as an onClick attached to a button element.