Module 11 : Bonnes pratiques

Ce module final résume les bonnes pratiques pour le développement d'applications SmartMaker.

components/pages/private/TasksPage/
├── index.jsx           # Composant principal (export)
├── TasksPage.jsx       # Logique et rendu
├── components/         # Sous-composants locaux
│   ├── TaskList.jsx
│   └── TaskFilters.jsx
└── hooks/              # Hooks spécifiques à cette page
    └── useTasks.js

• Composants : PascalCase (TaskList, UserProfile)
• Hooks : camelCase avec préfixe use (useTasks, useAuth)
• Fichiers : même nom que le composant (TaskList.jsx)
• Dossiers : PascalCase pour composants, camelCase pour hooks

snippet.javascript

// Éviter : objet recréé à chaque rendu
<Component style={{ color: 'red' }} />
 
// Préférer : objet stable
const style = useMemo(() => ({ color: 'red' }), []);
<Component style={style} />

snippet.javascript

// Pour les composants mémorisés
const handleClick = useCallback((id) => {
    setSelected(id);
}, []);

snippet.javascript

import { lazy, Suspense } from 'react';
import { Spinner } from '@cap-rel/smartcommon';
 
const TasksPage = lazy(() => import('./pages/private/TasksPage'));
 
<Suspense fallback={<Spinner />}>
    <TasksPage />
</Suspense>

snippet.javascript

globalState: {
    reducers: {
        // Auth
        session: null,
 
        // Préférences
        settings: { lng: 'fr', theme: 'light' },
 
        // Cache de données
        cache: {
            categories: [],
            lastFetch: null
        }
    }
}

snippet.javascript

const loadData = async () => {
    st.set('loading', true);
    st.set('error', null);
 
    try {
        const data = await api.private.get('items').json();
        st.set('items', data.items);
    } catch (err) {
        st.set('error', err.message);
        // Log pour debug
        console.error('Load error:', err);
    } finally {
        st.set('loading', false);
    }
};

snippet.javascript

useEffect(() => {
    const controller = new AbortController();
 
    const load = async () => {
        try {
            const data = await api.private.get('items', {
                signal: controller.signal
            }).json();
            setItems(data);
        } catch (err) {
            if (err.name !== 'AbortError') {
                setError(err.message);
            }
        }
    };
 
    load();
 
    return () => controller.abort();
}, []);

snippet.javascript

// useForm ne fait pas de validation automatique.
// Validez les champs manuellement :
form.setField({
    name: 'email',
    value: inputValue,
    errors: {
        required: { condition: !inputValue },
        format: { condition: inputValue && !inputValue.includes('@') }
    }
});

snippet.javascript

// Vérifier les erreurs
const hasError = form.get('errors.email.required');
const hasFormatError = form.get('errors.email.format');

snippet.javascript

// JAMAIS
const API_KEY = 'secret123';
 
// OK : variables d'environnement serveur uniquement
// Le client n'a accès qu'aux VITE_ prefixés
const API_URL = import.meta.env.VITE_API_URL;

Ne pas faire confiance aux données du client :

snippet.php

// Controller PHP
public function create($payload)
{
    // Toujours valider
    if (empty($payload['label'])) {
        return ['Label required', 400];
    }
 
    // Toujours vérifier les droits
    if (!$user->hasRight('mymodule', 'create')) {
        return ['Forbidden', 403];
    }
 
    // Toujours échapper
    $label = $db->escape($payload['label']);
}

React échappe automatiquement, mais attention à dangerouslySetInnerHTML :

snippet.javascript

// Dangereux
<div dangerouslySetInnerHTML={{ __html: userContent }} />
 
// Si nécessaire, sanitiser d'abord
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userContent) }} />

snippet.javascript

// TasksPage.test.jsx
import { render, screen, waitFor } from '@testing-library/react';
import { TasksPage } from './TasksPage';
 
test('affiche la liste des tâches', async () => {
    render(<TasksPage />);
 
    await waitFor(() => {
        expect(screen.getByText('Mes tâches')).toBeInTheDocument();
    });
});

• React DevTools : inspecter les composants et l'état
• Redux DevTools : voir les actions et l'état global
• Console : st.set avec debug: true

snippet.javascript

const st = useStates({
    initialStates: { ... },
    debug: import.meta.env.DEV  // Logs uniquement en dev
});

• [ ] Toutes les erreurs sont gérées
• [ ] Les chargements affichent un spinner
• [ ] La validation fonctionne côté client ET serveur
• [ ] Les droits sont vérifiés côté serveur
• [ ] Le mode offline fonctionne (si applicable)
• [ ] Les traductions sont complètes
• [ ] Les performances sont acceptables
• [ ] HTTPS est activé
• [ ] Les variables d'environnement de prod sont configurées

• Documentation React : https://react.dev
• Documentation SmartCommon : https://inligit.fr/cap-rel/dolibarr/smartmaker/smartcommon
• Documentation Dolibarr : https://wiki.dolibarr.org

← Chapitre précédent | Retour à l'index de la formation