Elements vs components

  • React
  • Examples
  • Elements vs components

React example • 1 min read

  • Components
  • Elements

There are multiple ways to compose JSX, mainly:

  • Through elements (just variables that contain JSX)
  • Through components (just functions that return JSX)
import React from "react";

// A button component
function Button() {
  return <button>I'm a button</button>;
}

// One element
const element = <h1>I'm a singular element</h1>;

// An array of elements
const elements = [
  <li>Element number 1</li>,
  <li>Element number 2</li>,
  <li>Element number 3</li>
];

// The main app is also a component
function App() {
  return (
    <div>
      {/* Render a component */}
      <Button />

      {/* Render an element */}
      {element}

      {/* Render an array of elements */}
      <ul>{elements}</ul>
    </div>
  );
}

export default App;

Example: https://codesandbox.io/s/y75nzw