mod3PreWork.md

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

• A "data model" is made up of most of the JavaScript functionality in an application/program that doesn't have to do with visually rendering things on a page. That is the job of the DOM, or Document Object Model. The data model is represented by classes and their respective state/behavior, and is essentially all of the data, logic and functionality that remains behind the scenes. The data model should not contain any DOM logic; no querySelectors, eventListeners, injectable HTML, or anything that will visually update/alter the page. To use an analogy, if a program or application were a theater production, the data model would be all of the tech work and setup and rehearsal that goes into preparing a production: building sets, calibrating lights, microphones, costume design, rehearsing with scripts, marking the staging/choreography etc. The DOM would be everything on stage that happens during the performance: Actors in costume portraying characters without scripts, tech crew changing sets between scenes, the operation of lights and sound, and the stage manager telling people where to be, what to do, and when.

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

• A framework is a pre-written body of code that is intended to format the code-writing process in a specific way, by setting up a consistent structure, and providing programming capabilities unique to that framework. A Library is also a pre-written body of code, but the intention is to use code from the library to assist with a specific instances. for example, the JavaScript Math library provides methods that we can use to quickly accomplish more complicated and specific math-oriented tasks, in whatever way we see fit to assist with our program. A framework like React JS on the other hand, is a whole system of structure and function that we incorporate into our program that dictates how the program works as a whole, and gives us the ability to use the unique capabilities that React provides. A framework is setup to follow a more strict and consistent format, where a library is able to be used more free-form, in whatever way you wish to apply it.

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

• Perhaps the biggest reason to use a framework over vanilla JS is that frameworks like React JS help keep the UI in-sync with the state, or the DOM in-sync with the data model in a way that is fast, efficient, modular, maintainable, and elegant. Frameworks are setup to detect when there has been a change in the state (data-model) of our application and automatically re-render the UI (DOM) to accurately reflect those changes. It also helps us as developers bundle our html, JS, and some styling together to help manage more complex applications, and be more concise about how we accomplish tasks. Frameworks are expecially useful in terms of making sure that complex applications are easy to understand and navigate

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

• Components are the building blocks of the React framework. They are essentially JavaScript classes or functions that can hold data (state) and have methods on them (behavior) as well as inheriting data and methods from parent components. They will typically return a React element to be rendered to the UI and reflect changes made to the data-model (state) of an application. Components are useful because of their modularity, and because of how they make maintaining and changing a complex codebase much easier to manage.

What is JSX?

• JSX is essentially a hybrid 'pseudo-language' that allows us to create html elements inside of our JS, so that we can incorporate JS features like variables and functions to make the html dynamic and responsive to a user's interactions. React allows developers to write html as JSX inside of methods on components, that when called will compile to classic html and be rendered to the DOM tree as new elements. This is how React keeps the UI in sync with the state; when changes are detected, the appropriate methods are called and the html elements we have written as JSX are rendered to the page to reflect the changes.

What are React "props?"

• props are shared state (data) that can be easily passed around the components in a program as parameters. Props are how React makes components dynamic and customizable, allowing you to pass properties from the props object into your JSX to be rendered. Props are passed from a parent component to a child component as variables and can also allow child components to access methods of the parent component. Using props helps to keep components DRY, and helps centralize where state and behavior are being stored in a React application.

What is React "state?"

• state is data stored in an object inside of a component that is locally accessible to that component's behavior. State can be inherited by child components, and can be passed between components as props. State keeps track of the parts of a React component that can be changed by the user's interaction with the application. When changes are made to a component's state, the changes are compared to the last 'snapshot' of the virtual DOM, and are rendered to the page to reflect those changes.

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

• data down is the process of sharing state through passing props from a parent component to a child component. actions up describes a child component notifying its parent of a change that has happened and the action that will be taken. The child determines the action by invoking a method that has been passed down, but the parent decides how that action is handled.