Course Preview Demo
Example of using the CoursePreview component
Course Preview Component
This is an example of how to use the CoursePreview component to create interactive course demonstrations.
Basic Usage
Les Fonctions en JavaScript
Maîtrisez les fonctions, les arrow functions et les closures
Les Fonctions en JavaScript
Bienvenue dans ce chapitre sur les fonctions ! Tu vas apprendre à créer des fonctions réutilisables et puissantes.
1. Introduction aux fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles sont essentielles en programmation !
Pourquoi utiliser des fonctions ?
Les fonctions permettent de :
- Réutiliser du code
- Organiser ton programme
- Éviter les répétitions
- Faciliter la maintenance
Définition et syntaxe de base
Voici comment créer une fonction simple :
function saluer(nom) {
return "Bonjour " + nom + " !";
}
// Utilisation
const message = saluer("Marie");
console.log(message); // "Bonjour Marie !"Le mot-clé return permet de renvoyer une valeur depuis la fonction. Sans return, la fonction renvoie undefined.
Paramètres et valeurs de retour
Les fonctions peuvent accepter plusieurs paramètres et retourner différents types de valeurs :
function additionner(a, b) {
return a + b;
}
function multiplier(x, y) {
return x * y;
}
console.log(additionner(5, 3)); // 8
console.log(multiplier(4, 7)); // 282. Arrow Functions
Les arrow functions sont une syntaxe moderne et concise pour déclarer des fonctions en JavaScript.
// Fonction classique
function saluer(nom) {
return "Salut " + nom;
}
// Arrow function équivalente
const saluerArrow = (nom) => {
return "Salut " + nom;
}
// Version encore plus courte (return implicite)
const saluerCourt = nom => "Salut " + nom;
console.log(saluerCourt("Alex")); // "Salut Alex"Component Props
The CoursePreview component accepts the following props:
chapter(number) - Chapter numberduration(number) - Duration in minutesprogress(number) - Progress percentage (0-100)title(string) - Course titledescription(string) - Course descriptionchildren(ReactNode) - The course content (MDX)
Features
- ✅ Responsive design
- ✅ Scrollable content with scroll indicator
- ✅ Beautiful gradient styling
- ✅ Progress tracking
- ✅ Chapter and duration badges
- ✅ Fully compatible with MDX components (Callout, Quiz, code blocks, etc.)