ReactJS

ReactJS is a popular JavaScript library for building user interfaces, particularly single-page applications. It allows developers to create reusable UI components. Below is a comprehensive list of the components and concepts associated with ReactJS:

Core Concepts

JSX (JavaScript XML):
Syntax extension that allows writing HTML elements in JavaScript.
Example: <h1>Hello, world!</h1>.
Components:
The building blocks of a React application.
Two types: Functional Components and Class Components.

Functional Components

Defined as JavaScript functions.
Return JSX to render the UI.

Example:

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

Class Components

ES6 classes that extend React.Component.
Must contain a render() method.

Example:

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

Component Lifecycle Methods (for Class Components)

Mounting:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Updating:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Unmounting:
componentWillUnmount()

State and Props

State: Local state within a component. Managed using useState hook (in functional components) or state property in class components.
```
const [count, setCount] = useState(0);
```
Props: Read-only attributes passed from parent to child components.
```
<Welcome name="Sara" />
```

Hooks (for Functional Components)

useState: Manages state.
useEffect: Handles side effects.
useContext: Accesses context values.
useReducer: Manages complex state logic.
useCallback: Memoizes callback functions.
useMemo: Memoizes expensive calculations.
useRef: Accesses DOM elements directly.
useLayoutEffect: Similar to useEffect but fires synchronously after all DOM mutations.
useImperativeHandle: Customizes the instance value that is exposed when using ref.
useDebugValue: Displays a label for custom hooks in React DevTools.

Context API

Provides a way to pass data through the component tree without passing props down manually at every level.
```
const MyContext = React.createContext(defaultValue);
```

Higher-Order Components (HOC)

A pattern that involves a function that takes a component and returns a new component.

function withLoading(Component) {
  return function LoadingComponent(props) {
    return <Component {...props} />;
  }
}

Render Props

A technique for sharing code between React components using a prop whose value is a function.
```
<DataProvider render={(data) => <SomeComponent data={data} />} />
```

Fragments

Allows grouping multiple elements without adding extra nodes to the DOM.
```
<React.Fragment>
  <ChildA />
  <ChildB />
</React.Fragment>
```

Portals

Provides a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
```
ReactDOM.createPortal(child, container);
```

Error Boundaries

Catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // Handle error
  }
  render() {
    return this.props.children;
  }
}

Refs

Provides a way to access the DOM nodes or React elements created in the render method.
```
const myRef = React.createRef();
```

PropTypes

Runtime type checking for props in React components.

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

Custom Hooks

Functions that start with "use" and can call other hooks.

function useCustomHook() {
  const [state, setState] = useState(initialState);
  return [state, setState];
}

Concurrent Mode (Experimental)

Allows React to work on multiple tasks simultaneously.

Suspense and Lazy

Suspense: Enables waiting for some code to load and declaratively specify a loading state.

React.lazy(): Dynamically imports a component.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

Understanding these components and concepts is crucial for effectively building and maintaining React applications.