Mod3 prework, deliverables, and React notes

M3-prework.md

Mod 3 Prework and Deliverables

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

• The data model is the "single source of truth" as it were, and is where all data pertaining to an application is stored. Typically it is stored as an object containing data about the subject of the application. The DOM, of Document Object Model, is a representation of the framework of an application, that is interpretted by a web browser. I think of it as a carbon copy of the the HTML.

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

• Analogy: A framework is like a record player (or CD or cassette player) and the libraries are the records (or CD/cassette).
• Library: Provides set of rules and 'preloaded' function that can be imported into a project and used in conjunction with vanilla JS and other libraries. Example: You could be using React and also import lodash to use lodash-specific functions.
• Framework: Similar to a library, but with tighter restrictions. Has 'preloaded' functions, but only works with its framework specific libraries.

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

• Faster UI. Modular components make it easier to reuse code. React reacts to user events and only updates the DOM where it is changed.

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

• Modular piece of reusable code that represents a piece of the UI. I think of it as a widget or building block.

What is JSX?

• Javascript representation of HTML, but it is not Javascript, or HTML.

What are React "props?"

• The properties that are being passed into a component when it is instantiated. Can be used in function or class based components. Immutable.

What is React "state?"

• The data the a component maintains, similar to props, only they are not immutable, and can be declared in the component from the get go. They can only be used in class based components, as they require a constructor method to be set. They are an object within the constructor.

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

• I am not sure, but I would assume it implies data being collected by parent components, and logic happening with child components.

Notes:

• className like classList is a native JS DOM API property. JSX requires className because it is JS...
• "JSX Land" is anything inside element tags. Does not behave like JS || HTML. ie. style={{color: "black"}} && dashes become camelCase
• JS within JSX has to be within {curly braces}.
• Self closing tags (img, input, br) have to contain "/".

• xX🔥XxLIFECYCLESxX🔥Xx

• componentDidMount for API calls. Only updates when component is mounted.
• UNSAFEcomponentWillReceiveProps() will update any time a parent component is updated. Usually paired with conditional. Deprecated. DO NOT USE!!!
• shouldComponentUpdate(nextProps, nextState) determines whether or not a component should be updated.
• compnonentWillUnmount() teardown/cleanup code before component disappears... NEED MORE RESEARCH...

• xX🔥XxPROJECTSxX🔥Xx

• To Do List project
• Star Wars project