Skip to content

Instantly share code, notes, and snippets.

@mattdeann
Created January 29, 2021 20:45
Show Gist options
  • Save mattdeann/fabe3d746001895d3c7cca7fdbec0c4c to your computer and use it in GitHub Desktop.
Save mattdeann/fabe3d746001895d3c7cca7fdbec0c4c to your computer and use it in GitHub Desktop.
What is a "data model", and how does it relate to the DOM in a front-end application?
The "data model" is where data being used to render an application is stored. This differs from the DOM, as the DOM is the actaul rendering of this data in the window (or wherever the app is being run). In other words, the data model is like a DVD, where as the DOM represents the DVD case to tell you what the inner contents of the DVD are.
What is a "framework?" And how does it differ from a "library?"
A library is a collection of code that has been created to help make a programming language more efficient. It is often the case that a library is eventually adopted by the language if it is deemed universally applicable. This differs from a framework, which provides a set of rules and expectations as to how the language is used inside the framework. Since one is forced into the frameworks procedures, it provides a lot of "magic" for the programmer. This "magic" usually pertains to a flaw in a language that the framework helps solve. In the case of React, React is fantastic at helping manage the relationship between the data model and DOM without using a lot of very repetitive, heavy lines of code (think AJAX requests and other async functions)
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
To expand on the above, a framework in regards to vanilla JS makes the management of state much more intuitive. Vanilla JS requires the manual manipulation of each event, and very distinct patterns of logic in order to make sure what is being displayed and what is being returned into the data model constantly match. JS frameworks are mostly centered around this inconvenience, making use of components in order to properly delegate events in an extremely timely manner.
What is a "component" in React? Why is it useful to have components?
A component in React is a collection of code centered around one piece of an application. This allows for data and DOM logic to be wrapped in the same element, instead of having to spead it out over HTML and JS files (React does this, but using JSX the lines between them become blurred). This becomes extremely useful as data is able to be passed down from parent to child easily, and because of this the manipulation of data / DOM are intuitively combined.
What is JSX?
JSX (JavaScript XML) is the language React utilizes to interpolate JavaScript into HTML without having to use query selectors and things like document.createElement in order for JS to interact with the DOM.
What are React "props?"
"props" stands for properties in React, and are where data is contained that can be passed from parent to child and vice versa.
What is React "state?"
State in React is how one is able to maintain consistency amongst the onslaught of user events. Instead of tracking down exactly where each event needs to be delegated, React enables us to refer to the parents "state" as a source of truth.
What does "data down, actions up" mean in React?
Data is stored in a parent or grandparent, and is handed down to the children for rendering. Actions are recieved by the children, and the event is then delegated to change the accurate piece of data in the parent.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment