Mod3-intermission-work.md

Mod 3 Intermission Work

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

To understand one of these terms, you need to learn about the other in tandem!

Essentially when you are using a library, you have more freedom to use the given tools as you please. Whereas a framework more often dictates the code that you write and how you use it.

Libraries have less rules, and frameworks have more rules.

Whenever you have the power to call the code whenever you like, that is probably a library. In a framework, the framework calls your code, and that code MAY be calling a library, but not always.

Finding out who calls who is usually a good indicator of whether you are working with a framework or a library.

Why should we consider using a framework over vanilla JavaScript like we have been doing in Mods 1 & 2?

The primary reason as to why we would want to use a framework, like React, over using vanilla JS is because frameworks like React do a really good job of keeping track of data changes and modifying the DOM seamlessly as needed.

By keeping the UI in sync with data changes while using React, you are able to reduce and simplify the code down quite a bit compared to traditional DOM manipulation methods.

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

Components are the primary building blocks of React.

Components can essentially be thought of as "widgets" or modules of page. For example, you could have a component for your entire application, the header, a UserInfo section, a NewsFeed section, and many more.

You often will see components nested inside of each other. For example, if you think about Twitter, specifically the "make a new tweet" section - there could be a component for this section. Inside of that component, there could be a component for the post button, a component for the user's icon, a component for the input field itself, etc.

Components like this can be very useful because it makes managing data significantly easier - we know where exactly the data lives for a given component and this will help limit unintentional manipulation of data.

What are React "props?"

When you have components nested inside of each other like I mentioned above, the "parent" component often holds on to all of the actual data needed for that component, and any components inside of it.

For the "child" components to gain access to this data and utilize it in their own component, it must be passed down via "props" to the child component.

In the parent component, when you place the self-closing tag of a given child component in the parent component's render method, you will define your props there. For example, if you have an overarching parent component for your application called App, in App's render method, you'd probably want to place some children in there. Let's say we have a component for a header that needs to go within App. Within the render method, you would place a self-closing tag for the header, like this: <Header />. Right inbetween the space and the slash is where you could enter in the necessary props for the header. Let's say you want to pass a name down into the header to be displayed on the DOM. The code could read like so: Header name='Collie' />. After doing this, in the Header component, you would have access to the name property.

Inside the child component, if the child component is passed an array of objects, each object representing a user (with a name, id, etc.) the child component would gain access to that data wherever needed likely by using props.users.

What is React "state?"

Parental components should manage the state of itself and the children it contains.

State holds data that represents the actual state of our application. More specifically, state contains data specific to this component that may change over time, and can be changed and mutated through user interactions.

An important thing to note is that the state of one component will often become the props of a child component. State should not be accessed from child components.

State itself is a regular JavaScript object with properties that define the pieces of data in an application that will be changing, and state is only available to CLASS components (as opposed to functional components).

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

'Data down' first of all, refers to the idea of data being pass down from parent components, to child components that need that specific data. A parent component will do this via props in the parent's render method.

This idea is similar to the idea of "lifting state up." Say you are building out an application, component by component. After building out a particular component, you may realize that there's another component that needs access to the same data. To solve this, you would "lift state up" by creating a parent component to house the necessary data. This data could be stored as "state" in the parent component, and passed down via props to the child components. However, these components do different things with the data. So the data will move down, and likely trigger differing methods inside each child component.

This then moves into the idea of "actions up" - after triggering a method in a child component, the parent's state will need to be updated! So certain actions will be called to travel back up the component tree to update the parent's state, and eventually update the DOM as needed.