jkw-mod3-prework.md

Instructional Deliverables (Due Last Friday 5pm of Intermission Week)

Create a GitHub gist to answer these questions in as much detail as possible. Imagine someone is asking these questions in an interview (these are popular interview questions).

• What is a "data model", and how does it relate to the DOM in a front-end application?
  • A data model is a representation of a data structure. It situates the data with how it relates to different elements of itself. In frond-end app development, the DOM is a data model that represents the information rendered to a user of our applications. It's what allows us to manipulate the contents/elements on our page. It's necessary to be able to keep the DOM up to date with our data, so it benefits us to have an efficient way to update our DOM.
• What is a "framework?" And how does it differ from a "library?"
  • Both frameworks and libraries are collections of code designed to make our jobs easier as developers. However, they have some key distinctions. A framework (like Express, Django, Angular, or Rails) provides a scaffold for a developer to build upon. Frameworks call on your code, which act as the real substance for the application. A library (like expect) is a collection of code that developers can use like tools to build their code. Frameworks have more rules & call on your code, whereas libraries have fewer rules and are called upon by your code.
• Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
  • With vanilla JS, is that it's really challenging to keep the UI in sync with the state. In my final project evaluation for The Overlook, I complained that my biggest weakness in terms of user experience was that a user of my application couldn't visualize any of the changes they were making on the page in real time (such as booking a room as a customer, or deleting a booking as a manager). Using JS frameworks (like React, Angular, and Vue.js) allows your application to detect changes that should be updated on the DOM & renders an updated view for the user.
• What is a "component" in React? Why is it useful to have components?
  • Components are the building blocks of React- they are bundles of HTML, CSS, JS, and specific data. Components are useful for building interfaces as they allow us to utilize parent/child hierarchies between components to know where my data. This makes it much easier to modify the UI in the places we want it to- and not manipulate data where we shouldn't be.
• What is JSX?
  • High level: allows us to writeHTML like syntax which gets transformed into lightweight Javascript objects.
  • JSX is a JavaScript Extension that can be used in tandem with React. It allows us to write HTML-esque syntax, which gets transformed into JavaScript objects. Through this process, React constructs a "virtual DOM," used to compare against the actual DOM, to update changes in real time to a user. Whenever a user interacts with our app, and some data changes, React is able to compare all of these objects and know exactly where to update the UI.
• What are React "props?"
  • High level: the data which is passed to the child component from the parent component.
  • React "props" are used to pass data from parent components to child components. Because of the hierarchical nature of components, you can define/handle state in the most parent component. Then, all of it's children will have access to that data. If you want to retrieve this data from the parent component, you call this.props in the child component as necessary.
• What is React "state?"
  • High level: the internal data store (object) of a component
  • A React "state" is an object that contains the data relevant to a particular component. If the component is a parent to any child components, they are able to inherit the data from the parent component. Additionally, any component has the ability to modify it's own state- using the method setState. setState sends a signal to our app notifying some data change. This initiates the virtual DOM to re-render, then the diff algorithm, and our real DOM is updated with the necessary changes.
• What does "data down, actions up" mean in React?
  • React really shines when you can leverage the hierarchical nature of components. Data Down, Actions Up refers to a design paradigm that describes these relationships. Specifically, data down refers to the process of a parent/higher-order component passing data (via props) to it's child components. This data is stored in the parent's state: this.state = { //some data }. As users engage with our apps, they click on buttons, fill in forms, and trigger other events- Actions Up refers to the process of a child component signaling to the parent component. The parent component modifies it's own state to reflect the user's input.

• Before the due date, send a link to your gist to both of your instructors.