MOD 3 Pre-Work

Mod3PW.md

MOD 3 Pre-Work

Instructional Deliverables

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

• The data model is what holds the state of our application. It is the single source of truth for an application. The DOM is the visual representation of our application. We use the data model to determine what is displayed on the DOM. If a user interacts with the DOM, there should likely be an update to the data model as a result of that interaction.

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

• A framework is a supporting structure of code where the "meat" of it is your own code that "fills in the blanks" of the provided structure. Frameworks are more dependent on rules than libraries. Frameworks also call upon your code, as opposed to libraries which you call upon when building your code. One analogy to help understand the difference between libraries and frameworks is that libraries are like a set of tools. You can use those tools to build a chair or work on a car or build a house. A framework is like the basic framing for the house. It provides the basic structure to build the house and you fill in the empty spaces with your own preferences, in this case, code.

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

• One reason is that it is difficult to write complex, efficient and easy to maintain UIs in vanilla JS and the use of a framework with help with keeping the UI in sync with the state.

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

• Components are the building blocks of React. It is a bundled section of code that contains some internal data. They are similar to widgets or modules. They can have hierarchical parent/child relationships. They are useful for building UIs because they either contain data themselves or recieve data from their parent component.

What is JSX?

• A syntax extension used in React that allows us to write HTML like syntax which gets transformed into lightweight JS objects.

What are React "props?"

• The data which is passed from the parent component to the child component.

What is React "state?"

• The internal data store of a component.

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

• "Data down" refers to the ability of a parent component to pass data to a child component. For example, a function may be passed from parent to child so it can be used by the child. "Action up" refers to the passing of information back up to the parent from the child when that function (that was originally passed down) is utilized.