Marcelle

package.json

@@ -2,6 +2,18 @@
   "name": "starter-react-app",
   "version": "0.1.0",
   "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.5.1",
+    "bootstrap": "^5.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
   "scripts": {
     "start": "node server.js",
     "dev": "react-scripts start",
@@ -26,17 +38,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "dependencies": {
-    "express": "^4.17.3"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "web-vitals": "^2.1.4"
   }
 }

public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,3 +1,4 @@
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,23 +1,22 @@
 import logo from './logo.svg';
 import './App.css';
+import Header from './components/Header';
+import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+
+import Products from './components/Products';
+import Home from './components/Home';
 
 function 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>
+<Router>
+    <Header/>
+    <Routes>
+    <Route path="/" exact element={<Home/>}/>
+   <Route path="/products" exact element={<Products/>} />
+
+    </Routes>
+  </Router>
     </div>
   );
 }

src/components/Boostrap/responsive_bootstrap.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function App() {
+  return (
+    <div className="container">
+      <h1>Mon Portfolio</h1>
+      <div className="row">
+        <div className="col-md-6">
+          <h2>Section 1</h2>
+          {/* Contenu de la section 1 */}
+        </div>
+        <div className="col-md-6">
+          <h2>Section 2</h2>
+          {/* Contenu de la section 2 */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/components/Header.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { NavLink } from 'react-router-dom';
+ class Header extends Component {
+  render() {
+    return (
+        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div className="container-fluid">
+          <a className="navbar-brand" href="#">IB Soft</a>
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+              <li className="nav-item">
+                <NavLink className="nav-link active" aria-current="page" to='/'>Home</NavLink>
+              </li>
+              <li className="nav-item">
+              <NavLink className="nav-link active" aria-current="page" to='/products'>Products</NavLink>
+              </li>
+              <li className="nav-item dropdown">
+                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  Dropdown
+                </a>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li><a className="dropdown-item" href="#">Action</a></li>
+                  <li><a className="dropdown-item" href="#">Another action</a></li>
+                  <li><hr className="dropdown-divider"/></li>
+                  <li><a className="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+              </li>
+            </ul>
+            <form className="d-flex">
+              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+              <button className="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+      </nav>
+    )
+  }
+}
+export default Header; 

src/components/Home.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class Home extends Component {
+  render() {
+    return (
+      <div>Home</div>
+    )
+  }
+}

src/components/Products.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import getAllProducts from '../services/postServices/PostServices';
+
+export default function Products() {
+const [data, setData]= useState([]);
+
+
+useEffect(() => {
+    getAllProducts().then(datas => {
+      setData(datas);
+      console.log(datas)
+    })
+
+}, [])
+
+
+
+  return <>
+    <h1>Products</h1>
+    <hr/>
+    <ul>
+    <div className='row'>
+    {data.map((item, index) => (
+    <div className='col-sm-12 col-md-6 col-xl-3 mb-2' key={index}>
+    <div className='card'>
+    <img src='' alt='image'/>
+     <div className='card-body'>
+     <div className='card-title'>{item.title}</div>
+      </div>
+    </div>
+    </div>
+     ))}
+    </div>
+
+    </ul>
+
+    </>
+}

src/index.js

@@ -1,14 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+// Intégration de Axios
+import axios from 'axios';
+
+axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/services/postServices/PostServices.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+function getAllProducts() {
+    return axios.get('/posts').then(response => {
+       return response.data;
+   }).catch(error => {
+       console.log(error)
+   })
+
+  } 
+
+
+
+  export default getAllProducts;