A “component” is a self-contained, reusable piece of code that defines a part of a user interface (UI) in a software application. In React, components are the building blocks of an application, and they can be combined to create more complex UIs.
The characteristics of a component in React include:
Encapsulation: Components are designed to be self-contained and do not affect the rest of the application.
Reusability: Components can be reused throughout an application, which can save development time and effort.
Extensible − A component can be extended from existing components to provide new behavior.
Independence: Components are designed to be independent of each other and can be modified without affecting other components.
The advantages of using a component-based architecture include:
Reusability: Components can be reused throughout an application, which can save development time and effort.
Modification of technical complexity − A component modifies the complexity through the use of a component container and its services.
Ease of deployment − As new compatible versions become available, it is easier to replace existing versions with no impact on the other components or the system as a whole.
Ease of development − Components implement well-known interfaces to provide defined functionality, allowing development without impacting other parts of the system.
Source
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. Data with props are being passed in a uni-directional flow. (one way from parent to child)
Props” is short for “properties” and is a way to pass data from one component to another in React.
Props are used in React by passing data from a parent component to a child component as a set of attributes. The child component can then use the data passed in through props to render its own UI or perform other operations.
The flow of props in React is unidirectional, meaning that props are passed from parent components down to child components, but not the other way around. This helps to maintain data consistency and makes it easier to reason about the state of an application. If a child component needs to pass data back to a parent component, it can do so using callbacks or other techniques.
Source
Bookmarked and Reviewed