React Interview Questions Basic

by

React is a Javascript library by facebook for creating interactive, state-driven UI. React has a component-based approach where simple components are composed together to make complex UI. The question section below will answer frequently asked interview question for React.

Question 1: What is JSX?
Answer 1: JSK is a syntax extension of javascript. JSX is the recommended way to describe UI elements in React. Unlike other templating languages JSX can include javascript functions. JSX finally translates to javascript object which is used by React DOM to update DOM.

//Example:
const element = (
  <h1 className="welcome">
    Hello, world!
  </h1>
);
//It is viually intutive way of using create element
//equivalent React.createElement is
const element = React.createElement(
  'h1',
  {className: 'welcome'},
  'Hello, world!'
);

Question 2: What is the smallest unit of UI in React?
Answer 2: In React smallest unit of UI is Element. Elements are part of react DOM and are cheap to create.

Question 3: How to update React element?
Answer 3: React elements are immutable i.e they cannot be mutated. Once a React element has been created it cannot be mutated i.e its children or attributes cannot be changed. React elements can only be replaced.

Question 4: What are Components in React?
Answer 4: Components in React are the Javascript function which accepts pops (properties) and returns some amount of JSX. Components are minimum reusable UI units in React. Given below is an example of React functional component

 function Welcome(props) {
  return <h1>Welcome, {props.guestName}</h1>;
}

Question 5: What is a functional component in React?
Answer 5: Functional component in react are simple javascript functions which accept props and return some amount of JSX. Example of question 4 is a valid functional component as it accepts a single props object and returns JSX.

Question 6: What is a class component in React?
Answer 6: Class component is javascript class which extends React.Component. Class component has a render method which returns a JSX. Given below is an example of a Class component

class Welcome extends React.Component {
  render() {
    return <h1>Welcome, {this.props.guestName}</h1>;
  }
}

Question 7: Why are class components used?
Answer 7: Class components are versatile in addition to props and returning JSX they also have following

  • State
  • Component Lifecycle
    • componentDidMount()
    • componentDidUpdate()
    • componentWillUnmount()
    • shouldComponentUpdate()

This allows the class component to handle logical operations unlike functional components which have no access to lifecycle methods

Question 8: How is the state of a class component is updated?
Answer 8: The State of a React class component is updated by calling setState() method. The state should never be updated directly. 

this.setState({guestName: 'Amarendra'});  //right way
this.state.guestName = 'Amarendra' //forbidden illegal coding right voilation any other you can think of update in comments

Question 9: How to handle an event in React JSX?
Answer 9: In JSX events are handled by passing event handlers to elements. Event handlers are function and can be a method on the class. Event handlers are not passed as strings. 

<button onClick={eeehaaaww}>
  Eeehawww scream
</button>

Question 10: What is a controlled component?
Answer 10: A controlled component is called such.because of the control it exercises over its view. Every data passed to the controlled component is governed through functions and the value of component is set through the state, which is the single source of truth. Controlled components receive their value from React State and not from the DOM node state.

            <Input
              value={this.state.userName}
              onChangeText={(userName) => this.setState({ userName })/>

In the example above you can see the Input component used is controlled totally by the state of the component e.g for a given state and props, we will always have the same view.

A pat on the back !!