DevMed22 · esmael889 · Mar 7, 2023
diff --git a/frontend/react/graduation/package-lock.json b/frontend/react/graduation/package-lock.json
diff --git a/frontend/react/graduation/package.json b/frontend/react/graduation/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/frontend/react/graduation/public/index.html b/frontend/react/graduation/public/index.html
@@ -1,43 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <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="description"
-      content="Web site created using create-react-app"
-    />
-    <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/frontend/react/graduation/public/logo192.png b/frontend/react/graduation/public/logo192.png
diff --git a/frontend/react/graduation/public/logo512.png b/frontend/react/graduation/public/logo512.png
diff --git a/frontend/react/graduation/public/manifest.json b/frontend/react/graduation/public/manifest.json
diff --git a/frontend/react/graduation/public/robots.txt b/frontend/react/graduation/public/robots.txt
diff --git a/frontend/react/graduation/src/App.js b/frontend/react/graduation/src/App.js
diff --git a/frontend/react/graduation/src/Components/About/About.jsx b/frontend/react/graduation/src/Components/About/About.jsx
@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+
+export default class About extends Component {
+    state={
+Name:'esmael',
+age :22,
+salary:5000,
+href:'https://www.google.com'
+
+    }
+    welcome=(name)=>{
+        alert(`Hello${name}`)
+    }
+  render() {
+    return (
+  <>
+  <h1>Hello {this.state.Name}</h1>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, aperiam? {this.state.age}</p>
+  <span>My salary is {this.state.salary}</span>
+  <a href={this.state.href}>Google</a>
+  <button className='btn btn-info'onClick={()=>this.welcome('Mosaad')}>click me</button>
+  </>
+    )
+  }
+}
diff --git a/frontend/react/graduation/src/Components/App/App.jsx b/frontend/react/graduation/src/Components/App/App.jsx
@@ -0,0 +1,19 @@
+import Home from '../Home/Home';
+// import About from "../About/About";
+// import Contacts from "../Contact/Contact";
+// import Parent from '../Parent/Parent';
+function App() {
+  return (
+    <>
+     {/* <h1 className="text-danger text-center">Hello Esmael <i className="fa-solid fa-house"></i></h1> */}
+    <Home/>
+    {/* <About/>
+    <Contacts/>  */}
+    {/* <div className='container'>
+    <Parent/>
+    </div> */}
+    </>
+  );
+}
+
+export default App;
diff --git a/frontend/react/graduation/src/Components/Child/Child.jsx b/frontend/react/graduation/src/Components/Child/Child.jsx
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+
+export default class Child extends Component {
+  render() {
+    console.log(this.props);
+    let { id,Name,category,price,onSale}=this.props.productInfo;
+    return (
+      <>
+      <div className='col-md-4'>
+        <div className='bg-info text-center'>
+<h2>id:{id}</h2>
+<p>Name:{Name}</p>
+<h3>Category:{category}</h3>
+<h3>Price:{price}</h3>
+<button className='btn btn-danger me-2'onClick={()=>this.props.x(this.props.productInfo)}>Delete</button>
+<button className='btn btn-warning'onClick={()=>this.props.UpdateProd(this.props.productInfo)}>Update</button>
+{onSale?<h4 className='bg-success my-2 py-2'>Onsale:{onSale}</h4>:''}
+        </div>
+      </div>
+      </>
+    )
+  }
+}
diff --git a/frontend/react/graduation/src/Components/Contact/Contact.jsx b/frontend/react/graduation/src/Components/Contact/Contact.jsx
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class Contact extends Component {
+  render() {
+    return (
+      <div>Contact</div>
+    )
+  }
+}