JS411 — Class 2
1. Discuss in words something you learned in class today or this week.
One thing I learned in class this week that I thought was really interesting, was the ability to pass methods to child components via props. I knew you could pass values but I didn’t know you could pass methods. I also learned how to properly set or update state using the setState method.
2. Why/when would you use a class-based component vs a functional component? What are the differences? What new alternatives are there?
Usually you would use a class-based component if your component has state. If it doesn’t then a functional component would be used. Class-based components require a constructor method whereas functional components don’t. With newer Javascript components are starting to lean towards always using functional components instead of class-based regardless of whether or not state is used or not.
3. What is create-react-app? Dig into this.
Create-react-app is a way to create single page React applications. This command sets up a development environment that allows you to use the latest Javascript features, makes your application easier to build and optimizes it for production.
4. What is JSX?
JSX is a syntax extension for Javascript and creates React elements. You can embed Javascript within JSX which allows you to keep logic and markup in the same file. It also prevents injection attacks by escaping any values before rendering them. Everything is converted to a string before it is rendered.
5. How does React work? From entry point to last child component? How?
The entry point of React is the root of the app where it is mounted to the DOM. Child components are created and branched from the entry point. In the child component you would export it so that it can be imported in the parent. You can pass state, methods or other values from parent components to child components via props. You can’t pass them back up though. Instead if you need to update state in a parent component, you would first pass a method from the parent to the child. Then you would call that method in the child which in turn would update the parents state.
6. How does the virtual DOM work in React? Explain in detail.
The virtual DOM is a copy of the original DOM kept in memory. It is synced with the original DOM using libraries. When there is an update to the virtual DOM, React compares what is in it to what is in the original DOM. Once it figures out which nodes need updated it updates the original DOM with the updated DOM nodes from the virtual DOM. This process makes it possible to re-render parts of a page without refreshing and re-rendering the entire page. Instead, only the nodes that were changed will re-render making it faster and more efficient.
7. Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework?
8. What’s the difference between a React Element and a React Component?
A React Component is a function or class that returns a React Element. A React element is an object that describes a DOM node and it’s attributes or properties. An element can be created using JSX.
