3. Crazy geek

The original:

This article first send WeChat messages public number: jingchengyideng welcome attention, every day to push you fresh front-end technology articles

If you are an aspiring front-end programmer and preparing for an interview, this article is for you. This article is the perfect guide to what you need to learn and interview for React.

As JavaScript tools slowly but steadily took root in the market, the demand for React grew exponentially. Choosing the right technology to develop an app or website is becoming increasingly challenging. React is considered to be the fastest growing JavaScript framework.

As of today, there are about 1,000 contributors on GitHub. Unique features such as the Virtual DOM and reusable components capture the attention of front-end developers. Although it is only a library for “views” in MVC (Model View-Controller), it also poses a strong challenge to comprehensive frameworks such as Angular, Meteor, Vue, etc. Below are the trends in popular JS frameworks:

Trends in JS frameworks

The React interview questions

Here are 50 React interview questions and answers that interviewers are most likely to ask. For your convenience, I’ve categorized them:

  • Basic knowledge of
  • The React components
  • React Redux
  • The React routing

Basic knowledge of

1. Distinguish between Real DOM and Virtual DOM

Real DOM Virtual DOM
1. Slow updates. 1. Updates are faster.
2. You can update HTML directly. 2. Unable to update HTML directly.
3. If the element is updated, create a new DOM. 3. If the element is updated, JSX is updated.
4. DOM manipulation is expensive. 4. DOM manipulation is very simple.
5. More memory consumption. 5. Less memory consumption.

2. What is React?

  • React is a front-end JavaScript library that Facebook developed in 2011.
  • It follows a component-based approach that helps build reusable UI components.
  • It is used to develop complex and interactive Web and mobile UIs.
  • Although it was only open source in 2015, there is a large community of support.

3. What are the characteristics of React?

The main features of React are as follows:

  1. It uses the virtual DOM rather than the real DOM.
  2. It can render server-side.
  3. It follows a one-way data flow or data binding.

4. List some key benefits of React.

Some key benefits of React are:

  1. It improves application performance
  2. It can be easily used on both the client and server sides
  3. Thanks to JSX, the code is very readable
  4. React is easy to integrate with other frameworks like Meteor, Angular, etc
  5. Using React, writing UI test cases is very easy

5. Restrictions on React?

React’s limitations are as follows:

  1. React is just a library, not a complete framework
  2. Its library is huge and takes time to understand
  3. It can be difficult for a novice programmer to understand
  4. Coding is complicated because it uses inline templates and JSX

6. What is JSX?

JSX is short for J avaScript XML. React is a file that takes advantage of JavaScript expressiveness and HTML-like template syntax. This makes HTML files very easy to understand. This file makes the application very reliable and can improve its performance. Here’s an example of JSX:

render(){ return( <div> <h1> Hello World from Edureka!! </h1> </div> ); }

7. Do you know Virtual DOM? Explain how it works.

Virtual DOM is a lightweight JavaScript object that was originally just a copy of Real DOM. It is a tree of nodes that treats elements, their attributes, and content as objects and their attributes. The React rendering function creates a tree of nodes from the React component. It then updates the tree in response to changes in the data model caused by various actions performed by the user or the system.

The Virtual DOM working process has three simple steps.

  1. Whenever the underlying data changes, the entire UI is rerendered in the Virtual DOM description.

  1. The difference between the previous DOM representation and the new representation is then calculated.

  1. After the calculation is complete, the Real DOM is updated with only the actual changes.

8. Why can’t the browser read JSX?

Browsers can only process JavaScript objects and cannot read JSX in regular JavaScript objects. So in order for a browser to be able to read JSX, you first need to use a JSX converter like Babel to convert a JSX file into a JavaScript object and then pass it to the browser.

9. How does the ES6 syntax of React differ compared to ES5?

The following syntax is the difference between ES5 and ES6:

1. The require to import

// ES5
var React = require('react');
// ES6
import React from 'react';

2. The export and exports

// ES5
module.exports = Component;
// ES6
export default Component;

3. com ponent and function

// ES5
var MyComponent = React.createClass({
    render: function() {
            <h3>Hello Edureka!</h3>;
// ES6
class MyComponent extends React.Component {
    render() {
            <h3>Hello Edureka!</h3>;


// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
            <h3>Hello, {this.props.name}!</h3>;

// ES6
class App extends React.Component {
    render() {
            <h3>Hello, {this.props.name}!</h3>;


// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    render: function() {
            <h3>Hello, {this.state.name}!</h3>;

// ES6
class App extends React.Component {
    constructor() {
        this.state = { name: 'world' };
    render() {
            <h3>Hello, {this.state.name}!</h3>;

10. How is React different from Angular?

The theme React Angular
1. Architecture There’s only a View in MVC Complete the MVC
2. Apply colours to a drawing Server-side rendering is possible Client-side rendering
3. DOM The use of virtual DOM Using real DOM
4. Data binding One-way data binding Bidirectional data binding
5. Debugging Compile-time debugging Runtime debugging
6. The author Facebook Google

The React components

11. How do you understand the sentence “Everything is a component in React”?

Components are the building blocks of the React application UI. These components break up the entire UI into small, independent and reusable pieces. Each component is independent of each other without affecting the rest of the UI.

How to explain the purpose of render() in React?

Each React component enforces a render(). It returns a React element, which is a representation of the native DOM component. If you need to render multiple HTML elements, you must group them together in a single closed tag, such as



, and so on. This function must be pure, that is, it must return the same result every time it is called.

13. How do I embed two or more components into one component?

Components can be embedded in a component in the following ways:

class MyComponent extends React.Component{
class Header extends React.Component{
            <h1>Header Component</h1>   
    <MyComponent/>, document.getElementById('content')

14. What are Props?

Props is shorthand for properties in React. They are read-only components and must remain pure, that is, immutable. They are always passed from parent to child components throughout the application. A child component can never return a prop to its parent. This helps maintain a one-way data flow and is often used to render dynamically generated data.

15. What is the state in React? How is it used?

The state is the core of the React component, the source of the data, and must be as simple as possible. Basically, a state is an object that determines the rendering and behavior of a component. Unlike props, they are mutable and create dynamic and interactive components. They can be accessed via this.state().

16. Distinguish between states and props

conditions State Props
1. Receive the initial value from the parent component Yes Yes
2. The parent component can change the value No Yes
3. Set default values in the component Yes Yes
4. Changes within the component Yes No
5. Set the initial value of the child component Yes Yes
6. Changes inside a child component No Yes

17. How do I update the state of a component?

You can update the state of a component with this.setState().

class MyComponent extends React.Component {
    constructor() {
        this.state = {
            name: 'Maxx',
            id: '101'
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (              
                    <h1>Hello {this.state.name}</h1>
                    <h2>Your Id is {this.state.id}</h2>
    <MyComponent/>, document.getElementById('content')

18. What is the arrow function in React? How does it work?

The arrow function (=>) is a short syntax for writing function expressions. These functions allow the context of the component to be properly bound, because automatic binding is not available by default in ES6. The arrow function is useful when working with higher-order functions.

//General way
render() {    
        <MyInput onChange = {this.handleChange.bind(this) } />
//With Arrow Function
render() {  
        <MyInput onChange = { (e)=>this.handleOnChange(e) } />

Distinguish between stateful and stateless components.

Stateful component Stateless component
1. Stores information about component state changes in memory 1. Calculate the internal state of the component
2. The power to change status 2. You don’t have the right to change status
3. Include past, present and future possible state changes 3. Excludes possible state changes in the past, present and future
4. Accept notification of stateless component state change requirements and send props to them. 4. Receive props from stateful components and treat them as callbacks.

20. What are the phases of the React component life cycle?

There are three distinct phases in the React component life cycle:

  1. Initial Render Stage:This is the stage where the component is about to begin its life journey and enter the DOM.
  2. Update phase:Once a component is added to the DOM, it can only be updated and re-rendered when a prop or state changes. This only happens at this stage.
  3. Unloading phase:This is the final stage of the component’s life cycle, when the component is destroyed and removed from the DOM.

21. Explain the React component’s lifecycle methods in detail.

Some of the most important lifecycle approaches are:

  1. ComponentWillMount () – Executed before rendering, on both client and server sides.
  2. ComponentDidMount () – Executes on the client only after the first render.
  3. ComponentWillReceiveProps () – when the parent class receives the props and call before calling another renderer.
  4. ShouldComponentUpdate () – Returns true or false based on certain criteria. If you wish to update the component, return true otherwise return false. By default, it returns false.
  5. ComponentWillUpdate () – Called before rendering in the DOM.
  6. ComponentDidUpdate () – Called immediately after rendering occurs.
  7. ComponentWillUnmount () – Called after the component is unmounted from the DOM. Used to clear memory space.

22. What is the event in React?

In React, events are triggered reactions to specific actions such as hover, click, or keystroke. Handling these events is similar to handling events in DOM elements. But there are some grammatical differences, such as:

  1. Use hump nomenclature to name events instead of just using lowercase letters.
  2. Events are passed as functions rather than strings.

The event parameter recontains a set of event-specific properties. Each event type contains its own properties and behavior, which can only be accessed through its event handler.

23. How to create an event in React?

class Display extends React.Component({    
    show(evt) {
        // code   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            
            <div onClick={this.show}>Click Me!</div>

24. What is a composite event in React?

Synthetic events are objects that act as cross-browser wrappers around browser native events. They combine the behavior of different browsers into a single API. This is done to ensure that events display consistent properties across browsers.

25. What do you know about React’s refs?

Refs is shorthand for references in React. It is a property that helps store a reference to a specific React element or component, which is returned by the component render configuration function. A reference to a particular element or component returned by render(). They come in handy when you need to make DOM measurements or add methods to a component.

class ReferenceDemo extends React.Component{
     display() {
         const name = this.inputDemo.value;
         document.getElementById('disp').innerHTML = name;
render() {
            Name: <input type="text" ref={input => this.inputDemo = input} />
            <button name="Click" onClick={this.display}>Click</button>            
            <h2>Hello <span id="disp"></span> !!!</h2>

26. List some situations where Refs should be used.

Here are the situations where refs should be used:

  • When you need to manage focus, select text, or media playback
  • Trigger animation
  • Integration with third-party DOM libraries

27. How do I modularize code in React?

You can modularize your code using the export and import attributes. They help you write components separately in different files.

//ChildComponent.jsx export default class ChildComponent extends React.Component { render() { return( <div> <h1>This is a child component</h1> </div> ); } } //ParentComponent.jsx import ChildComponent from './childcomponent.js'; class ParentComponent extends React.Component { render() { return( <div> <App /> </div> ); }}

28. How to create a form in React

The React form is similar to an HTML form. In React, however, the state is contained in the component’s state property and can only be updated through setState(). Therefore, elements cannot update their state directly, and their submission is handled by JavaScript functions. This function has full access to the data entered into the form by the user.

handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleSubmit} /> </label> <input type="submit" value="Submit"  /> </form> ); }

29. What do you know about controlled and uncontrolled components?

The controlled components Uncontrolled component
1. You’re not maintaining yourself 1. Stay in your zone
2. Data is controlled by the parent component 2. Data is controlled by DOM
3. Get the current value through props and notify the change through callbacks 3. Refs is used to get its current value

30. What is a High Order Component (Hoc)?

High-order components, a high-level way of reusing component logic, are a component pattern derived from React. Hoc is a custom component that contains another component within it. They can accept any dynamics provided by their child components, but do not modify or copy any behavior in their input components. You can think of Hoc as a “Pure” component.

31. What can you do with HOC?

Hoc can be used for many tasks, such as:

  • Code reuse, logic, and guiding abstractions
  • Rendering hijacked
  • State abstraction and control
  • Props to control

32. What is a pure component?

Pure components are the simplest and fastest components that can be written. They can replace any component that has only render(). These components enhance code simplicity and application performance.

33. What is the importance of key in React?

The key is used to identify the unique Virtual DOM element and the corresponding data that drives the UI. They help React optimize rendering by recycling all current elements in the DOM. These keys must be unique numbers or strings, and React only reorders elements rather than renderings them. This can improve the performance of your application.

React Redux

34. What are the main problems with the MVC framework?

Here are some of the major issues with the MVC framework:

  • DOM manipulation is very expensive
  • The program runs slowly and inefficiently
  • Serious memory waste
  • Because of cyclic dependencies, component models need to be created around models and views

35. Explain Flux

Flux is an architectural pattern that enforces one-way data flow. It controls derived data and uses a central store with all data permissions to communicate between multiple components. Data updates throughout the application must only occur here. Flux provides stability for applications and reduces errors at run time.

36. What is Redux?

Redux is one of the hottest front-end development libraries today. It is a predictable state container for JavaScript programs and is used for state management throughout the application. Applications developed with Redux are easy to test, can run in different environments, and display consistent behavior.

37. What are the three principles that Redux follows?

  1. Single fact source: The state of the entire application is stored in an object/state tree in a single store. A single state tree makes it easier to track changes over time and debug or inspect applications.
  2. The state is read-only: the only way to change the state is to trigger an action. Actions are ordinary JS objects that describe changes. Just as State is the minimal representation of data, this operation is the minimal representation of changes to the data.
  3. Use pure functions to make changes: In order to specify how the state tree is transitioned through operations, you need pure functions. Pure functions are those whose return value depends only on the value of their arguments.

38. What is your understanding of “single source of fact”?

Redux uses “Store” to Store the entire state of a program in one place. So the state of all components is stored in the Store, and they receive updates from the Store itself. A single state tree makes it easier to track changes over time and debug or inspect your program.

39. List the components of Redux.

Redux consists of the following components:

  1. Action – This is an object that describes what happened.
  2. Reducer – This is a place to determine how the state will change.
  3. Store – The entire program’s state/object tree is stored in the Store.
  4. View – Displays only the data provided by the Store.

40. How does data flow through Redux?

41. How do I define Action in Redux?

Actions in React must have a type attribute that indicates the type of Action being executed. They must be defined as string constants, and you can add more attributes to them. In Redux, Actions are created with a function called Action Creators. Here are examples of Action and Action Creator:

function addTodo(text) {
       return {
                type: ADD_TODO,    

Explain the role of the Reducer.

The Reducers are pure functions that specify how the state of the application changes in response to an Action. The reducer works by accepting the previous state and action, and then it returns a new state. It determines which update needs to be performed based on the type of operation and then returns the new value. If it doesn’t need to complete the task, it returns to its original state.

43. What is the significance of Store in Redux?

Store is a JavaScript object that stores the state of a program and provides methods to access the state, schedule actions, and register listeners. An application’s entire state/object tree is kept in a single storage. As a result, Redux is very simple and predictable. We can pass middleware to the Store to process the data and record the various actions that change the state of the store. All operations return a new state through the reducer.

44. What is the difference between Redux and Flux?

Flux Redux
1. Store contains state and change logic 1. Store and change logic are separate
2. There are multiple stores 2. There is only one Store
3. All Stores are mutually exclusive and leveled 3. Single Store with a hierarchical reducer
4. Have a single scheduler 4. No concept of a scheduler
5. The React component subscribes to the Store 5. Container components are related
6. The state is variable The state is immutable

45. What are the advantages of Redux?

The advantages of Redux are as follows:

  • Predictability of results – Since there is always one real source, the Store, there is no question of how to synchronize the current state with the actions and the rest of the application.
  • Maintainability – Code becomes easier to maintain, with predictable results and strict structure.
  • Server-Side Rendering – You just need to pass the store created on the server to the client. This is useful for initial rendering and can optimize application performance to provide a better user experience.
  • Developer Tools – From actions to state changes, developers can track everything that is happening in the application in real time.
  • Community and Ecosystem – Redux has a huge community behind it, which makes it even more fascinating. A large community of talented people has contributed to improvements in the library and developed various applications.
  • Easy to test – Redux’s code is primarily small, pure, and standalone. This makes the code testable and independent.
  • Organization – Redux explains exactly how the code is organized, which makes the code more consistent and simple for the team to use.

The React routing

46. What is React routing?

React Routing is a powerful routing library built on top of React to help you add new screens and streams to your application. This keeps the URL in sync with the data displayed on the Web page. It is responsible for maintaining a standardized structure and behavior and is used to develop single-page Web applications. The React route has a simple API.

47. Why do you use switch keyword in React Router V4?


is used to wrap multiple routes in the Router, you can use the “switch” keyword when you want to show only a single route that is to be rendered across multiple defined routes. When used, the

flag matches the defined URLs with the defined routes in order. When the first match is found, it renders the specified path. So we can bypass other routes.

48. Why do we need routing in React?

The Router is used to define multiple routes, and when a user defines a specific URL, if that URL matches the path of any of the “routes” defined within the Router, the user will be redirected to that particular route. So basically we need to add a Router library to our application that allows us to create multiple routes, each of which gives us a unique view

< eXact = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" = "eXact" component={Post}/> </switch>

49. List the benefits of the React Router.

Several advantages are:

  1. Just like React based components, in React Router V4, the API is‘All About Components’. You can visualize the Router as a single root component (<BrowserRouter>), where we assign specific subroutes (<route>) Wrap it up.
  2. No need to manually set the history value: In React Router V4, all we do is wrap the route in the

  3. The packages are separate: there are three packages, one for Web, one for Native, and one for Core. This makes our application more compact. Switching is easy based on a similar coding style.

50. What is the difference between React Router and Conventional Router?

The theme Conventional routing The React routing
Participating Pages Each view corresponds to a new file Only a single HTML page is involved
The URL to change The HTTP request is sent to the server and receives the corresponding HTML page Change only the history property
experience The user actually switches between different pages of each view Users think they are switching between pages

Hopefully this React interview questions and answers will help you prepare for your interview. Wish all the best!

The first send WeChat messages public number: Jingchengyideng

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

  • 12 Amazing CSS Experiment Projects
  • What are the front-end interview questions at the world’s top companies
  • CSS Flexbox Visualization Manual
  • 11 of the best JavaScript dynamic effects libraries
  • The holidays are boring? Write a little brain game in JavaScript!
  • React from a designer’s point of view
  • How does CSS sticky positioning work
  • A step-by-step guide to implementing animations using HTML5 SVG
  • Programmer 30 years old before the monthly salary is less than 30K, which way to go
  • 7 open front end questions
  • 8 top VS Code extensions for the front end
  • React Tutorial: A Quick Start Guide
  • A literature that understands TypeScript types