- What is a "framework?" And how does it differ from a "library?"
Both a framework and a library are collections of code written by someone else. A library is a collection of class definitions that can be implemented into your code without having to rewrite them each time. A framework is a more complicated skeleton with specific places for a developer to write functionality. With a library, the user calls the code and has much more control over the rules that must be followed. In a framework, the framework calls your code and there are more strict rules that you must follow to have the code function correctly.
- Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
The main benefit of using a framework (or a library) is code reusability. It can be time-consuming and error-prone to rewrite the same functions over and over again. Frameworks provide a tested and predictable structure on which developers can build their apps. Frameworks provide a constistent UI and have base styling for elements like buttons and forms. This can help a developer get something visible on the page, and if a developer has limited design abilities it can help them move on to other issues. Having a stable and consistent environment to build can help a developer gain momentum which can be carried into different aspects of developement.
- What is a "component" in React? Why is it useful to have components?
A component is an isolated and reusable section of an application's UI. Components return React elements which provide the UI by taking in inputs called "props." Functional components (because they are functions) can be written as functions or as ES6 classes. When a component is rendered it can contain standard DOM tags or user-defined declarations. For user-defined declarations React will pass JSX elements to the component as a single object. This object is the element's "props."
- What is JSX?
JSX is an extension for JavaScript that allows preprocessors to turn HTML-looking text into JavaScript objects. JSX is great because it allows you to basically write chunks of HTML, and JavaScript will treat it like a regular JavaScript object. We can use JSX to render React components onto the DOM. We can also use JSX to pass data to child components through "props."
- What are React "props?"
React "props" are variables passed by React to a child component from a parent component. Props are passed as a single object when a user-defined component is declared. Props are passed into components like an argument, and allow components to access the passed-in data. They are written in JSX in a similar syntax to HTML attributes. Props are read-only, which is a benefit because their immutability allows us to use and manipulate the props object without changing the original data.
- What is React "state?"
"State" is an object that is built into React components by default. Property values associated with the component are stored in the state object. If the property values change the component will rerender, so by calling the built-in method "setState()" on a component, we can cause the DOM to update. State should be as simple as possible, and you should try to have only as many stateful components as necessary. The "state" object is entirely initialized and managed by the component, unlike "props" which are variables that are passed into a child component from a parent component.
- What does "data down, actions up" mean in React? One of the reasons we would use React is for encapsulation, which means keeping our components as isolated as possible. A good rule of thumb to ensure this is the case is to not access a components state from anywhere outside of that component, as "state" is meant to be private to the component itself. Props should only be used to pass "data down" from a parent component to a child component. When you want to pass data from a child component up to a parent, you need to call a specific method on the parent component to update the parent component's state. In an IdeaBox, there may be a method on the main App component to add an idea to your list of ideas (which would be stored in the App component's state.) You would need to pass that method down to the child component Form (as "props") and then have Form call the addIdea method when an event occurs (in this case submitting the form.) This then sends the "actions up" from the child component Form to the parent component App.