React js Interview

React is a JavaScript library used for building user interfaces. It was developed by Facebook and is widely adopted by developers due to its efficiency and flexibility. React solves the problem of efficiently updating the User Interface (UI) when the data changes. It introduces a virtual DOM, which allows React to update only the necessary parts of the UI without reloading the entire page, leading to better performance.

Example :

// Sample React Component
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

export default App;

React and AngularJS are both popular frameworks for building web applications, but they have different approaches and philosophies. React is a library focused solely on the view layer, while AngularJS is a full-fledged framework providing tools for building entire applications, including routing and state management. React uses a virtual DOM for performance optimization, whereas AngularJS employs a two-way data binding mechanism.

• Virtual DOM: React utilizes a virtual DOM for efficient updates to the UI.
• Component-Based Architecture: React follows a component-based architecture, allowing developers to build reusable UI components.
• JSX: JSX is a syntax extension for JavaScript, which allows writing HTML-like code within JavaScript.
• Unidirectional Data Flow: React follows a unidirectional data flow, making it easier to debug and understand the application’s state changes.

JSX (JavaScript XML) is a syntax extension for JavaScript, which allows mixing HTML-like code with JavaScript. It simplifies the process of writing React components by providing a familiar syntax for defining UI elements. JSX is then transformed into regular JavaScript function calls by tools like Babel before being rendered in the browser.

Example:

// JSX Example
const element = <h1>Hello, JSX!</h1>;

Components are the building blocks of a React application. They are reusable and encapsulate a piece of UI, including its logic and styling. Components can be either functional or class-based. Functional components are simple JavaScript functions that return JSX, while class-based components are ES6 classes that extend React.Component.

Example :

// Functional Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Class-based Component
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Functional components are simple JavaScript functions that take props as an argument and return React elements. They are primarily used for presenting UI and do not have their own internal state.

// Functional Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Class components, on the other hand, are ES6 classes that extend React.Component. They have their own internal state and lifecycle methods, making them suitable for more complex UI logic and interactions.

// Class-based Component
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

State in React is an object that represents the internal state of a component. It allows components to manage their data and re-render based on changes to that data. Unlike props, which are passed from parent to child components and are immutable, state is managed internally by the component and can be updated using the setState() method.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // Initialize state
    this.state = {
      count: 0
    };
  }

  // Increment count when button is clicked
  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In this example, count is maintained as a piece of internal state within the Counter component. The count value can be updated using the incrementCount method, which utilizes setState() to modify the state. The count value is not passed down from a parent component but is instead managed locally within the Counter component.

The virtual DOM in React is a lightweight copy of the actual DOM. When the state of a component changes, React first updates the virtual DOM, performs a diffing algorithm to identify the differences between the virtual DOM and the actual DOM, and then selectively updates only the parts of the actual DOM that have changed. This process significantly improves performance by minimizing DOM manipulation and re-rendering.

In React, events are handled using camelCase event handler attributes such as onClick, onChange, etc. These attributes are provided as props to React elements and accept callback functions that will be invoked when the event occurs. Inside the callback function, you can access event properties like target.value for input elements or target.checked for checkboxes.

Example :

class Button extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

React components have several lifecycle methods that allow you to hook into different points in a component’s lifecycle. Some commonly used lifecycle methods include:

• componentDidMount: Invoked immediately after a component is mounted to the DOM. It is commonly used for initialization tasks such as fetching data from an API.
• componentDidUpdate: Invoked immediately after updating occurs. It is useful for performing side effects such as updating the DOM in response to prop or state changes.
• componentWillUnmount: Invoked immediately before a component is unmounted from the DOM. It is used for cleanup tasks such as removing event listeners or canceling network requests.

In React, forms are created using regular HTML form elements like <input>, <textarea>, and <select>. You can handle form submissions and user input using state and event handlers.

Example: