reading-notes

Introduction to React and Components

Reading

• Component Based Architecture
• What is Props and How to Use it in React

References

• React Tutorial through ‘Passing Data Through Props’
• React Docs - Hello world
• React Docs - Introducing JSX
• React Docs - Rendering elements
• React Docs - Components and props

Assignments

Component Based Architecture

• What is a “component”?
  • A modular, well-defined piece of functional code that can be deployed independently and easily transferred to another application or replaced entirely
• What are the characteristics of a component?
  • Reusability
    • Can be reused across different applications
  • Replaceable
    • Can be freely substituted with other similar components
  • Not context dependant
    • Designed to operate in different environments
  • Extensible
    • Can be extended from existing components to provide new behavior
  • Encapsulated
    • Depicts the interface, but does not expose details of the internal processes, variables, or states
  • Independent
    • Minimal dependencies on other components
• What are the advantages of using component-based architecture?
  • By packaging these components together by function, this maximizes component reusability, resulting in:
    • Reduced time in the market and development costs due to the reuse of existing components
    • Increased reliability with the reuse of the existing components
  • Ease of deployment
    • As updates occur, can easily replace existing components without impacting other components
  • Reduced cost
    • Can use 3rd party components to spread out the cost of development and maintenance
  • Ease of development
    • Can focus on development of a part of the app without impacting other components
  • Reuseable
    • Can take a component a use in other applications, further reducing development and maintenance costs
  • Modification of technical complexity
  • Reliability
    • The overall system reliability increases with the reliability of each individual component
  • System maintenance and evolution
    • Again, because each component is independent, you can conduct maintenance without interfering with the rest of the system
  • Independent
    • Because each component can be developed and deployed independently of the others, can speed up development and deployment and increase productivity of the development process

What is Props and How to Use in React

• What is “props” short for?
  • Properties
• How are props used in React?
  • They are used to pass properties from parent components to child components, which allows you to make your code more dynamic
• What is the flow of props?
  • Unidirectional (one-way), from parent to child

Notes

What is Component-based Architecture

• Focuses on breaking down design of a system into function or logical components
• These components are well-defined communication interfaces consisting of methods, event, and properties
• By packaging these components together by function, this maximizes component reusability, resulting in:
  • Reduced time in the market and development costs due to the reuse of existing components
  • Increased reliability with the reuse of the existing components

Components

• Well-defined, functional blocks of code that is easily deployable across different apps and easily replaceable due to its modular design
• Have 3x views:
  1. Object-Oriented
     • Components are viewed as cooperating classes
     • Defines interfaces that enable classes to communicate and cooperate
  2. Conventional
     • Components are viewed as functional elements or modules that integrate processing logic
  3. Process-Related
     • Systems builds components from existing components maintained in a library, rather than building each component from scratch
• Characteristics of Components
  • Reusability
    • Can be reused across different applications
  • Replaceable
    • Can be freely substituted with other similar components
  • Not context dependant
    • Designed to operate in different environments
  • Extensible
    • Can be extended from existing components to provide new behavior
  • Encapsulated
    • Depicts the interface, but does not expose details of the internal processes, variables, or states
  • Independent
    • Minimal dependencies on other components
• Advantages of Component-Based Design
  • Ease of deployment
    • As updates occur, can easily replace existing components without impacting other components
  • Reduced cost
    • Can use 3rd party components to spread out the cost of development and maintenance
  • Ease of development
    • Can focus on development of a part of the app without impacting other components
  • Reuseable
    • Can take a component a use in other applications, further reducing development and maintenance costs
  • Modification of technical complexity
  • Reliability
    • The overall system reliability increases with the reliability of each individual component
  • System maintenance and evolution
    • Again, because each component is independent, you can conduct maintenance without interfering with the rest of the system
  • Independent
    • Because each component can be developed and deployed independently of the others, can speed up development and deployment and increase productivity of the development process

Props in React

• Props = properties
  • props is a special keyword in React used for passing data from one component to another
  • This data is passed down in one direction in a read-only format (i.e. it cannot be changed by the child components)
• props will return as an object
  • Will need to use string interpolation to render the text and dot(.) notation to access the specific property of the object that you want to render

  <ChildComponent text={"I'm a child component!"} />
  
  const ChildComponent = (props) => {
    return <p>{props.text}</p>;
  }; // returns "I'm a child component!"