JS411 — Class 6

1. Discuss in words something you learned in class today or this week.

This week I learned about Material UI. It is a library of components that you can pull into your project that include styling and the ability to add needed functionality. To use it, you can pull it into your project using npm and then import components into your project files. It can give your app a streamlined and cohesive look. It also speeds up development time since you are not creating these components from scratch.

2. What is render() in React? Explain its purpose.

The render function in React, renders HTML to the web page. It is not called by the user. Instead React will call it when the component is first mounted or when there is a change to state within the component. It returns JSX which is later translated to HTML. It is a pure function and it’s immutable so it should not have anything within it that can change the state of the application. If it changed the state of the application it would trigger the render method to run again and could potentially send your app into an infinite loop.

3. Is setState() async?

Yes, setState() is async. Multiple setState calls are batched before a component is re-rendered and the new state is set. It doesn’t immediately mutate the state, it creates a pending state transaction. Usually the state is actually set on the next render. You can use a callback as a second argument in the setState function to process some logic once the state has been updated. Otherwise, you would want to add additional logic that depends on the updated state in another render.

4. What are controlled components?

In HTML form elements like the input, select and textarea control their own state depending on what the user inputs. In React, state is kept in a state property within the component and updated with setState(). If a component renders a form element and controls what happens after user input, it is a controlled component. The input value is driven by React state.

5. Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework?

6. Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?

7. What is the event loop in JavaScript?

The event loop monitors the call stack and the callback queue. If the call stack is empty it will take the first event from the queue and push it to the call stack. This will then run the event.

8. Why does ReactJS use className over class attribute?

Class is a keyword in Javascript and since React components return JSX instead of HTML, you can’t use class as an attribute. Instead className is used and when JSX is translated to HTML it renders the className as the HTML elements class attribute.