Skip to content

Instantly share code, notes, and snippets.

@PaigeVannelli
Last active March 18, 2021 22:20
Show Gist options
  • Save PaigeVannelli/96fa01b9b5afe2792ff531bab356053a to your computer and use it in GitHub Desktop.
Save PaigeVannelli/96fa01b9b5afe2792ff531bab356053a to your computer and use it in GitHub Desktop.
What is a "data model", and how does it relate to the DOM in a front-end application?
- the data model holds the state of the application, which is basically all the up to date information for your application. It's the most accurate information that should be displayed on the DOM. The DOM is the visual representation of the code. The DOM should be a respresentation of what's in the data model. In vanilla JS it's easier for these things to get out of sync, which is something react helps tackle by allowing is to update components (smaller parts of the application) based on what's currently in the data model.
What is a "framework?" And how does it differ from a "library?"
- A Library has less rules associated with it. You are able to call the funcions anywhere in your code. A Framework has more rules and is actually calling the code for you instead of you calling it directly. For exampe, React is a framework and there are specifric rules and ways you need to use React. It also does a lot of work under the hood for you. A library is much more flexible on how you impliment it.
Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
- Frameworks offer a lot of things that vanilla JS doesn't. There's a lot going on behind the scene so you can do a lot more with less work. It helps you keep your program more organized as well. For exmaples, React is split up into components and is easier to follow then an app in vanilla JS. One of the main reason to use one like React is because it helps keep things in sync with state. It makes it a lot easier to keep the data in sync with what's being diplays on the DOM.
What is a "component" in React? Why is it useful to have components?
- A component is a building blocks of React. A component is a module made of up html css and js with some of it's own internal data. It's either a functional component or a class component. Components allow you to update only parts of the page as the data is updated. Instead of having reload the entire page it allows you to reload just the part of the page you need to update. It also helps keep things organized in your code. Components should be spit up into different files that have clear names and are easy to find. They are also reusable pieces of code and are easier to debug and find where errors are.
What is JSX?
- It's a syntax extension to JS that is often used with react. It allows you to create html component but your data in them can be interpreted by JS. It allows html-like text to coexist with JS logic. Usually the logic is denoted by {}.
What are React "props?"
- Short for properties, props are information that is stored in components and can be passed down from parent components to child components. Any component can inherit props if handed down. If using class components props for example can be stored in the class constructor. Props can only be passed from parent component to a child component also known as the 'data down' part of React.
What is React "state?"
- State is the internal data of a component stored in an object. State can change depending on how your data changes. State is tied to the DOM and intelligently refreshes when the state changes.
What does "data down, actions up" mean in React?
- Data or props can only travel one way, from parent to child components, which is the 'data down' part of the process. This data is passed down as props. This child components are the components changing the data and those changes are sent back up to the parent components, which is the actions up part of the process. The action should be the lowest level component possible. It happens in the smaller component but affect a higher level component. For example a button click that submits data would happen in the smaller level component and would change a higher level component.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment