Components

Overview

The components are the piece of code that can be import in other files, Declaring a component means you can use that component any where in your views folder.

The Zare supports File-based components that means each file in a views folder is a component and can be use somewhere else, But one file can return one component to create another component you have to create a new file.

Zare Convention

In the project your working on you can name your template folder what you want e.g. views (default), templates etc. But Zare provides some conventions that can be efficient for your projects.

Folder Convention

Kindly follow a fix template folder structure for your project that can be helpful for navigating between pages and components.

views/
├── pages/           # All Pages should be here
│   ├── home.zare
│   ├── index.zare
│   └── about.zare
├── components/      # All Components should be here
│   ├── card.zare
│   ├── navbar.zare
│   └── footer.zare
└── base.zare        # Base template 

Declare A Component

To declare a component first create a folder components if not already than paste the following code in it.

/views/components/profile.zare

serve (
    <div>
        <img src="@(link)" />
        <h3>Username - @(username)</h3>
        <p>Bio - @(bio)</p>
    </div>
)

Import Component

To use any component in your file you must have to import it first here is how?

/views/pages/dashboard.zare

as Profile import "./components/profile"

Here the statement must start with as keyword followed by an identifier which must be unique for every component and then import and final the path of your file.

Use Component

To use components in your Zare code is vary easy and similar to JSX code, Zare provides two main and recommended methods to use any component.

1. Self Closing Component

   /views/pages/dashboard.zare

   as Profile import "./components/profile"
   
   serve (
       <Profile link="#" username="@(username)" bio="@(bio)"/>
   )

   Here the link, username and bio are not normal html attributes they are Parameters that can be used in the component file, Whenever you call a component you have to pass the required parameters as same as HTML attributes.

   Example

   /views/pages/dashboard.zare

   as Profile import "./components/profile"
   
   serve (
       <Profile link="#" username="@(username1)" bio="@(bio1)"/>
       <Profile link="#" username="@(username2)" bio="@(bio2)"/>
   )

   The @(username1), @(username2) and @(bio1), @(bio2) are the expression parameters that are passed from express router using the res.render method

2. Opening And Closing Component

   The using a component with opening and closing tag provides an extra parameter @(slot) and you can accept it your component declaration file.

   as Article import "../components/article"

   serve (
       <Article title="Lorem Ipsum">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
       </Article>
   )

serve (
    <h3>@(title)</h3>
    <p>@(slot)</p>
)

Here the @(title) will replace with Lorem Ipsum and @(slot) will replace the content written between open and closing component tags.

*NOTE: You can’t use any parameter in replace of @(slot) it is the parameter to access Childs in components otherwise it will throw undefined