---
title: "Module 6 : SmartCommon - Composants"
weight: 520
category: "Formation"
type: "formation"
---

# Module 6 : SmartCommon - Composants

> SmartCommon est la bibliothèque de composants React partagés pour toutes les applications SmartMaker. Ce module couvre les composants essentiels.

## Prérequis

- Module 5 complété (architecture SmartMaker)
- Comprendre les composants React et les props

## Installation

### 1. Configurer le registry npm

Dans le fichier `.npmrc` :

```
@cap-rel:registry=https://inligit.fr/api/v4/projects/197/packages/npm/
```

### 2. Installer le package

```bash
npm install @cap-rel/smartcommon
```

### 3. Importer les styles

Dans `main.jsx` :

```javascript
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
```

## Catégories de composants

| Catégorie | Composants | Usage |
| --- | --- | --- |
| Mise en page | Page, Block, Panel, Popup | Structure des pages |
| Navigation | Navbar, Sidebar, Tabbar | Menus et navigation |
| Formulaires | Input, Select, Calendar, etc. | Saisie de données |
| Affichage | String, Number, Datetime, etc. | Formatage des données |
| UI | Button, Spinner, Tag, List | Éléments d'interface |

## Chapitres

| # | Chapitre | Contenu |  |
| --- | --- | --- | --- |
| 1 | [Mise en page](/training/module6-smartcommon-composants/mise-en-page) | Page, Block, Panel, Popup |
| 2 | [Navigation](/training/module6-smartcommon-composants/navigation) | Navbar, Sidebar, Tabbar |
| 3 | [Formulaires](/training/module6-smartcommon-composants/formulaires) | Input, Select, Calendar, Form |
| 4 | [Affichage](/training/module6-smartcommon-composants/affichage) | Formats et composants de display |

## Import des composants

```javascript
// Import individuel
import { Page, Block, Button } from '@cap-rel/smartcommon';

// Ou import groupé
import {
    // Mise en page
    Page,
    Block,
    Panel,
    Popup,

    // Navigation
    Navbar,
    Tabbar,
    TabbarItem,

    // Formulaires
    Form,
    Input,
    Select,
    Calendar,
    Boolean,

    // Affichage
    List,
    ListItem,
    Button,
    Spinner,
    Tag
} from '@cap-rel/smartcommon';
```

## Objectifs du module

À la fin de ce module, vous saurez :

- Construire une page avec Page et Block
- Créer des formulaires complets
- Utiliser les composants de navigation
- Formater l'affichage des données

[Commencer : Mise en page ->](/training/module6-smartcommon-composants/mise-en-page)