diff --git a/public/index.html b/public/index.html
index 4a85aaec20517b307d01f9c9f46614368fca4e64..b926cbd9e2fff1882b39a8ab5081e9b8f6fc3e6c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,14 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#123456" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
<meta
name="description"
content="C'est mon site wesh"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <title>React App</title>
+ <title>Formation React</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/meme.jpg b/public/meme.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2f1dc3d345586c76e8cc83aef969c8210d6e730c
Binary files /dev/null and b/public/meme.jpg differ
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc4d41b9b46e05112e9f45b7ea6ac0ba15e..0000000000000000000000000000000000000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/App.js b/src/App.js
index 8194b99fcdb840ff7b816fc83c82d8ca0de4c1f7..a4f536df313d116b800f62449b44204ab715fb77 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,26 @@
import './App.css';
-import { Counter } from './Counter.js';
+import { Counter } from './Counter';
+import { default as Grid } from './Grid.js';
const App = () => {
+ const compteurs = []
+ for (let pas = 0; pas < 5; pas++) {
+ compteurs.push(<Counter title={"Le compteur n° "+String(pas)}/>)
+ }
return (
- <div className="App">
- <div style={{background:'lightblue', borderRadius:'1em', padding: "2em", margin: "1em"}}>
- <h1>Bienvenue dans notre super site !</h1>
- </div>
- <Counter/>
+ <div>
+ <div className="App">
+ <div style={{
+ background: 'lightblue',
+ borderRadius: '1em',
+ padding: '2em',
+ margin: '1em'}}>
+ <h1>Bienvenue sur notre super site !</h1>
+ </div>
+ </div>
+ <Grid>
+ {compteurs}
+ </Grid>
</div>
);
}
diff --git a/src/Counter.js b/src/Counter.js
index bd7b17b8be872cfacf314461db209d8a822ae6e1..fbac794de31b4137770bf5ba720b8e343640699c 100644
--- a/src/Counter.js
+++ b/src/Counter.js
@@ -1,13 +1,12 @@
import { useState } from "react";
-const Counter = () => {
+const Counter = (props) => {
const [count, setCount] = useState(0);
- console.log({count});
- document.title = "La page n°"+toString({count});
+ console.log(props);
return (
- <div class="card" style={{width:"30em", margin: '0 auto'}}>
+ <div class="card" style={{width:"auto", margin: '2em'}}>
<div class="card-header">
- Par exemple, on va voir les boutons
+ {props.title}
</div>
<button
type="button"
@@ -17,7 +16,7 @@ const Counter = () => {
>
Ce bouton incrémente
</button>
- <p style={{marginBottom: "1em"}}>Là genre ça vaut {count}</p>
+ <p style={{margin: "1em auto"}}>Là genre ça vaut {count}</p>
</div>
)
};
diff --git a/src/Grid.js b/src/Grid.js
new file mode 100644
index 0000000000000000000000000000000000000000..8bedf86c4fe58bc049612f536b08c9881d0633cc
--- /dev/null
+++ b/src/Grid.js
@@ -0,0 +1,9 @@
+import './grid.css';
+
+const Grid = (props) => (
+ <div class="grid">
+ {props.children}
+ </div>
+)
+
+export default Grid
\ No newline at end of file
diff --git a/src/grid.css b/src/grid.css
new file mode 100644
index 0000000000000000000000000000000000000000..32b2f22ef332b143e9a15f4f1940f0b6c770af1e
--- /dev/null
+++ b/src/grid.css
@@ -0,0 +1,4 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..da05fc91a7a0abcb21bdad4652489e28112c83ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
diff --git a/src/index.js b/src/index.js
index ef2edf8ea3fc42258464231e29140c8723458c1e..62adcf3c5f301c3cc0fc2b962943773f0e35d89b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
@@ -11,7 +10,3 @@ ReactDOM.render(
document.getElementById('root')
);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3ad9e6be6690549cb255f5952337b02401d..0000000000000000000000000000000000000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7b3e0e3897ab3bcaad13caf6876e48699..0000000000000000000000000000000000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';