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.
