Components

Components in React are essential building blocks that allow us to create reusable and modular UI elements. Components can be thought of as custom HTML elements that we can create.

Components can be reused and combined to build larger and more complex UIs. JSX allows us to write HTML-like syntax within our JavaScript code to define the structure of React components.

Rendering

In React, rendering refers to the process of generating user interface based on component hierarchy and the current state of the application.
React uses Virtual DOM to efficiently update and render only the necessary parts of UI that have changed. When the state of a component or its props change, React re-renders the component and its children to reflect the new state.

Props

Props(short for properties) are a way to pass data from a parent component to its child component. Props are immutable and customizable. Components can access props using the 'props' object.

State

State represents the internal data of components that can change over time. Unlike props, which are passed down from a parent component, state is managed internally by the component itself. When state of a component changes, React automatically re-renders the component to reflect the new state. State is typically used for dynamic data, such as form inputs, toggles, or data fetched from an API.