Props dans les Composants fonctionnels

import React from 'react';

// Defining a functional component named "ChildComponent"
// The component takes a single argument "props"
const ChildComponent = (props) => {
  // Rendering JSX content within the component
  return (
    <div>
      {/* Using a prop named "message" to display a dynamic message */}
      <p>{props.message}</p>
      
      {/* Using a prop named "count" to display a dynamic count */}
      <p>Count: {props.count}</p>

      {/* Using a prop named "isActive" to conditionally render content */}
      {props.isActive ? (
        <p>This is active!</p>
      ) : (
        <p>This is not active.</p>
      )}
    </div>
  );
};

// Exporting the component to make it available for use in other files
export default ChildComponent;

  

import React from 'react';
import ChildComponent from './ChildComponent';

const App = () => {
  return (
    <div>
      {/* Using ChildComponent with different prop values */}
      <ChildComponent message="Hello, props!" count={42} isActive={true} />
      <ChildComponent message="Another message" count={99} isActive={false} />
    </div>
  );
};

export default App;

  

import React from 'react';

// Définition d'un composant fonctionnel nommé "UserProfile"
// Il prend un objet "props" comme argument
const UserProfile = (props) => {
  // Rendu du contenu JSX dans le composant
  return (
    <div>
      {/* Affichage du nom d'utilisateur passé en tant que prop */}
      <h2>Username: {props.username}</h2>

      {/* Affichage de l'âge avec une valeur par défaut de 18 si non fourni */}
      <p>Age: {props.age || 18}</p>

      {/* Affichage conditionnel basé sur la présence de la prop "isAdmin" */}
      {props.isAdmin && <p>This user is an admin.</p>}

      {/* Utilisation d'une fonction passée en tant que prop pour gérer un événement */}
      <button onClick={props.FonctionFromParent}>
        Click me
      </button>
    </div>
  );
};

// Exportation du composant pour le rendre disponible pour une utilisation dans d'autres fichiers
export default UserProfile;

  

import React from 'react';
import UserProfile from './UserProfile';

const App = () => {
  // Une fonction à exécuter lorsqu'un bouton est cliqué dans la component child  (UserProfile)
  const handleButtonClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      {/* Utilisation de UserProfile avec différentes valeurs de props */}
      <UserProfile username="JohnDoe" age={25} isAdmin={true} FonctionFromParent={handleButtonClick} />
      <UserProfile username="JaneDoe" isAdmin={false} FonctionFromParent={handleButtonClick} />
    </div>
  );
};

export default App;

  

// Task.js
import React from 'react';

// Composant fonctionnel pour représenter une tâche
const Task = ({ task, onToggle }) => {
  return (
    <div>
      {/* Affiche le texte de la tâche */}
      <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
        {task.text}
      </span>
      
      {/* Bouton pour marquer la tâche comme terminée */}
      <button onClick={() => onToggle(task.id)}>
        Toggle
      </button>
    </div>
  );
};

export default Task;

  

// TaskList.js
import React from 'react';
import Task from './Task';

// Composant pour afficher la liste de tâches
const TaskList = ({ tasks, onToggle, onDelete }) => {
  return (
    <ul>
      {/* Map à travers les tâches et rend chaque tâche en utilisant le composant Task */}
      {tasks.map(task => (
        <li key={task.id}>
          <Task task={task} onToggle={onToggle} />
          
          {/* Bouton pour supprimer la tâche */}
          <button onClick={() => onDelete(task.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

  

// TaskForm.js
import React, { useState } from 'react';

// Composant pour le formulaire d'ajout de tâches
const TaskForm = ({ onAdd }) => {
  const [newTask, setNewTask] = useState('');

  const handleAdd = () => {
    if (newTask.trim() !== '') {
      // Ajoute une nouvelle tâche avec un ID unique généré à la volée
      onAdd({ id: Date.now(), text: newTask, completed: false });
      setNewTask('');
    }
  };

  return (
    <div>
      <input 
        type="text" 
        value={newTask} 
        onChange={(e) => setNewTask(e.target.value)} 
      />
      
      {/* Bouton pour ajouter une nouvelle tâche */}
      <button onClick={handleAdd}>
        Add Task
      </button>
    </div>
  );
};

export default TaskForm;
  

// App.js
import React, { useState } from 'react';
import TaskList from './TaskList';
import TaskForm from './TaskForm';

const App = () => {
  // État pour stocker la liste des tâches
  const [tasks, setTasks] = useState([]);

  // Fonction pour ajouter une tâche à la liste
  const handleAddTask = (newTask) => {
    setTasks([...tasks, newTask]);
  };

  // Fonction pour marquer une tâche comme terminée ou non terminée
  const handleToggleTask = (taskId) => {
    setTasks(tasks.map(task => 
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  // Fonction pour supprimer une tâche de la liste
  const handleDeleteTask = (taskId) => {
    setTasks(tasks.filter(task => task.id !== taskId));
  };

  return (
    <div>
      <h1>Task Manager</h1>

      {/* Utilisation du composant TaskForm pour ajouter de nouvelles tâches */}
      <TaskForm onAdd={handleAddTask} />

      {/* Utilisation du composant TaskList pour afficher la liste de tâches */}
      <TaskList tasks={tasks} onToggle={handleToggleTask} onDelete={handleDeleteTask} />
    </div>
  );
};

export default App;

  

// ProductList.js
import React from 'react';

// Composant pour afficher une liste de produits
const ProductList = ({ products, onProductSelect }) => {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id} onClick={() => onProductSelect(product)}>
          {product.name}
        </li>
      ))}
    </ul>
  );
};

export default ProductList;

// ProductDetails.js
import React from 'react';

// Composant pour afficher les détails d'un produit spécifique
const ProductDetails = ({ product }) => {
  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
};

export default ProductDetails;

// ProductForm.js
import React, { useState } from 'react';

// Composant pour le formulaire d'ajout de produits
const ProductForm = ({ onProductAdd }) => {
  const [newProduct, setNewProduct] = useState({ name: '', description: '', price: 0 });

  const handleAdd = () => {
    if (newProduct.name.trim() !== '' && newProduct.description.trim() !== '') {
      // Ajoute un nouveau produit avec un ID unique généré à la volée
      onProductAdd({ ...newProduct, id: Date.now() });
      setNewProduct({ name: '', description: '', price: 0 });
    }
  };

  return (
    <div>
      <label>Name:</label>
      <input 
        type="text" 
        value={newProduct.name} 
        onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })} 
      />

      <label>Description:</label>
      <input 
        type="text" 
        value={newProduct.description} 
        onChange={(e) => setNewProduct({ ...newProduct, description: e.target.value })} 
      />

      <label>Price:</label>
      <input 
        type="number" 
        value={newProduct.price} 
        onChange={(e) => setNewProduct({ ...newProduct, price: parseFloat(e.target.value) })} 
      />

      {/* Bouton pour ajouter un nouveau produit */}
      <button onClick={handleAdd}>
        Add Product
      </button>
    </div>
  );
};

export default ProductForm;
 

// App.js
import React, { useState } from 'react';
import ProductList from './ProductList';
import ProductDetails from './ProductDetails';
import ProductForm from './ProductForm';

const App = () => {
  // État pour stocker la liste des produits et le produit sélectionné
  const [products, setProducts] = useState([]);
  const [selectedProduct, setSelectedProduct] = useState(null);

  // Fonction pour ajouter un produit à la liste
  const handleAddProduct = (newProduct) => {
    setProducts([...products, newProduct]);
  };

  // Fonction pour sélectionner un produit spécifique
  const handleSelectProduct = (product) => {
    setSelectedProduct(product);
  };

  return (
    <div>
      <h1>Product Management</h1>

      {/* Utilisation du composant ProductForm pour ajouter de nouveaux produits */}
      <ProductForm onProductAdd={handleAddProduct} />

      {/* Utilisation du composant ProductList pour afficher la liste de produits */}
      <ProductList products={products} onProductSelect={handleSelectProduct} />

      {/* Utilisation du composant ProductDetails pour afficher les détails du produit sélectionné */}
      {selectedProduct && <ProductDetails product={selectedProduct} />}
    </div>
  );
};

export default App;
 

// Article.js
import React from 'react';

// Composant pour représenter un article
const Article = ({ article, onArticleSelect }) => {
  return (
    <div onClick={() => onArticleSelect(article)}>
      <h3>{article.title}</h3>
      <p>{article.excerpt}</p>
    </div>
  );
};

export default Article;

// ArticleList.js
import React from 'react';
import Article from './Article';

// Composant pour afficher une liste d'articles
const ArticleList = ({ articles, onArticleSelect }) => {
  return (
    <div>
      {articles.map(article => (
        <Article key={article.id} article={article} onArticleSelect={onArticleSelect} />
      ))}
    </div>
  );
};

export default ArticleList;
 

// ArticleDetails.js
import React from 'react';

// Composant pour afficher les détails d'un article spécifique
const ArticleDetails = ({ article }) => {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
      <h4>Comments:</h4>
      <ul>
        {article.comments.map(comment => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default ArticleDetails;

// ArticleForm.js
import React, { useState } from 'react';

// Composant pour le formulaire d'ajout d'articles
const ArticleForm = ({ onArticleAdd }) => {
  const [newArticle, setNewArticle] = useState({ title: '', content: '', comments: [] });

  const handleAdd = () => {
    if (newArticle.title.trim() !== '' && newArticle.content.trim() !== '') {
      // Ajoute un nouvel article avec un ID unique généré à la volée
      onArticleAdd({ ...newArticle, id: Date.now() });
      setNewArticle({ title: '', content: '', comments: [] });
    }
  };

  return (
    <div>
      <label>Title:</label>
      <input 
        type="text" 
        value={newArticle.title} 
        onChange={(e) => setNewArticle({ ...newArticle, title: e.target.value })} 
      />

      <label>Content:</label>
      <textarea 
        value={newArticle.content} 
        onChange={(e) => setNewArticle({ ...newArticle, content: e.target.value })} 
      />

      {/* Bouton pour ajouter un nouvel article */}
      <button onClick={handleAdd}>
        Add Article
      </button>
    </div>
  );
};

export default ArticleForm;
 

// App.js
import React, { useState } from 'react';
import ArticleList from './ArticleList';
import ArticleDetails from './ArticleDetails';
import ArticleForm from './ArticleForm';

const App = () => {
  // État pour stocker la liste des articles et l'article sélectionné
  const [articles, setArticles] = useState([]);
  const [selectedArticle, setSelectedArticle] = useState(null);

  // Fonction pour ajouter un article à la liste
  const handleAddArticle = (newArticle) => {
    setArticles([...articles, newArticle]);
  };

  // Fonction pour sélectionner un article spécifique
  const handleSelectArticle = (article) => {
    setSelectedArticle(article);
  };

  return (
    <div>
      <h1>Blog Application</h1>

      {/* Utilisation du composant ArticleForm pour ajouter de nouveaux articles */}
      <ArticleForm onArticleAdd={handleAddArticle} />

      {/* Utilisation du composant ArticleList pour afficher la liste d'articles */}
      <ArticleList articles={articles} onArticleSelect={handleSelectArticle} />

      {/* Utilisation du composant ArticleDetails pour afficher les détails de l'article sélectionné */}
      {selectedArticle && <ArticleDetails article={selectedArticle} />}
    </div>
  );
};

export default App;