Component-Based Architecture

Component-based architecture focuses on the decomposition of the design into individual functional or logical components that represent well-defined communication interfaces containing methods, events, and properties. It provides a higher level of abstraction and divides the problem into sub-problems, each associated with component partitions.

Component-oriented software design has many advantages over the traditional object-oriented approaches such as −

• Reduced time in market and the development cost by reusing existing components.
• Increased reliability with the reuse of the existing components.

What is a Component?

A component is a modular, portable, replaceable, and reusable set of well-defined functionality that encapsulates its implementation and exporting it as a higher-level interface.

Views of a Component

• Object-oriented view
• Conventional view
• Process-related view

Characteristics of Components

• Reusability − Components are usually designed to be reused in different situations in different applications. However, some components may be designed for a specific task.

• Replaceable − Components may be freely substituted with other similar components.

• Not context specific − Components are designed to operate in different environments and contexts.

• Extensible − A component can be extended from existing components to provide new behavior.

• Encapsulated − A A component 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 − Components are designed to have minimal dependencies on other components.

Component-Level Design Guidelines

Creates a naming conventions for components that are specified as part of the architectural model and then refines or elaborates as part of the component-level model.

Conducting Component-Level Design

Recognizes all design classes that correspond to the problem domain as defined in the analysis model and architectural model.

Advantages

• 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.

• Reduced cost − The use of third-party components allows you to spread the cost of development and maintenance.

• Ease of development − Components implement well-known interfaces to provide defined functionality, allowing development without impacting other parts of the system.

• Reusable − The use of reusable components means that they can be used to spread the development and maintenance cost across several applications or systems.

• Modification of technical complexity − A component modifies the complexity through the use of a component container and its services.

• Reliability − The overall system reliability increases since 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 − Independency and flexible connectivity of components. Independent development of components by different group in parallel. Productivity for the software development and future software development.

What is “Props” and how to use it in React?

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state and so on.

What is Props?

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

Using Props in Reac

• how to use Props step by step.

  1. Firstly, define an attribute and its value(data)
  2. Then pass it to child component(s) by using Props
  3. Finally, render the Props Data

• 1st Step: Defining Attribute & Data We already know that we can assign attributes and values to HTML tags: <a href="www.google.com">Click here to visit Google</a>;

  Likewise, we can do the same for React components. We can define our own attributes & assign values with interpolation { }: <ChildComponent someAttribute={value} anotherAttribute={value}/>

• 2nd Step: Passing Data using Props

  Passing props is very simple. Like we pass arguments to a function, we pass props into a React component and props bring all the necessary data.

  Arguments passed to a function: const addition = (firstNum, secondNum) => { return firstNum + secondNum; };

  Arguments passed to a React component: const ChildComponent = (props) => { return <p>I'm the 1st child!</p>; };

• Final Step: Rendering Props Data Alright so far, we have created an attribute and its value, then we passed it through props but we still can’t see it because we haven’t rendered it yet.

In the final step, we will render the props object by using string interpolation: {props}