Navigation: Index

React

Virtual DOM

The Virtual DOM is a lightweight representation of the actual DOM in memory. React uses it to optimize updates to the real DOM by minimizing the number of changes needed. When the state of a component changes, React creates a new Virtual DOM tree and compares it with the previous one. This process is called “reconciliation.” React then updates only the parts of the real DOM that have changed.

DOM

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

Lifting State Up in React

Lifting state up refers to moving state from child components to a common parent component. This is done to share state between multiple child components. By lifting the state up, the parent component can manage the state and pass it down to the children via props.

React Design Patterns

Container and Presentational Components: Separates components into two categories: container components (handle state and logic) and presentational components (render UI).
Higher-Order Components (HOC): A function that takes a component and returns a new component with additional props or behavior.
Render Props: A technique where a component’s children is a function that returns a React element.
Controlled and Uncontrolled Components: Controlled components have their state managed by React, while uncontrolled components manage their own state.

Component Lifecycle

React components go through several lifecycle phases:

Mounting: When the component is created and inserted into the DOM (componentDidMount).
Updating: When the component is re-rendered due to changes in props or state (componentDidUpdate).
Unmounting: When the component is removed from the DOM (componentWillUnmount).

React Data Binding

React uses one-way data binding, where data flows from parent to child components via props. This ensures a unidirectional data flow, making the application easier to debug and maintain.

React Hooks

Hooks are functions that let you use state and other React features in functional components. Common hooks include:

useState: Manages state in a functional component.
useEffect: Performs side effects in functional components.
useContext: Accesses context values.
useReducer: Manages complex state logic.
useRef: Accesses DOM elements directly.

Example:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Testing

Unit Testing: Testing individual components or functions.
Integration Testing: Testing how components work together.
End-to-End (E2E) Testing: Testing the entire application flow.

SPA

A Single Page Application (SPA) loads a single HTML page and dynamically updates the content as the user interacts with the app. React is commonly used to build SPAs due to its efficient rendering and state management.

Class Component and Function Component in React

Class Component: A component defined using ES6 class syntax. It can have state and lifecycle methods.
Function Component: A component defined using a function. It can use hooks to manage state and lifecycle.

React State

State is an object that holds data that may change over the lifecycle of the component. It is managed within the component and can be updated using setState or useState.

React Props

Props (short for properties) are read-only attributes passed from parent to child components. They are used to pass data and event handlers to child components.

Difference Between State and Props

State: Managed within the component, can be changed.
Props: Passed from parent to child, read-only.

Stateful and Stateless Components

Stateful Components: Components that manage their own state.
Stateless Components: Components that do not manage state, often used for rendering UI.

React Router

React Router is a library for handling routing in React applications. It allows you to define routes and navigate between different components.

Reducer

A reducer is a function that takes the current state and an action, and returns a new state. It is commonly used with the useReducer hook for managing complex state logic.

Redux

Redux is a state management library for JavaScript applications. It provides a centralized store for managing state and uses actions and reducers to update the state.

Context and Refs

Context: Provides a way to pass data through the component tree without having to pass props down manually at every level.
Refs: Provide a way to access DOM elements or React elements directly.

← SQL | Back to Index | General →