Components

Components are JavaScript functions. They accept input parameters as a single object props and return elements describing UI presentation on the screen.

function Hello() {
  return <h1>Hello!</h1>;
}

To use a component, include it as a JSX tag into another component.

Component’s name must start with a capital letter. This rule is required to separate HTML tags from Jet.js components. Use lowercase for HTML tags and CamelCase for components.

function Hello() {
  return <h1>Hello!</h1>;
}

function Notification() {
  return (
    <div>
      <Hello />
      You have unread messages.
    </div>
  );
}

Input Parameters

Components accept input parameters as properties of a single input parameter – props object.

function Hello(props) {
  return <h1>Hello {props.name}!</h1>;
}

In JSX, input parameters are passed to components as JSX tag attributes. Attributes can be strings or objects.

return <Hello name="John" />;

const firstName = "John";
return <Hello name={firstName} />;

Access to props

Components have read-only access to all properties of the props object. As a regular JavaScript object, props can be destructured to retrieve its properties. The following three examples are identical.

1. Use props attributes:

function Hello(props) {
  const firstName = props.firstName;
  const lastName = props.lastName;
  return <h1>Hello, {firstName} {lastName}!</h1>;
}

2. Use destructuring to assign variables:

function Hello(props) {
  const {firstName, lastName} = props;
  return <h1>Hello, {firstName} {lastName}!</h1>;
}

3. Use destructuring as a function parameter:

function Hello({firstName, lastName}) {
  return <h1>Hello, {firstName} {lastName}!</h1>;
}

Components must not try to modify props. It will lead to unexpected behavior and subtle bugs that are hard to analyze.

Start Application