A gist for my Mod 3 pre-work to give to instructors and for personal reference.

mod-3-pre-work.md

Mod 3 Pre-Work

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 content and relationships between that content within an application. This holds the state and should be thought of as the single source of truth for what should display. The DOM, or document object model is the visual representation of our applications.

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

A framework is a bunch of code components that you can use to build common elements over and over again, however there are rules and guides for how those code components should be used together. Whereas a Library is also a group of useful code components, but there are fewer restrictions and guidelines. You can pretty much do what you want with a library, but not with a framework.

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

Because this can speed up development time and help track the state of your application to keep up with the users.

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

Components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. They can be defined as classes or as functions.

What is JSX?

JSX stands for JavaScript XML and it is a syntax extension to JS. With React it is used to describe what the UI should look like.

What are React "props"?

This stands for properties and they are passed into each function. Each class or function should not edit their props as that would be considered an "impure" function.

What is React "state"?

"State is similar to props, but it is private and fully controlled by the component." I understand state to be how the application updates. So if a component is submitted or clicked or deleted that changes the state and the display needs to go through recalibration and update the DOM.

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

This is referring to the component hierarchy within React, where the child elements receive data and then notify their parent elements with actions up. It reminds me of event bubbling.

• Another reason we should consider using a framework is that other developers coming onto the project will have a similar set of conventions to follow for how we go about building out new features.
• Good definition of what a component is, but why are they useful? One thing to consider here is code reusability. If I have a component that is going to be appearing many times on a page, I don't want to have to write all the code to make each individual element.
• JSX stands for JavaScript and XML. A subtle but important distinction.
• Props are passed to components, from other components, and are immutable.
• State is an object that lives inside an individual component.

The feedback above is aimed at helping you hone in your understanding of React. There is no need to resubmit, and the feedback doesn’t represent anything wrong; think of it as a reminder to help you keep your language and questions specific as you begin to practice and speak about React. Let me know if you have any questions!