more compllx

4b842153 · Viarezo · c7d4e438 · 4b842153 · 4b842153 · c7d4e438
Commit 4b842153 authored Oct 8, 2021 by Viarezo
--- 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>

--- a/public/meme.jpg
+++ b/public/meme.jpg
--- a/public/robots.txt
+++ b/public/robots.txt
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/src/App.js
+++ b/src/App.js
 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>
      <div className="App">
-        <div style={{background:'lightblue', borderRadius:'1em', padding: "2em", margin: "1em"}}>
-          <h1>Bienvenue dans notre super site !</h1>
+          <div style={{
+              background:   'lightblue',
+              borderRadius: '1em',
+              padding:      '2em',
+              margin:       '1em'}}>
+            <h1>Bienvenue sur notre super site !</h1>
+          </div>
      </div>
-        <Counter/>
+      <Grid>
+        {compteurs}
+      </Grid>
    </div>
  );
 }

--- a/src/Counter.js
+++ b/src/Counter.js
 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>
    )
 };

--- a/src/Grid.js
+++ b/src/Grid.js
+import './grid.css';
+
+const Grid = (props) => (
+    <div class="grid">
+        {props.children}
+    </div>
+)
+
+export default Grid
\ No newline at end of file
--- a/src/grid.css
+++ b/src/grid.css
+.grid {
+    display: grid;
+   grid-template-columns: repeat(3, 1fr);
+ }
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
 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;

--- 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();
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
-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;
--- a/src/setupTests.js
+++ b/src/setupTests.js
-// 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';