Créer votre premier composant

Les composants constituent le cœur de Nexy. Ces éléments modulaires et réutilisables vous permettent de construire des interfaces utilisateur (UI) de manière structurée et efficace. Découvrez les bases essentielles pour créer vos premiers composants Nexy.

Anatomie d'un composant

Un composant Nexy est une fonction Python qui génère des éléments d'interface utilisateur réutilisables, comme détaillé dans la section Introduction.

Structure d'un composant

Prenons l'exemple d'un composant Profile pour illustrer la structure standard :

Structure

components

Profile

●__init__.py
●Profile.html

Un composant Nexy se compose de deux parties essentielles :

La logique métier (Python) - Une fonction décorée retournant un dictionnaire de données

components/profile/__init__.py

from nexy import Component

@Component(import=[])
def Profile():
 return {}

Le template (HTML) - La structure visuelle du composant

components/profile/Profile.html

<img
    src="https://i.imgur.com/MK3eW3Am.jpg"
    alt="Katherine Johnson"
/>

Composition de composants

Une fois votre composant Profile créé, vous pouvez l'intégrer dans d'autres composants. Par exemple, créons un composant Gallery qui affichera plusieurs profils.

Structure du composant Gallery :

Structure

components

Gallery

●__init__.py
●Gallery.html

Pour utiliser un composant dans un autre, il faut :

L'importer dans la partie logique
Le déclarer dans le décorateur @Component

components/Gallery/__init__.py

from nexy import Component
from components.Profile import Profile

@Component(import=[Profile])
def Gallery():
 return {}

Le composant peut ensuite être utilisé comme une balise HTML personnalisée et auto-fermante dans le template

components/Gallery/Gallery.html

<section>
  <h1>Amazing scientists</h1>
  <Profile />
  <Profile />
  <Profile />
</section>

Rendu côté serveur (SSR)

Nexy utilise le rendu côté serveur (Server-Side Rendering ou SSR), ce qui signifie que le HTML est généré sur le serveur avant d'être envoyé au navigateur. Cette approche diffère des frameworks JavaScript qui effectuent le rendu côté client.

Exemple de rendu du composant Gallery :

Browser

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Transmission de données au template

Les composants peuvent transmettre des données à leur template via un dictionnaire de retour. Reprenons l'exemple du composant Profile :

components/profile/__init__.py

from nexy import Component

@Component(import=[])
def Profile():
  return {
      "name": "Katherine Johnson",
      "image": "https://i.imgur.com/MK3eW3Am.jpg",
  }

Les données sont accessibles dans le template via la syntaxe {{clé}} :

components/profile/Profile.html

<img
    src={{image}}
    alt={{name}}
/>

Propriétés (Props)

Les props permettent de personnaliser un composant lors de son utilisation. Ce sont des paramètres de fonction Python qui peuvent être utilisés comme attributs dans le template.

Exemple de composant Profile avec props :

components/profile/__init__.py

from nexy import Component

@Component(import=[])
def Profile(image:str, name:str):
  return {
      "name": name,
      "image": image,
  }

Utilisation du composant avec ses props :

components/Gallery/Gallery.html

<section>
  <h1>Amazing scientists</h1>
  <Profile 
      name="Katherine Johnson" 
      image="https://i.imgur.com/MK3eW3Am.jpg" 
  />
</section>

La propriété caller

Nexy utilise Jinja comme moteur de template. La propriété caller permet à un composant de recevoir et d'afficher des éléments enfants, fonctionnant ainsi comme les balises HTML <div> ou <section>.

Voici un exemple d'utilisation :

components/Card/__init__.py

from nexy import Component

@Component(import=[])
def Card(caller):
  return {"children":caller()}

components/Card/Card.html

<div class="card">
  {{ children }}
</div>

Vous pouvez ensuite utiliser ce composant comme conteneur :

Utilisation

<Card>
  <h1>Mon titre</h1>
  <p>Mon contenu</p>
</Card>

👌 Félicitations !

Vous avez acquis les bases essentielles des composants Nexy. Cette compréhension vous permettra de créer des interfaces utilisateur élégantes et évolutives. Dans la section suivante, nous explorerons la création de vues (Views) pour structurer vos composants en pages cohérentes.

←Composants views→