What is a "data model", and how does it relate to the DOM in a front-end application?
- A data model is a instrument that holds and organizes all of your data and holds the state your our app. When building an app you want to keep your data contained in one model. If you need something to change you want to make sure that the change only needs to happen in one place. The DOM is an interface for HTML that allows us to use JS to maneuver the elements on a page. It is formatted in a way where we are able to interact with those elements using JS. The DOM is created when the browesr interprets our HTML and is a representation of what exists in the HTML. It is a visual representation of our app and important to building functionality on the page. Everything we see on the DOM is backed up by some piece of data in our data model. It is vital to not store your data on the DOM because what the DOM displays should be based off of your data model.
What is a "framework?" And how does it differ from a "library?"
- Let us begin with what is true about both a framework and a library: both are reusable code written by someone else. Outside of that, frameworks and libraries are very different. A framework often has many rules only allowing you to do certain kinds of things and most often used when a new project is initiated. It can be very restrictive and provides a standard way to build and deploy applications. When you use a framework it is in charge of the flow and will tell a developer what they need. It will generate a bunch of code and for the most part you will not touch that code. Ultimately, your code plugs into a framework. On the other hand, a library has less rules and more freedom. It's main purpose is to solve a specific problem or add a specific feature to your program. When you use a library you are in charge of the flow of the application. A library doesn't tell the developer what they need, rather, the programmer calls the library when and where they need it. Here a library will plug into your code. React is considered a JS library.
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
- There are many reasons to consider using a framework over vanilla JS. There are many things that you manually do in vanilla JS that a computer could easily take care of for you. A framework easily handles all the DOM transitions. The biggest benefit is keeping UI in sync with the state. When building an app, keeping the UI in sync with the state can prove to be difficult. Every time you change the state you need to update the UI. If any small error is made the UI will be out of sync from the data. The ability to implement user interfaces that are guaranteed to be in sync with the internal state of an app is invaluable. The framework automatically updates the UI after the state changes. It is impossible to write complex, effective and easy to maintain UIs with vanilla JS. This is the main reason you should use a modern JS framwork.
What is a "component" in React? Why is it useful to have components?
- Components are considered the core building blocks of React that relay what we want to see on the screen all the while making reusable pieces of HTML. They are a collection of HTML, CSS, JS and some data specific to that component and can either be function or class components. This data is recieved either from a components parent components or is contained in the component itself. If we wanted to use any part of the parent components data in the child components we would pass that data to the child component as an attribute. Components take in parameters called props and return React elements that are rendered on the screen. They are able to have nested components inside of them. Every component is required to have a render method which describes the UI for our component. They are useful because they allow you to split the UI into independent, reusable pieces, and think about each piece in isolation. It is important to remember that component names should always start with a capital letter. In structure each file should contain one React component where the file name should be exactly the name of your component.
What is JSX?
- JSX is a technology that was introduced by React that allows us to write HTML like syntax. It is eventually converted into JS objects and produces React elements. Note that React does not require using JSX, however it is helpful in allowing React show more useful error messages and makes syntax much less complicated. Babel, a JS compiler, compiles JSX down to React.createElement calls. After compliling, JSX expressions become regular JS function calls and evaluate to JS objects. When using JSX syntax you are writing a declarative syntax of what a component UI should be. You must transpile in order for the browser to execute JS files that contain JSX code. Transpilers are are tools that read source code from one programming language and produce the equivalent code in a different language. JSX will accept any type of JS code mixed into it as long as you remember to put it inside curly braces. You must close all tags, use camelCase for attributes, and when assigining a class you must use className instead of class since Class is a reserved word in JS. JSX changes CSS styling as well from strings to objects. When dealing with components and elements, JSX knows the difference between the two based on capitalization. A componenet will be capitalized, while an element will be lowercase.
What are React "props?"
- In React, props are object arguments that a component accepts which stand for properties and are a major part of what allows the React component structure to work. They are used to pass data from a parent component to a child component as the main way for components to talk with eachother. Data coming from a parent component should not be changed by a child component. We can use dot notation to access the data in the prop and then render it.
What is React "state?"
- Components can create and manage, but not pass, their own data with state. They can also pass state down to any child components if desired. Inside of the parent component is where the state of data for both the parent component and child component live. State is used for managing data and is always owned by a specific component. Any data or UI attained from that state can only affect components below them. State data can be modified by its own component, but it is private, meaning it cannot be accessed from the outside, and is fully controlled by the component. The only component that it is accessible to is the one that owns and sets it. When you want to modify state you want to use the setState method. When state changes, React is informed and instantly renders again to the component with the updated state. Components can be considered either stateful, meaning class based, or stateless meaning function based. If your app is not using hooks then state can only be used in class components. It is important to be aware of certain guidelines when working with the setState method: do not modify state directly, state updates may be async, and state updates are merged. Finally remember that state can affect the performance of your app so don't use it without purpose.
What does "data down, actions up" mean in React?
- "Data down, actions up" refers to a design pattern used in React. You have a Higher-Order Component, which is a component that wraps another component adding more funtionality or additional properties, which then accepts data in props and passes that data down to nested components. To interact with the component, user actions cause the component to respond to that exchange by releasing events. It will trigger an event in the opposite direction of how the data was passed. Those events are then passed up to the parent component where the parent component releases an additional action that changes the applications state.