diff --git a/public/index.html b/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..4a85aaec20517b307d01f9c9f46614368fca4e64 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,40 +4,17 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
+ <meta name="theme-color" content="#123456" />
<meta
name="description"
- content="Web site created using create-react-app"
+ 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" />
- <!--
- manifest.json provides metadata used when your web app is installed on a
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
- -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
- Notice the use of %PUBLIC_URL% in the tags above.
- It will be replaced with the URL of the `public` folder during the build.
- Only files inside the `public` folder can be referenced from the HTML.
-
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
- work correctly both with client-side routing and a non-root public URL.
- Learn how to configure a non-root public URL by running `npm run build`.
- -->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
- <!--
- This HTML file is a template.
- If you open it directly in the browser, you will see an empty page.
-
- You can add webfonts, meta tags, or analytics to this file.
- The build step will place the bundled scripts into the <body> tag.
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
</body>
</html>
diff --git a/src/App.js b/src/App.js
index 37845757234ccb68531c10cf7a2ffc589c47e342..8194b99fcdb840ff7b816fc83c82d8ca0de4c1f7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,13 @@
-import logo from './logo.svg';
import './App.css';
+import { Counter } from './Counter.js';
-function App() {
+const App = () => {
return (
<div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
+ <div style={{background:'lightblue', borderRadius:'1em', padding: "2em", margin: "1em"}}>
+ <h1>Bienvenue dans notre super site !</h1>
+ </div>
+ <Counter/>
</div>
);
}
diff --git a/src/Counter.js b/src/Counter.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd7b17b8be872cfacf314461db209d8a822ae6e1
--- /dev/null
+++ b/src/Counter.js
@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+ console.log({count});
+ document.title = "La page n°"+toString({count});
+ return (
+ <div class="card" style={{width:"30em", margin: '0 auto'}}>
+ <div class="card-header">
+ Par exemple, on va voir les boutons
+ </div>
+ <button
+ type="button"
+ class="btn btn-primary"
+ onClick={()=>setCount(count+1)}
+ style={{margin: "1em"}}
+ >
+ Ce bouton incrémente
+ </button>
+ <p style={{marginBottom: "1em"}}>Là genre ça vaut {count}</p>
+ </div>
+ )
+};
+
+export { Counter };
\ No newline at end of file