ND_Mod_3_Prework.md

1. What is a "data model", and how does it relate to the DOM in a front-end application?

• A data model should be the source of truth. Any data that is being update, created or deleted should be first passed through the data model and then displayed on the page. When you have multiple components trying to manipulate data on their own without a source of truth it can be a large balancing act and can get out of control and tedious very quickly. The data model hosts and then shares all of the information that should be displayed to the user, this way it keeps everything in sync and up to date.

2. What is a "framework?" And how does it differ from a "library?"

• A framework is give us powerful ways to write code that follows a strict set of rules to use properly. A library is more of an abstraction that helps us write something easier, such as moment.js helping us format and read time in a cleaner format as opposed to having to play with JS Date objects which can be confusing at time.

3. Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?

• A framework can help make things that have been tedious much easier. They can also allow us to build powerful programs that can be compiled into vanilla JS to be displayed to the user like we had originally intended to build it that way. In React's example, it allows us to write HTMl and JS (JSX) all at the same time in one component and keep our code module and encapsulated. This makes DOM manipulation much easier than controlling it all manually through vanilla JS.

4. What is a "component" in React? Why is it useful to have components?

• A component is an encapsulation of code that has the structure and functionality of piece of a puzzle. For example, if you build a news feed, normally you would have to build the HTML structure, then get the data, then build it out in JS and then display it to the user. Potentially, there will be 2 - 4 files minimum in this example! Components means that we build all of it into one file. The HTML, data, JS and structure can all be incorporated into this one component and returned. It is responsible for one thing and one thing only, the news feed and that is all. If something breaks in the news feed or a new feature has to be added, you don't have to search through a huge JS file to debug it. You simple look at the news feed component. It keeps everything regarding one thing encapsulated and together within itself.

5. What is JSX?

• A mix of JavaScript and XML that allows us to write JavaScript and HTMl into the same file. The compiler, webpack, will read the JSX and transform it into their separate languages to be used properly. This allows us to build components together with both structure and functionality as opposed to separating them by language and having to target them individually.

6. What are React "props?"

• Props allow us to pass information from parent components to child components. This way, we can make components reusable while keeping the data dynamic that is being passed through it.

7. What is React "state?"

• State holds the actual data that represents the actual state of our application. State can be changed and is mutable through user interaction.

8. What does "data down, actions up" mean in React?

• We only want the data to be used one way, and that way is down. This way, the parent controls all of the data that is displayed below the child components below it. This prevents multiple objects trying to control data and means that it is coming from one source which is the source of truth. Actions up means that when something has been executed inside of React, (ex: a form was submitted), the form will let the parent know that something was triggered with it, so React knows to update anything related to that element (the form) without everything else having to be touched. This allows for only objects that have been interacted with being re-rendered rather than multiple elements on the DOM and saves a lot of time and processing power.