In a class-based React component, render() returns the element tree that represents the component’s user-interface output. It is the only required method when defining a component with class Name extends React.Component. section 2.4 section 2.8
A render method follows a few practical rules:
- Return one root element created with React.createElement(), either an HTML tag or another custom component. section 2.4
- Wrap multiple same-level elements in an HTML container or React.Fragment. section 2.4
- Reuse the component by creating multiple instances, rather than repeating the same raw elements. section 2.4 section 2.8
Rendering three reusable links
class Link extends React.Component {\n render() {\n return React.createElement(\n "p",\n null,\n React.createElement("a", { href: "//react.dev" }, "Read more about React")\n );\n }\n}\n\nconst group = React.createElement(\n React.Fragment, null,\n React.createElement(Link),\n React.createElement(Link),\n React.createElement(Link)\n);\n\nReactDOM.createRoot(document.getElementById("root")).render(group); section 2.4
