Components

Components in Previous.js are parts of HTML you can use in pages and layouts to easy create the content without repeating code.

The components can be used in server and client side, but you have to take some considerations.

Organization

If you want to use the component in client side you need to place the component file inside the components/ root folder.

If you do not need to use these components in client side you can use any other folder you want. For example app/components/Menu.js.

You can place the files organized with any folder structure into this folder.

Remember!

Folders into app/ cannot be enrouted unless the folder has a page.js or route.js files, so you can use any folder to save components inside app/.

Good to know

Any folder starting with _ into app/ folder will be ignored for routing.

Creating Components

To create a component, write an object with a render method returning a string like this.

return {
  render: (items) => {
    const elements = items.map((item) => {
      return `<li><a href="${item.url}">${item.title}</a></li>`;
    }).join('');
    return `<ul>${elements}</ul>`;
  }
}

Good to know

By convention we call this method render, but you can use any other name while it returns an string. You can also return the render function directly if you do not need an object.

Creating a component for client and server side will look like this:

return {
  render: (card) => {
    return `
      <a href="${card.url}" class="card">
        <div class="card-title">${card.title}</div>
        <div class="card-description">${card.description}</div>
      </a>
    `;
  }
}

Important!

If you want to use the component in client side you can not use require, load, read or getJSON functions into it. Learn about it in Require section.

Using Components

To use a Component inside any page or layout you have to use the load function.

return {
  content: (props) => {
    const menu = load('app/components/Menu.js');
    const items = [
      {url: '/', title: 'Home'},
      {url: '/dashboard', title: 'Dashboard'},
      {url: '/samples', title: 'Samples'},
    ]
    return `
      <div class="menu">${menu.render(items)}</div>
      <div class="content">${props.conent}</div>
    `;
  }
}

To use a component in client side you must save the component into components/ root folder in your project.

Then in client side, you will have access to this object from previous.components.*.

return {
  content: (props) => {
    return '<div id="cardsContainer" class="grid"></div>';
  },
  ready: () => {
    // Get Component
    const Card = previous.components.Card;
    // Get container in DOM
    const $cardsContainer = $('#cardsContainer');
    $cardsContainer.empty();
    // Fetch Data from Server
    $.get('/api/cards', (cards) => {
      cards.map((cardData) => {
        // Render Card Component inside the container with jQuery
        $cardsContainer.append(Card.render(cardData));
      });
    });
  }
}

If you save the component into a directory inside components/ folder then you have to use the folder name as the container object of the component.

For example, if the component is saved in components/books/BookView.js then the component will be accessible from previous.components.books.BookView object in client side.

return {
  content: (props) => {
    return '<div id="cardsContainer" class="grid"></div>';
  },
  ready: () => {

    ...

    const BookView = previous.components.books.BookView;
    
    ...

  }
}

Remember!

If you want to use the component in client side you can not use require, load, read or getJSON functions into it. Learn about it in Require section.