Mod 3 Prework Questions

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

A 'framework' defines your application design, and is basically a different way to organize your code. Different frameworks have different control flows. Many popular frameworks seperate code out into many different units to make code more maintainable and reusable. This differs from a library in that when using a library, you are utilizing the unique syntax of that library, but that syntax calls functions written JS or whatever language you are working with. For example, the $ in jQuery really just represents a manually written document.querySelector in Vanilla JS.

Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?

Frameworks allow for greater efficiency. Not just efficiency in UX and how code gets processed on a site, but also efficiency in workflow. Code is more modular, reusable, maintainable, and easier to navigate. This is especially helpful in professional settings when you will likely be diving into codebases you have not written. Being able to dive into code seperated out into many different components rather than a few very long files makes working on others code much easier.

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

A component is basically like a module of code. They represent every area of a webpage, or every function used on a webpage. Compontents are helpful in increasing code readability and maintainability. You can edit one component and feel safe in knowing that this component is likely not coupled with anything else, so changing one area of code is less likely to cause a bug or break your application.

What are React "props?"

Every component has 'props' which are essentially an object. For example, if you create a component, you can give it a 'name' property and access it in the component definition using this.props.name. As of now, I have seen examples where you have a ReactDOM.render method injecting the components along with the definitions of their properties, ex <Header /> <Greeting name = "Miles Garrith Johnson Jr. IV" />

Or you can also define the props in the class definition above the classes render method.

What is React "state?"

'State' refers to the status of the properties an a certain component. For example, if you had a page that organizes your photos, and each photo has an option to favorite that photo, the state would be changed when you click on that favorite button.

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

Sending data down to child elements and having actions on the child elements change state.