ajout correction premiers TP

React/correction_tp1/App.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+
+import './App.css';
+
+// Ce composant Toggle reçoit une fonction onChange
+// qu'il appelle avec son nouvel état à chaque changement.
+// Cela permet à son parent d'être prévenu à chaque changement d'état
+const Toggle = ({onChange}) => {
+	const [on, setOn] = useState(false);
+	const handleChange = () => {
+		setOn(!on);
+		onChange(!on);
+	};
+	return <div>
+		<p>Toggle is { on ? 'ON' : 'OFF' }</p>
+		<button onClick={handleChange}>Change value</button>
+	</div>;
+};
+
+// Ce composant gère et affiche l'état d'un compteur
+// Un bouton permet d'incrémenter la valeur
+const Counter = () => {
+	const [count, setCount] = useState(0);
+	return <div>
+		<p>Value: {count}</p>
+		<button onClick={() => setCount(c => c+1)}>Increment</button>
+	</div>;
+};
+
+// Ce custom hook permet à n'importe quel composant
+// d'utiliser une horloge qui se met à jour chaque seconde
+const useClock = () => {
+	const [time, setTime] = useState(new Date().toLocaleTimeString());
+	
+	useEffect(() => {
+		const id = setInterval(() => {
+			setTime(new Date().toLocaleTimeString());
+		}, 1000);
+		return () => clearInterval(id);
+	}, []);
+
+	return time;
+};
+
+// Ce composant gère et affiche une horloge qui se met à jour à chaque seconde
+// Un custom hook n'est qu'une simple fonction (comme si on mettait
+// le code du custom hook directement dans ce composant)
+const Clock = () => {
+	const time = useClock();
+	return <p>It is {time}</p>;
+};
+
+const App = () => {
+	const [showClock, setShowClock] = useState(true);
+	const [nbOn, setNbOn] = useState(0);
+
+	return (
+		<div className="App">
+			<Toggle onChange={(v) => { if (v) setNbOn(n => n+1) }} />
+            <p>Nb times toggle on: {nbOn}</p>
+			<Counter />
+			<div>
+				<label>Show clock</label>
+				<input type="checkbox" checked={showClock} onChange={(e) => setShowClock(e.target.checked)} />
+			</div>
+			{ showClock && <Clock /> }
+		</div>
+	);
+};
+
+export default App;

React/correction_tp2/Items.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+// ItemsList
+// =========
+
+const ItemsList = ({items, removeItem}) => (
+	<ul>
+		{ items.map((item, idx) => (
+			<li key={idx}>
+				{item}
+				<button onClick={() => removeItem(idx)}> Remove </button>
+			</li>
+		)) }
+	</ul>
+);
+
+// AddItemForm
+// ===========
+
+const AddItemForm = ({addItem}) => {
+	const [currentText, setCurrentText] = useState('');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		addItem(currentText);
+		setCurrentText('');
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<input
+				type="text"
+				value={currentText}
+				onChange={e => setCurrentText(e.target.value)}
+			/>
+			<button>Add</button>
+		</form>
+	);
+};
+
+// ItemsApp
+// ========
+
+const ItemsApp = () => {
+	const [items, setItems] = useState([]);
+
+	const addItem = (text) => {
+		setItems(items => [text, ...items].sort((a, b) => a.localeCompare(b)));
+	};
+
+	const removeItem = (index) => {
+		setItems(items => items.filter((i, idx) => idx !== index));
+	};
+
+	return <>
+		<AddItemForm addItem={addItem} />
+		<ItemsList
+			items={items}
+			removeItem={removeItem}
+		/>
+	</>;
+};
+
+export default ItemsApp;

React/correction_tp3/Grocery.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+// la modification des éléments de la liste n'est pas gérée ici
+// à vous de le faire..
+
+// Item
+// ====
+
+const Item = ({item}) => <>
+	<p>Name: {item.name}</p>
+    <p>Cost: {item.cost}€</p>
+    <p>Quantity: {item.quantity}</p>
+</>;
+
+// ItemsList
+// =========
+
+const ItemsList = ({items, updateItem, removeItem}) => <ul>
+	{ items.map((item, idx) => (
+		<li key={idx}>
+			<Item item={item} updateItem={(changes) => updateItem(idx, changes)} />
+			<button onClick={() => removeItem(idx)}> Remove </button>
+		</li>
+	)) }
+</ul>;
+
+// AddItemForm
+// ===========
+
+const AddItemForm = ({addItem}) => {
+	const [currentText, setCurrentText] = useState('');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		addItem(currentText);
+		setCurrentText('');
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<input
+				type="text"
+				value={currentText}
+				onChange={e => setCurrentText(e.target.value)}
+			/>
+			<button>Add</button>
+		</form>
+	);
+};
+
+// GroceryApp
+// ===========
+
+const GroceryApp = () => {
+	const [items, setItems] = useState([]);
+
+	const addItem = (text) => {
+		setItems(items => [
+			{name: text, cost: 1, quantity: 1},
+			...items
+		]);
+	};
+
+	const removeItem = (index) => {
+		setItems(items => items.filter((i, idx) => idx !== index));
+	};
+
+	return <>
+		<h1>Grocery list</h1>
+		<AddItemForm addItem={addItem} />
+		<ItemsList
+			items={items}
+			removeItem={removeItem}
+		/>
+		<h3>Total cost : { items.reduce((acc, i) => acc + i.cost * i.quantity, 0) }</h3>
+	</>;
+};
+
+export default GroceryApp;

React/correction_tp4/App.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { HashRouter, Link, Switch, Route, Redirect } from 'react-router-dom';
+
+import Items from './Items';
+import Grocery from './Grocery';
+
+const Menu = () => {
+	return <ul>
+		<li><Link to="/">Home</Link></li>
+		<li><Link to="/items">Items</Link></li>
+		<li><Link to="/grocery">Grocery</Link></li>
+	</ul>;
+};
+
+const App = () => {
+	return <HashRouter>
+		<Menu />
+		<Switch>
+			<Route exact path="/">
+				<h1>Welcome</h1>
+			</Route>
+			<Route path="/items">
+				<Items />
+			</Route>
+			<Route path="/grocery">
+				<Grocery />
+			</Route>
+			<Redirect to="/" />
+		</Switch>
+	</HashRouter>;
+};
+
+export default App;

React/correction_tp4/Grocery.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+
+// la modification des éléments de la liste n'est pas gérée ici
+// à vous de le faire..
+
+// la sauvegarde des données en localStorage n'est pas faite ici non plus..
+
+// Item
+// ====
+
+const Item = ({item}) => <>
+	<p>Name: {item.name}</p>
+    <p>Cost: {item.cost}€</p>
+    <p>Quantity: {item.quantity}</p>
+</>;
+
+// ItemsList
+// =========
+
+const ItemsList = ({items, updateItem, removeItem}) => <ul>
+	{ items.map((item, idx) => (
+		<li key={idx}>
+			<Item item={item} updateItem={(changes) => updateItem(idx, changes)} />
+			<button onClick={() => removeItem(idx)}> Remove </button>
+		</li>
+	)) }
+</ul>;
+
+// AddItemForm
+// ===========
+
+const AddItemForm = ({addItem}) => {
+	const [currentText, setCurrentText] = useState('');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		addItem(currentText);
+		setCurrentText('');
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<input
+				type="text"
+				value={currentText}
+				onChange={e => setCurrentText(e.target.value)}
+			/>
+			<button>Add</button>
+		</form>
+	);
+};
+
+// GroceryApp
+// ===========
+
+const GroceryApp = () => {
+	const [items, setItems] = useState([]);
+
+	const addItem = (text) => {
+		setItems(items => [
+			{name: text, cost: 1, quantity: 1},
+			...items
+		]);
+	};
+
+	const removeItem = (index) => {
+		setItems(items => items.filter((i, idx) => idx !== index));
+	};
+
+	return <>
+		<h1>Grocery list</h1>
+		<AddItemForm addItem={addItem} />
+		<ItemsList
+			items={items}
+			removeItem={removeItem}
+		/>
+		<h3>Total cost : { items.reduce((acc, i) => acc + i.cost * i.quantity, 0) }</h3>
+	</>;
+};
+
+export default GroceryApp;

React/correction_tp4/Items.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+// la sauvegarde des données en localStorage n'est pas faite ici..
+
+// ItemsList
+// =========
+
+const ItemsList = ({items, removeItem}) => (
+	<ul>
+		{ items.map((item, idx) => (
+			<li key={idx}>
+				{item}
+				<button onClick={() => removeItem(idx)}> Remove </button>
+			</li>
+		)) }
+	</ul>
+);
+
+// AddItemForm
+// ===========
+
+const AddItemForm = ({addItem}) => {
+	const [currentText, setCurrentText] = useState('');
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		addItem(currentText);
+		setCurrentText('');
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<input
+				type="text"
+				value={currentText}
+				onChange={e => setCurrentText(e.target.value)}
+			/>
+			<button>Add</button>
+		</form>
+	);
+};
+
+// ItemsApp
+// ========
+
+const ItemsApp = () => {
+	const [items, setItems] = useState([]);
+
+	const addItem = (text) => {
+		setItems(items => [text, ...items].sort((a, b) => a.localeCompare(b)));
+	};
+
+	const removeItem = (index) => {
+		setItems(items => items.filter((i, idx) => idx !== index));
+	};
+
+	return <>
+		<AddItemForm addItem={addItem} />
+		<ItemsList
+			items={items}
+			removeItem={removeItem}
+		/>
+	</>;
+};
+
+export default ItemsApp;