Data Model is the piece of data that defines the status of the code itself and should be protected as the source of truth. Our DOM should reflect our DataModel all the time.
Library: It is a collection of code that can be used over and over to write code, usually function or methods belonging to a library can be called anywhere in our code, thus making our code less bounded to the rules on “how to write the code using a library”. I like to think of a library as pieces of code I can call whenever and have a little bit more freedom when creating a feature for web applications. Framework: it is a collection of defined rules on which we build code, we can also make use of the defined methods or functions over and over. However, frameworks are bound to a more strict set of rules such as requiring specific pieces of data to work properly. An example of this is that frameworks required the developers to make use of the correct naming convention when invoking pieces of code such as functions. I like to think of frameworks as the building blocks predetermined by a blueprint and asking me to follow the instructions set by the document.
I think they are many advantages of making use of frameworks in our applications for reusability and speeding up the process of writing code.
A component in react is a piece of code that can be reused to create multiple JSX elements that when compiled they render HTML elements on the DOM. Components come in two flavors, functional components and class react components. No matter what components we are creating they both make use of the render method that returns JSX code. What is JSX? JSX is a JS pseudolanguage that allows writing code that looks like HTML but that is in fact javascript
React ‘props’ are properties been passed from parents to children in a way that resembles HTML attributes, we usually name the prop the same as the prop value. Props are objects that when received by the child it cab be destructure for better readability.
React states are the source of truth of a class component since functional components are considered stateless components. The state is the source of truth that should not change as the user interacts with the applications, rather we make a shallow copy with the setState() that re-renders the component when invokes, usually with an eventListener such as onChange.
It is the action on which the parent passes information to the child as props, this props can be states or methods. Onan example, when the submit button requires to modify the state with the setState, the action of the child when clicked is registered by the parent because the methods leave at the parent level. So the process of adding and registering the information lives in the parent, the child is the one that triggers the data flow.