Pre Work - Mod 3

gistfile1.txt

What is a "data model", and how does it relate to the DOM in a front-end application?
When you’re using an application, even a small one, you’re likely interacting with some kind of underlying Data Model. It’s the
source of truth about what you’re looking at and  is what holds onto the state of our application !
You can think of it as a single source of truth for what should display on the page, and if we want to make changes or update our 
DOM we need to start from our data model due to is our sources of true !

What is a "framework?" And how does it differ from a "library?"
Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less time. Nevertheless,
there are difference between them and a good example to understand this difference is with using the analogy of two types of music genres:
"Jazz vs Classic" - Both genres are beatiful an have their own rules and teory to make it sounds according to the genre, but in
the case of Jazz Music you have a lead music sheet which only suggest a way to play a song, and that sheet offers certain chords,
tempo, notes and harmony but is up to you how you would play that song, in this case, the jazz lead music sheat would be a library,
while a framework could be compared with a classic music piece (song), which the music sheet has much more rules and you need to follow
properly to make a good performan e of that piece, which in this case could be seen as a framework, that has a set of rules of 
instructions and rules to make sound that song in the proper way !

Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
Even though the frameworks give us a lot of benefits over vanillas JS such as:
- They are based on components;
- They have a strong community;
- They have plenty of third party libraries to deal with things;
- They have useful third party components;
- They have browser extensions that help debugging things;
- They are good for doing single page applications.
Those are not the main reason why we should consider use framework for our app development, the main reason is: 
It's not possible to write complex, efficient and easy to maintain UIs with Vanilla JavaScript, so we will have tyo use 
frameworks such as react, vue and others to keep the UI in sync with the state in a easiest and maintainable way.

What is a "component" in React? Why is it useful to have components?
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in 
isolation and return HTML via a render() function.
I like to think of React components as empandas of the web. They have everything you need, wrapped in a delicious mass of code.
These components are defined either in pure JavaScript or they can be defined in what the React team calls “JSX”.
Also an interesting fact about components, is that they pass trough three life cycles:
- componentDidMount — Fired after the component mounted
- componentWillUnmount — Fired before the component will unmount
- getDerivedStateFromProps - Fired when the component mounts and whenever the props change.

What is JSX?
JSX allows us to write HTML like syntax which (eventually) gets transformed to lightweight JavaScript objects. But what looks 
like HTML, is actually syntactic sugar for defining components and their positioning inside the markup.
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. 
It also allows React to show more useful error and warning messages.

What are React "props?"
The data which is passed to the child componentfrom the parent component. If you have a multi component hierarchy, a common 
parent component should manage the state and pass it down to its children components via props. So with this system our React 
architecture to stay pretty straight forward. Handle state in the highest most parent component which needs to use the specific
data, and if you have a child component that also needs that data, pass that data down as props. 
Besides, React categorize props in two different ways:
- prop-types — Allows you to control the presence, or types ofcertain props passed to the child component.
- defaultProps — Allows you to set default props for your component.

What is React "state?"
This term can be related with the "data model" that we talked at the beggin of this questions, and basically the "state or data"
is our data model for each component that will hold all the informationn that we would like to display on the DOM.
Each component has the ability to manage its own state and pass its state down to child components if needed.  In other words, if you
have a multi component hierarchy, a common parent component should manage the state and pass it down to its children components 
via props, as we mentioned previously.

What does "data down, actions up" mean in React?
This phrase is related with the data model concept that we talked early, because before to move up with other action in our app
we always need to be sure to use the proper and update data model to manipulate our DOM.