What is a "data model", and how does it relate to the DOM in a front-end application?
The data model, is the state of the data that is being stored. For instance in an e-commerce-site the checkout bag is filled with items, somewhere behind the scenes in javascript that data is being stored. The data-model relates to the DOM in a front-end application, because the DOM should be dependent on the data-model and use that to display items, prices, quantities, and descriptions to the User. Additionally, sometimes the user will be interacting with the dom and as a result the data model should update a shopping cart of items, for instance. The data-model essentially becomes the state of truth and the DOM depends on the data-model to portray an accurate representation of the data. Issues can arise when the DOM & Data-Model are not in sync and nasty bugs can occur. An example of this is how movies were stored inside of the state of our app in my Rancid Tomatillos project. The Movies, Cards, and Details components used the data that was retrieved from the fetch calls and stored in state. Updating state, becomes very important, because the DOM and react render() use the state to keep the DOM up to date.
What is a "framework?" And how does it differ from a "library?"
A framework is set of code that gives you a structure and allows you to avoid writing boiler plate code. It simplifies writing out all the code, by giving you an outline and allowing you as the developer to fill in the details of how something should specifically act. A library is a little bit different, because it's like a collection of books or functions that someone else wrote that you can import and use in your own code to help speed up development or avoid re-inventing the wheel. In general, they both promote speeding up the development process. However, frameworks are stand alone and generally are more robust. They can incorporate or use libraries. Additionally, in front-end development frameworks are often, helpful for updating the DOM. A library can be quickly and easily used for validating a user's email, for instance.
The main difference between a framework and a library comes down to control of flow. A framework calls to your code and uses
previously establised rules to run your code. A library is a previously established set of code that you call to when building your code.
The framework is like a county inspector that comes by to make sure you followed all the zoning regulations, if so it will validate your house, your code, and your permit and let you live in the house. And when you don't follow the rules it will make you rebuild the broken portion of your house, to match the specifications of the framework of your building (in our case a particular app).
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
I would say frameworks can allow us to speed up our development, they can allow us to focus our attention to adding more features, they can reduce bugs in logic between maintaining the difference between application state and the DOM. And in the case of react they allow us to compartmentalize the logic for our application which can be helpful in development. Now that we know how to program, we can focus on making better applications and reduce the amount of time spent on boiler-plate or making sure that state and DOM match up. Frameworks help us to do this.
What is a "component" in React? Why is it useful to have components?
A component in react is a small chunk of code that basically takes care of state and dom display. It is useful to have components, because they force us to think about application one step at a time. This type of development can be helpful when trying to flush out a user-story and making sure that a user can do certain things when interacting with our app.
Additionally, A component simplifies rendering, because it can contain state, data, & props. Components are useful because they allow us to abstract data & logic into separate objects and just pass on what the object needs (modularity).
It's also important to note the difference between class-based components and functional components.
What is JSX?
JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which are can be helpful when building large applications.
JSX is easier to read and write over large pyramids of JavaScript function calls or object literals. Additionally the React team believes JSX is better suited for defining UI's than a traditional templating. Basically it allows us to use the power of JavaScript to store data and state, while giving us the ease and simplicity of simple to understand HTML-like format.
JSX is is the HTML-like syntax we see inserted in our React components. It gets transformed into lightweight JavaScripts
objects.
So JSX, is like a templating language that gives us the power of utilizing javascript and the organizational structure and syntax of html. When the JSX code is read, it is parsed into lightweight Javascript objects, and that is what gives us the power of Javascript to store data & state, while letting us use an intuitive html-like templating format.
What are React "props?"
React props are the like the properties of a specific component. Here is an analogy: Imagine you're in your room — that's our component. The room has a closet (state) where you can put whatever you want, e.g. some sweater or blanket (objects), some money (other data types like integer), but there's also a switch that switches on and off the light in your room (boolean). Now, imagine that you take the blanket out of the closet and bring it to the sofa — you have just passed the props! The blanket is the prop from your room to its child, the sofa.
Props (properties) are the data (state) that gets transferred to the children components of the parent component. This gets passed into the child component as an object. The child component can access that object's properties, giving it access to methods and state from the parent component.
What is React "state?"
State is the state of the website. Is there a drop-down open, is the website in light-mode or dark-mode. In the previous example is the room clean or dirty. Is the light on or off? It's basically the state of the website and that's a reflection of the updated data-model which is great, because in react the state and DOM are coupled and that makes our job as front-end developers a lot easier.
What does "data down, actions up" mean in React?
Data down, refers to the passing of data and/or functions via props from parent to child components. These props are passed down when a child component gets created. We pass data down to child components so they can render them on to the DOM.
Actions up, refers to sending data back up to the parent from the child component with the help of some action or event. These actions are connected to a callback function of some type in the parent component.