Introduction to React and Components

Component-Based Architecture

What is a component?

A component is a modular, portable, replaceable, and reusable set of well-defined functionality that encapsulates its implementation exporting it as a higher-level interface. It is a software object, intended to interact with other components. It can be deployed independently and is subject to composition by third parties.

What are the characteristics of a component?

Reusability: Can be reused in different situations or applications.
Replaceable: Can be substituted with other similar components.
Not context specific: Designed to operate in different environments and contexts.
Extensible: Can be extended from existing components to provide new behavior.
Encapsulated: Depicts the interfaces, which allow the caller to use its functionality, and do not expose details of the internal processes or any internal variables or state.
Independent: Designed to have minimal dependencies on other components.

What are the advantages of using component-based architecture?

Ease of deployment: Easier to replace existing versions with no impact on the other components or the system as a whole.
Reduced cost: The use of third-party components allows you to spread the cost of development and maintenance.
Ease of development: Their well-known interfaces and defined functionality allows development without impacting other parts of the system.
Reusable: Can be used to spread the development and maintenance cost across several applications or systems.
Modification of technical complexity: Modifies the complexity through the use of a component container and its services.
Reliability: The reliability of each individual component enhances the reliability of the whole system via reuse.
System maintenance and evolution: Easy to change and update the implementation without affecting the rest of the system.
Independent: Flexible connectivity and independent development of components by different groups in parallel increasing productivity.

Props & React

React is a component-based library that divides the UI into little reusable pieces. In some cases, those components need to communicate and the way to pass data between them is by using props.

What is props short for?

Short for properties. Special keyword used in react

How are props used in React?

We define an attribute and its value.
We pass it to a child component using Props. Like function arguments.
We render the Props Data.

What is the flow of props?

Uni-directional. One way parent, to child. Read Only.

Things I want to know more about

React in general and how to use props and components correctly.

-back