What is React?
Answer: React is a front-end JavaScript library (framework), which was developed and introduced by Facebook back in 2011 and open-sourced in 2015. React follows the component-based approach which helps in building reusable UI components. React is used for building user interfaces specifically for single page applications.
What are the core React features?
Answer: React uses Virtual DOM instead of Real DOM, supports server-side rendering, uses reusable (or composable) UI components to develop the view, and follows undirectional data flow (or data binding)
What are the differences between Real DOM and Virtual DOM? Explain how Virtual DOM actually works.
Answer: The differences are in updates: while Real DOM updates slowly, Virtual DOM updates much faster; Real DOM can directly update HTML, and Virtual DOM can’t. If element updates, Real DOM creates a new DOM, whereas Virtual DOM updates only the JSX. Another difference is in the manipulation: Real DOM manipulation is very expensive, whereas Virtual DOM manipulation is easy. There’s also too much memory wastage in Real as opposed to Virtual DOM.
Virtual DOM, originally, is like a copy of a Real DOM: it’s the node tree listing all the elements, attributes, and content as Objects and their properties. Render function creates a node tree out of the React components, then updates the tree according to mutations in the data model made by the user or by the system. There are three simple steps how the Virtual DOM works: whenever the data changes, the entire UI is re-rendered in Virtual DOM, then the difference between the previous DOM and the new DOM, and as soon as the calculations are over, the DOM will be updated only with things that have been changed.
What are the main advantages and limitations of React?
Answer: Among the major advantages of React are the increase of performance of an application, the possibility of use both on client- and server-side, the fantastic readability of code (thanks to JSX), the ease of integration with other frameworks like Angular and Meteor, as well as the ease of writing UI test cases. The disadvantages are primarily related to React being a library rather than a full-fledged framework, the difficulty of understanding for novices and sometimes the complex coding.
What are the differences between React and Angular?
Answer: The main difference lies in the architecture of those two: while React is only the View of the MVC, Angular is the complete MVC. Also, while React has a server-side rendering, Angular is a client-side rendering. Angular uses Real DOM whereas React uses Virtual DOM. Angular has two-way data binding, and React only one-way. In React there’s also compile-time debugging versus runtime debugging in Angular.
What is JSX?
Answer: JSX is JavaScript XML, an XML-like extension to ECMAScript. What it does is that it provides syntactic sugar the React.createElement() function. For example, <h1> here returns to the render function:
class App extends React.Component {
render() {
return(
<div>
<h1>{'Welcome!'}</h1>
</div>
)
}
}
What are the differences between React’s ES6 syntax and ES5?
Answer:
In case you’re interested in JavaScript ES6 and beyond, please check the article at the bottom of the page here: {JavaScript Landing Page}.
Some of the major changes:
-- Require and import
// ES5
var React = require('react');
// ES6
import React from 'react';
-- Export and exports
// ES5 module.exports = Component; // ES6 export default Component;
-- Component and function
// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello!</h3>
;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello!</h3>
;
}
}
-- Props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>
;
}
});
// ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>
;
}
}
-- State
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>
;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>
;
}
}
What are React components?
Answer: Components are building blocks of a React application’s UI. The entire UI is split into small independent and reusable pieces. They are independent of each other UI without affecting the rest of the UI.
How can you embed two or more components into one?
Answer:
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
What is a state in React and how it’s used?
Answer: States are the heart of React components, which means they are the objects that determine the rendering and behavior of components. Unlike the props they are mutable and create dynamic and interactive components. You can access them to buy this.state().
What is an arrow function in React?
Answer: Arrow functions are a brief way to describe a function expression, which is extremely useful when working with the higher order functions. Arrow functions allow binding the context of the components because in ES6 auto binding is not available.
Example:
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}
What are the differences between stateful and stateless components?
Answer: Stateful components have the authority to change the state, while stateless components don't have such an authority. Stateful component stores information about the component’s state change in memory and stateless calculates the internal state of the components. Stateless components also contain no knowledge of the past, current, and future state changes, but stateful does contain it. Stateless components receive props from the stateful components and treat them as callback functions.
What are the differences between controlled and uncontrolled components?
Answer: Controlled components do not maintain their own state as opposed to uncontrolled. Data is controlled by the parent component in controlled components, and data is controlled by the DOM in uncontrolled ones. To get current values of uncontrolled components you need to use refs; in controlled components, the current values are taken through props, and changes are notified via callbacks.
What are the lifecycle methods of React components?
Answer: Most important lifecycles are (React 16.3+):
- getDerivedStateFromProps: Invoked right before calling render() and on every render. This exists for rare use cases where you need a derived state.
- componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
- shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
- getSnapshotBeforeUpdate: Executed right before the rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
- componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
- componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
What is an event in React and how you can create one?
Answer: Events are actions triggered by something like mouse hover, click, etc. Handling events such as these is similar to handling events in DOM elements; however, there are syntactical differences, like events are named using camel case (not lower case), and events are passed as functions instead of strings. The event argument contains properties that are specific to that event. Each event type contains its properties and behavior that’s only accessible through its event handler.
What is Redux?
Answer: Redux is a predictable state container for JS apps based on the Flux design pattern. Redux can be used together with any View library, including React. Redux has no dependencies and is very small in size.
What are the Redux components?
Answer:
Action – an object that describes what happened.
Reducer – a place to determine how the state will change.
Store – saves a State/Object tree of the entire application.
View – displays the data provided by the Store.
What are the differences between Redux and Flux?
Answer: in Flux, the Store contains both state and change logic, while in Redux, Store and change logic are separate. In Redux there’s only one Store, and in Flux there are multiple. Moreover, all the stores in Flux are disconnected and flat, whereas in Redux there’s a single store with hierarchical reducers. Flux has singleton dispatcher, while Redux doesn’t have such a concept. React components subscribe to the store in Flux, and in Redux container components utilize connect. State is immutable in React and state is mutable in Flux.
What is a React Router?
Answer: React Router is a routing library built on top of React, which helps you add new screens and flows to your app quickly meanwhile keeping the URL in sync with what's being displayed on a page.
What are the differences between React Router and conventional routing?
Answer: in conventional routing, each view corresponds to a new file; in React routing, however, only single HTML page is involved. Also, in conventional routing, an HTTP request is sent to a server and corresponding HTML page is received, and in React routing only History attribute is changed. The user navigates across different pages for each view in conventional routing. In React routing, the user thinks he is navigating, but in fact, he is not.
What are React Hooks and what rules should you follow when using them?
Answer: React Hooks are a new feature that lets you use state and other features without writing a class. You need to call Hooks only at the top level of your React functions (no calling in loops, conditions, nested functions). Call Hooks from React functions, as opposed to regular JavaScript functions.
Practice
1. Change the code using arrow functions
class ClickButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Answer
class ClickButton extends React.Component {
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;
}
}
=============
2. Fix the reducer
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
state.push({
text: action.text,
completed: false
})
return state
case 'COMPLETE_TODO':
state[action.index].completed = true
return state
default:
return state
}
}
Answer
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return { ...todo, completed: true }
}
return todo
})
default:
return state
}
}
=============
3. Change the code using controlled components
class Form extends React.Component {
handleSubmitClick = () => {
console.log(this._value.value);
}
render() {
return (
<div>
<input type="text" ref={input => this._value = input} />
<button onClick={this.handleSubmitClick}>Submit</button>
</div>
);
}
}
Answer
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
}
handleNameChange = (event) => {
this.setState({ name: event.target.value });
};
handleSubmitClick = (event) => {
console.log(this.state.value);
event.preventDefault();
}
render() {
return (
<div>
<input
type="text"
value={this.state.value}
onChange={this.handleNameChange}
/>
<button onClick={this.handleSubmitClick}>Submit</button>
</div>
);
}
}
=============
4. Create a component with a button that will show and hide text by clicking
class ToggleButton extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
handleToggleClick() {
this.setState(state => ({
show: !state.show
}));
}
render() {
return (
<div>
<button onClick={() => this.handleToggleClick()}>
{this.state.show ? 'Hide' : 'Show'}
</button>
{ this.state.show && ' Some text' }
</div>
);
}
}
=============
5. Refactor the clock application.
function tick() {
const element = (
<h2>It is {new Date().toLocaleTimeString()}.</h2>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
Answer
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return <h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
Perhaps, you’ll also like the following articles:
