Component
A software component is a modular part of a larger system that provides related functionality and interacts with other parts through defined boundaries or interfaces.
React Quickly, Second Edition
A functional component is a React component defined as a JavaScript function that receives properties as its argument and returns user-interface output.
- How it is used
- Builds reusable UI pieces that can be nested and customized with props.
- How deep it goes
- Works through functional definitions, prop destructuring, and class-to-function conversion; leaves interacting gallery components for later treatment.
- Examples
- Uses a nested website menu and an image gallery to compare component definitions and property handling.
- What you can do after
- Build it from scratch as a functional component, pass props, nest instances, and convert a simple render-only class.
Build a Frontend Web Framework (From Scratch)
A modular application unit that can load data, execute lifecycle logic, and produce part of a user interface.
- How it is used
- Splits an application view into manageable, composable parts responsible for display and interaction.
- How deep it goes
- Builds from pure rendering functions toward component classes with render(), mount(), and unmount(); introduces independent state and lifecycle as later capabilities.
- Examples
- Uses a to-do application split into a form, list, and items, including input events and conditional item editing.
- What you can do after
- Build it from scratch as composable JavaScript rendering functions, then implement a basic class with rendering, mounting, and unmounting methods.
Read how Build a Frontend Web Framework (From Scratch) explains component →
Pro Angular 16
A component is a modular application building block that encapsulates a portion of user-interface structure and behavior.
- How it is used
- Structures Angular user interfaces into reusable blocks that manage templates and supply their bindings with data and logic.
- How deep it goes
- Works through class creation, decorator configuration, module declaration, host placement, component coordination, styling, and testing.
- Examples
- Uses a model-backed product count, separate product form and table components, and a service-backed message display.
- What you can do after
- Build it from scratch: define and register a component, attach it to a host element, and move a UI feature into its template.
Architecture Modernization: Socio-technical alignment of software, strategy, and structure
A software component is a part of a software system that may range from a function or class to a service or entire system.
- How it is used
- Uses components to build Wardley value chains and to examine architectural change risk.
- How deep it goes
- Defines components as architectural building blocks, then elaborates mapping, evolution judgments, and coupling; does not provide implementation instructions.
- Examples
- Illustrates components with advertising-campaign applications, remote-working tools, and a group exercise that assesses evolution criteria.
- What you can do after
- Evaluate/understand it: place components on a Wardley Map, discuss uncertain evolution positions, and identify coupling-related change risks.
React in Depth
A component is a self-contained software building block that provides a specific part of a user interface or application behavior.
- How it is used
- Uses components to organize reusable React UI, from a breakfast form to shared interface libraries.
- How deep it goes
- Works through a RadioGroup interface, child-component composition, and a re-render experiment rather than stopping at a definition.
- Examples
- Uses a breakfast-ordering RadioGroup and paired parent-rendering experiments to expose interface and rendering decisions.
- What you can do after
- Build it from scratch as a composable React UI element, then test its interactions and assess its rendering behavior.
Web Components in Action
A component is a reusable, standalone unit of interface code that combines structure, styling, behavior, and optionally a customization API.
- How it is used
- Uses reusable interface units to package structure, styling, behavior, and configuration for larger applications.
- How deep it goes
- Explains APIs, modules, reflection, styling boundaries, and event behavior through implementations, while deferring some internals as unchanged code.
- Examples
- Demonstrates configurable search and a modular slider with external attributes, templates, styling, event handlers, and mapped DOM elements.
- What you can do after
- Build it from scratch as a shareable custom element with a planned API, separated modules, configurable attributes, and reusable styling.
Refactoring to Rust
A component is an isolated, reusable software unit that encapsulates a related portion of functionality, data, or user interface.
- How it is used
- Separates concerns into isolated UI units and coordinates state, actions, rendering, and data fetching.
- How deep it goes
- Defines components through React examples and Yew's create, update, and view methods, while deferring deeper Properties usage.
- Examples
- Uses React and Yew list components with pagination, paper-search results, loading states, links, and asynchronous updates.
- What you can do after
- Build it from scratch with React or Yew, connect state transitions to rendering, and mount a WebAssembly component in an application.
Design for Developers
A user interface component is a reusable, self-contained visual and interactive unit of a user interface.
- How it is used
- Uses reusable UI components to make repeated interface patterns consistent across pages and practical to implement.
- How deep it goes
- Explains components through repetition, scalability, performance, and maintenance, but stops short of framework-specific implementation.
- Examples
- Uses blog typography, hotel listings, orange Add to Bag buttons, and stock-status controls as repeated interface patterns.
- What you can do after
- Build it from scratch as a maintainable component system that serves minimal code and supports later iteration.
Think Like a CTO
A component is a distinct major part of a software system that contributes a defined capability or function.
- How it is used
- Frames components as units for software reuse, enterprise risk assessment, and architecture documentation.
- How deep it goes
- Defines components through business criticality and shows how to map and assess support needs, while leaving implementation logistics out of high-level diagrams.
- Examples
- Uses Linux, MySQL, Postgres, Firefox, Open Office, JQuery, Gson, and a File Microservice for profile photos.
- What you can do after
- Evaluate component risks and support gaps, and communicate system boundaries with a high-level architectural diagram.
D3.js in Action, Third Edition
A component is a modular, reusable user-interface unit that encapsulates part of an application's structure or behavior.
- How it is used
- Organizes dashboards and visualizations into small, reusable units with focused responsibilities.
- How deep it goes
- Explains folder responsibilities and a Rectangle-to-BarChart decomposition, but does not cover component internals.
- Examples
- Uses dashboard folders, Rectangle.js, BarChart.js, Axis components, scatterplots, and bar charts as concrete examples.
- What you can do after
- Build reusable chart elements and compose them into a bar chart or complete visualization.
Read how D3.js in Action, Third Edition explains component →
Related concepts
- controllerincludes · A controller is a software component or architectural role that receives inputs or requests and coordinates their handling by other parts of an application.
- serviceincludes · A service is a capability or activity provided by an entity to meet the needs of users or other components.
- pluginincludes · A plugin is an optional software component that extends or modifies a host application’s capabilities through an extension or integration mechanism.
- directivekind of · A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.
- component templateuses · An Angular component template is declarative, HTML-based markup containing expressions and bindings that define a component’s rendered view.
- useStateuses · useState is a React Hook that provides a function component with a state value and a function for updating it.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.