ReactJS Flashcards
What is the Virtual DOM?
The virtual DOM is a programming concept where a “virtual” representation of a UI is kept in memory and synced with the “real” DOM using a library such as ReactDOM. This process is called reconciliation.
What is ReactDOM?
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. The package provides developers with an API containing methods such as render() and findDOMNode() and is the glue between React and the DOM.
How do you convert a function to a React class is ES6?
Create a class by extending React.Component(), adding a single method to it called render, and return a React/HTML element.
How do you add a local state to a React class?
To add a local state to a class, add a class constructor that will assign the initial this.state(). Then you can access the state values by using this.state.
What are the three main lifecycle methods that are run when a component is initially mounted?
constructor(), render(), and componentDidMount().
What are the three main lifecycle methods that are run when a component is updated?
shouldComponentUpdate(), render() and componentDidUpdate().
What is the lifecycle method that is called when a component is being removed from the DOM?
componentWillUnmount().
What are hooks and what are the benefits of using them?
React hooks are an addition of React 16.8 and let you use a local state without creating a class.
What is the use of super(props) in react classes?
super(props) is called in the constructor of react classes and refers to the parent constructor, specifically the React.Component class. This allows the subclass to access methods of the parent class.
How does React work?
React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the real DOM using DOM manipulation with the results of diff.
What is JSX and what does it stand for?
JSX stands for JavaScript XML and is an extension that makes it easer to read and write HTML in react.
What are the benefits of using JSX?
Because after compilation, JSX become become regular javascript objects. This means you can use JSX inside if statements, in loops, assign it to variables, accept it as arguments and return it from functions.
What is the name of the transpiler that convert JSX to javascript objects.
Babel is the transpiler that convert JSX to javascript objects.
What are the two ways you can create classes in React?
By extending React.component and using Reacts createClass().
What is the difference between a class component and a functional component?
Class components allows us to use additional features such as local state and lifecycle hooks. In comparison, when our component just receives props and renders them to the page, this is a ‘stateless component’, for which a pure function can be used.
What is a redux?
The idea of redux is that the entire application state is kept in a single store, of which is simply a javascript object. The only what to change to state would be to to fire actions from the application and write reducers for these action that in turn modify the state.
What is the difference between React.Component and React.PureComponent?
Although both Component and PureComponent allow you to create react classes, PureComponent handles the shouldComponentUpdate lifecycle method for us. When props or state changes, PureComponent will do a shallow comparison on both those variables and will re-render by default whenever shouldComponentUpdate() is called.
What are controlled and uncontrolled components?
A controlled component is one that takes its current value through props and notifies changes through callbacks like onChange(). A parent component is essentially controlling the values of the components props. In comparison, an uncontrolled component is one that stores its own state internally.
