liveBook · Manning

Custom Elements

As explained in React Quickly, Second Edition

A custom element in this React context is an instance of a user-defined component that can be composed into an interface.

A custom element is an instance of a user-defined React component. Components combine standard HTML elements and other components into reusable, composable interface parts such as links, panels, inputs, buttons, and menus. They replace repeated markup with a named abstraction. section 2.4

Reuse one link component three times

class Link extends React.Component { render() { return React.createElement( "p", null, React.createElement("a", { href: "//react.dev" }, "Read more about React") ); } } const group = React.createElement( React.Fragment, null, React.createElement(Link), React.createElement(Link), React.createElement(Link) ); ReactDOM.createRoot(document.getElementById("root")).render(group);

How React Quickly, Second Edition covers it

How deep it goes
Defines component classes and renders instances, but stops before customization and more advanced component features.
Examples
Demonstrates three repeated React links, first duplicated manually and then produced from one Link component.
What it assumes
Assumes nested React elements and introduces component-based reuse through a simple repeated-link example.
What you can do after
Build reusable React components from standard elements and render multiple component instances.
How it connects
Connects custom elements with React components, HTML elements, component-based architecture, and web components.
Cover of React Quickly, Second Edition
liveBookmanning.com
Read React Quickly, Second Edition on liveBook Get the book at manning.com

Also explained in

Compare how 2 books explain Custom Elements →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.