Mod 3 Pre-Work

Mod3Prep.md

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

Data Model

• What holds onto the state of the application.
• Single source of truth for what should display on the page.

Document Object Model (DOM)

• Everything seen on the DOM is backed up by some piece within the data model.
• It is a programming interface for HTML documents that acts as the visual representation of the application.
• Represents the document as nodes and objects which allows programming languages to connect with the page.

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

Frameworks

• More rules === more restrictive (?)
• Calls on the application code.
• Used in the code to do much of the routine maintenance work (such as updating the DOM).

Library

• Less rules === more freedom (?)
• Consist of functions that an application can call on to perform a task.
• Set of features that can be used in your code, but doesnt necessarily replace/upgrade much.

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

• Easy creation of dynamic applications.
• Faster loading websites.
• Improved performance (via the Virtual DOM).
• Reusable components.

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

• One of the core building blocks of React.
• Can contain a state, data, props.
• Components allow you to split the user interface(UI) into independent, reusable pieces.
• Allows data to be abstracted into seperate objects and pass down only what that object needs.

Class Components:

• (Basically ES6 classes)
• Name should always start with a capital letter.
• Optionally receive props (which should never be modified) as input & renders JSX.
• Can maintain internal state of a particular component.
• The performance difference (between class & functional components) increases when the number of components in the app increase.

Functional Components:

• (like JavaScript functions)
• much easier to create & uses less lines of code than class components
• this.state doesn’t need to be written everywhere in the app
• do not need to bind functions to the class with functional components
• (React <16.8) functional components should be used when the component simply receives props & renders something & does NOT have its own state.
• (React 16.8) functional components can hold state using React hooks

What is JSX?

• A syntax extension to JavaScript that allows XML/HTML-like text to co-exist with JavaScript/React code.
• The HTML-like text found in JavaScript files are converted into standard JavaScript objects (that can be parsed by the JavaScript engine).
• JSX optimizes when it is covered into regular JS (making it faster than normal JS).
• React component allows for both markup & logic to be kept together in one file using JSX.
• Because JSX is closer to JavaScript than to HTML, the React DOM uses camelCase attribute naming (e.g. tabindex becomes tabIndex; class becomes className).
• By default, React DOM escapes any values embedded in JSX before rendering them. Everything is converted to a string before being rendered which, in turn, prevents cross-site-scripting (XSS attacks).

What are React "props?"

• Props are short for property. They are attributes to be added onto and accessed by a component.
• They can be passed from the parent component to the child component.
• Useful for sharing data or methods.
• propTypes allow you to control the presence, or types, of certain props passed to the child component.
• defaultProps allow you to set/specifiy default (or backup) values for cetain props (in case those props are never passed into the component).

What is React "state?"

• The internal data store (object) of a component.
• constructor (this.state) is the way in which you establish the initial state of a component.
• setState is a helper method used for updating the state of a component and re-rendering the UI.

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

Data Down, Actions Up steps:

1. Data is stored in the tippy top parent component.
2. And is passed down through children components.
3. When an action happens (i.e. press of a button) the component for that button manages being pressed.
4. Then sends what it needs to upwards towards the tippy top parent component. (could be some piece of data, like an input value).
5. The tippy top parent can then adjust its state and data accordingly.

• i believe all of this involves re-rendering(?) the virtual DOM to the actual DOM

Additional Notes:

Framework:

• provides a standard way to build and deploy applications.
• a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate development of software applications, products and solutions.
• provide powerful ways to write our code, but at the same time, they prescribe a very strict and specific way for us to organize our code.

Library:

• provide us with abstractions over complex code that we would otherwise have to write ourselves. (ex. jQuery.)
• Libraries are usually ‘syntactic sugar’ over something difficult.

React

• a declarative, efficient, & flexible JavaScript framework for building user interfaces (UI).
• lets you compose complex UIs from small & isolated pieces of code called components.
• components tell React what we want to see on the screen --> when our data changes, React will efficient update & re-render our components. As a result, React allows us to ensure our application UI is displaying all the correct information at any given time, no matter how frequently it changes.
• Summary: React is a client-side JavaScript framework that allows you to easily & efficiently manipulate the DOM based on application data (e.g. user profiles, their posts, comments, etc) & how it changes in response to user interaction.

React.Component subclasses (aka React component class/type)

• the way in which you create a new component.
• takes in parameters (called props) --> returns a hierarchy of views to display via the render method
• props are pieces of data that are passed from the parent component to the child component.

render() method

• every component requires this.
• returns a description of what you want to see on the screen.
• React takes the description & displays the results
• In short, react returns a React element for the particular component, which is a lightweight description of what to render.

JSX

• allows us to write HTML-like syntax which gets transformed to lightweight JavaScript objects.
• most React developers use a special syntax (called JSX) which makes these React elements(?) easier to write.
• for example, the <div /> syntax is transformed at build time to React.createElement('div')
• WebPack converts JSX into JavaScript & HTML.