reading-notes

reading notes for code fellows

---

Project maintained by dLeigh01 Hosted on GitHub Pages — Theme by mattgraham

Introduction to React and Components

As this will be my first time interacting with React/learning about components at all, this will be an important section to go over and understand before we jump into it since, as I understand, we will be using React quite a lot and it would be good to go in knowing something rather than nothing.

Component-Based Architecture

Component-based architecture focuses on the individual functions or components of a design that represent communication interface containing methods, events, and properties. It divides the problem into sub-problems, and its primary objective is to ensure component reusability.

Component - a modular, portable, replaceable, and reusable set of functionality/behaviors of a software element that becomes a self-deployable binary unit. A unit of composition with a contractually specified interface and explicit context dependencies.

Some standard component frameworks include

• COM/DCOM
• JavaBean
• EJB
• CORBA
• .NET
• web services
• grid services

Component-oriented software design has advantages such as

• reduced time in market
• reduced development costs due to reusing components
• increased reliability

A component can have three different views

• object oriented - viewed as a set of one or more cooperating classes, each of which is explained to indentify all attributes and operations applicable. Also defines the interfaces that enable classes to cooperate.
• conventional view - viewed as a functional element/module of a program that integrates the processing logic, the internal data structures required to implement it, and an interface enabling the component to be invokes and have data passed to it.
• process-related view - instead of creating each component from scratch the system is built from existing components from a library.
  • a UI (user interface) component includes grids, buttons, and utility components.
  • other common components are resource intensive and used infrequently, often through the just-in-time approach.
  • many components are invisible when distributed.

Characteristics of components

• reusability - designed to be reused in different situations and applications.
• replaceable - may be freely substituted with other similar comnponents.
• not context specific - designed to operate in different environments and contexts.
• extensible - can be extended from existing components
• encapsulated - depicts the interfaces allowing the user to call on its functionality, but doesn’t expose its internal processes.
• independent - desgined to have minimal dependencies on other components.

A component-level design can be represented through inermediaries that can be translated into source code. The design of data structure, interface, and algorithm guidelines should help avoid errors. The principles of component-based design include

• the software system is decomposed into reusable, cohesive, and encapsulated units.
• each component has its own interface specifying required ports and provided ports and that hides its detailed implementation.
• a component should be extended without the need to make internal code or design modifications to existing parts.
• components depend on abstractions rather than other components.
• connectors specify and rule the interaction among connected components, and the interaction type is specified by the components’ interfaces.
• component interaction can take the form of method invocations, asynchronous invocations, broadcasting, message driven interactions, data stream communications, and other protocol specific interactions.
• specialized interfaces should be created to serve major categories of clients for a server class, specifying only the operations relevant to the clients.
• a component can extend to other components and still offer extension points, which is the concept of a plug-in based architecture.

Component-level design guidelines create a naming convention for components specified as part of the architectural model and refine as part of the component-level model.

• attains architectural component names from the problem domain and ensures they have meaning to everyone viewing the model.
• extracts the business process entities that can exist independantly without any associated dependency on other entities.
• recognizes and discovers independent entities as new components.
• uses infrastructure component names reflecting their implementation-specific meaning.
• models dependencies from left to right and inheritances from top to bottom.
• models any component dependancies as interfaces.

Conducting component-level design

• recognizes all design classes corresponding to the problem or infrastructure domain.
• describes all design classes that are not acquired as reusable components.
• identifies appropriate interfaces for each component and elaborates on attributes and data types / data structures required to implement them.
• describes processing flow within each operation through pseudo code.
• describes persistent data sources and identifies the classes required to manage them.
• developes and elaborates on behavioral representations for a class or component through the UML state diagrams created for the analysis model/ examining all use cases relevant to the design class.
• elaborates deployment diagrams to provide additional implementation detail.
• demonstrates the location of key packages or classes of components using class instances and designating specific hardware/OS environments.
• the final decision can be made using established design principals and guidelines.

1. What is a component?

a component is a replaceable and reusable set of code that can be made interchangeable and doesn’t rely on concrete data to work.

2. What are the characteristics of a component?

reusable, replaceable, not context specific, extensible, encapsulated.

3. What are the advantages of using component-based architecture?

Ease of deployment, reduced cost, ease of development, reusable, modification of technical complexity, reliability, system maintenance and evolution, independent.

What is Props and How to Use it in React

React is a component-based library that divides the UI into reuable pieces. Props(or properties) allows these components to communicate. All data passed through props goes uni-directionally and is read-only. To use props, define an attribute and its value, pass it to the child component, and render the props data.

interpolation {} defines attributes and assigns values in React.

You would pass arguments into a React component like this

const ChildComponent = (props) => {
  return <p>Many words</p>;
};

To render the value from props, you use string interpolation. Ex. {props.text}

1. What is props short for?

properties.

2. How are props used in React?

to pass data between components.

3. What is the flow of props?

uni-directional.

Things I Want to Know More About

[< table of contents]

[< home]