What is a "data model", and how does it relate to the DOM in a front-end application?
A data model represents the core functionality of an application that can stand on its own and manipulate all data correctly by manually invoking functions, methods etc on the console. The Document Object Model is a web browsers construction of the applications source code from the server - it provides an interface for a user to interact with the data model. The DOM should update based on data returned from the data model but the data model should never modify the DOM directly.
What is a "framework?" And how does it differ from a “library?"
A framework can sometimes be described as a collection of libraries, but not necessarily. The key difference between a library and a framework is restrictiveness. Libraries have less rules and give the developer more freedom to make changes. Frameworks have more rules and are more restrictive. Typically a library provides access to a collection of code segments, functions etc that can be called directly from your own codebase whenever you choose. A framework meanwhile is less direct - calling your code first then followed by a library
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
“The biggest, by far, improvement these frameworks provide is having the ability to implement UIs that are guaranteed to be in sync with the internal state of the application.”
If I’m understanding this correctly, this means that frameworks like React can help ensure that the UI always reflects the most up-to-date data from the server, which is pretty exciting. This was a frustrating issue I was running into with the last project of Mod 2, where the list of bookings on a user account would not always update to reflect newly added or deleted bookings because of asynchronous JavaScript. I’ve struggled to understand how to maintain a controlled environment when different functions are running asynchronously and it’s impossible to guarantee one will execute at the right time. It seems like React provides an easy solution to this issue?
What is a "component" in React? Why is it useful to have components?
In previous mods we’ve used npm packages (also called modules) which are essentially reusable segments of code that provide some commonly-needed functionality. Rather than writing these basic functions themselves, developers can simply install and and import the packages as dependencies. It seems like React components are similar to these modules, but slightly more complex. A React component includes not just JavaScript but also HTML, CSS and other data as well, and these components provide you with reusable functionality so you don’t have to reinvent the wheel. They also probably help keep your codebase more organized, uniform and consistent.
What is JSX?
Kind of like JSON in the sense that it’s a unique syntax or notation that can be parsed or translated into good ol fashioned JavaScript. JSX is used to define/write these React components.
What are React “props?"
“The data which is passed to the child component from the parent component.” In the last mod we learned that JavaScript objects can inherit properties and methods from an overarching parent class. React components are just “lightweight” JavaScript objects defined using JSX - so they can also inherit properties or methods from a parent object. In this case, the inherited properties and methods are referred to as props.
What is React “state?"
“The internal data store (object) of a component.” State refers to the data within a JavaScript object which is often changed by interaction from the user. React is useful because a single parent object can easily adjust the state of all of its children, thus providing much greater modularity and efficiency in the codebase.
What does "data down, actions up" mean in React?
Data (props) is passed down from parent components to child components. Actions, ie changes resulting from user interaction with the UI, are passed up from child components to their parents. This is a best practice for class hierarchy when using React.