Skip to content

class-301.md

Latest commit

 

History

History
70 lines (45 loc) · 3.96 KB

class-301.md

File metadata and controls

70 lines (45 loc) · 3.96 KB

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 and exporting it as a higher-level interface

  • Characteristics of Components

Characteristic Details
Reusability Components are usually designed to be reused in different situations in different applications
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 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

  • What are the advantages of using component based architecture?

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

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

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

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

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

  • 6-Reliability : The overall system reliability increases since the reliability of each individual component enhances the reliability of the whole system via reuse.

  • 7-System maintenance and evolution : Easy to change and update the implementation without affecting the rest of the system.

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

  • to read more click here

  • What is Props and how to use it in React?

  • What is Props?

Props is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

  • How are props used in React?

  • first Step: Defining Attribute & Data

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

  • 2- We can define our own attributes & assign values with interpolation { }: < ChildComponent someAttribute={value} anotherAttribute={value}/ >

  • 3- declaring a “text” attribute to the ChildComponent and then assign a string value: “I’m the 1st child”. < ChildComponent text={“I’m the 1st child”} / >

  • second Step: Passing Data using Props

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

  • 2- Arguments passed to a React component: const ChildComponent = (props) => { return

    I'm the 1st child!

    ;};

  • Final Step: Rendering Props Data

    render the props object by using string interpolation: {props}

  • What is the flow of props?

  • data with props are being passed in a uni-directional flow. (one way from parent to child)

  • props data is read-only, which means that data coming from the parent should not be changed by child components.

  • to read more click here