├── AddItem.css
├── ToDoİtem.css
├── styles.css
├── picstyle.css
├── commerce.jpg
├── commerce2.jpg
├── commerce3.jpg
├── About.js
├── workspace.json
├── index.js
├── ProductList.js
├── App.js
├── Navbar.js
├── ProductsContext.js
├── ProductDetails.js
├── Product.js
├── ToDoItem.js
├── package.json
├── AddItem.js
├── index.html
├── Slider.js
├── Productlist.js
├── small project
└── aboutReact.js


/AddItem.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/ToDoİtem.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 |   text-align: center;
3 | }
4 | 


--------------------------------------------------------------------------------
/picstyle.css:
--------------------------------------------------------------------------------
1 | .height-500 {
2 |   height: 500px;
3 | }
4 | 


--------------------------------------------------------------------------------
/commerce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moemen12/React-JS/HEAD/commerce.jpg


--------------------------------------------------------------------------------
/commerce2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moemen12/React-JS/HEAD/commerce2.jpg


--------------------------------------------------------------------------------
/commerce3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moemen12/React-JS/HEAD/commerce3.jpg


--------------------------------------------------------------------------------
/About.js:
--------------------------------------------------------------------------------
1 | function About() {
2 |   return <h2>About Page</h2>;
3 | }
4 | 
5 | export default About;
6 | 


--------------------------------------------------------------------------------
/workspace.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "responsive-preview": {
 3 |     "Mobile": [
 4 |       320,
 5 |       675
 6 |     ],
 7 |     "Tablet": [
 8 |       1024,
 9 |       765
10 |     ],
11 |     "Desktop": [
12 |       1400,
13 |       800
14 |     ],
15 |     "Desktop  HD": [
16 |       1920,
17 |       1080
18 |     ]
19 |   }
20 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | 
 4 | import App from "./App";
 5 | 
 6 | const rootElement = document.getElementById("root");
 7 | const root = createRoot(rootElement);
 8 | 
 9 | root.render(
10 |   <StrictMode>
11 |     <App />
12 |   </StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/ProductList.js:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { ProductsContext } from "../context/ProductsContext";
 3 | 
 4 | function Productlist() {
 5 |   const values = useContext(ProductsContext);
 6 | 
 7 |   return (
 8 |     <div className="navbar">
 9 |       {values.map((value) => {
10 |         return <h1 key={value.id}> {value.title} </h1>;
11 |       })}
12 |     </div>
13 |   );
14 | }
15 | export default Productlist;
16 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import Navbar from "./components/Navbar";
 2 | import Productlist from "./components/ProductList";
 3 | import ProductsProvider from "./context/ProductsContext";
 4 | import "./styles.css";
 5 | 
 6 | export default function App() {
 7 |   return (
 8 |     <div className="App">
 9 |       <ProductsProvider>
10 |         <Navbar />
11 |         <Navbar.Toogle />
12 |         <Productlist />
13 |       </ProductsProvider>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { ProductsContext } from "../context/ProductsContext";
 3 | 
 4 | function Navbar(props) {
 5 |   const value = useContext(ProductsContext);
 6 | 
 7 |   console.log(value);
 8 |   return (
 9 |     <div className="navbar">
10 |       <h1>products count: {value.length} </h1>
11 |     </div>
12 |   );
13 | }
14 | 
15 | Navbar.Toogle = function () {
16 |   return <h1>Toogle</h1>;
17 | };
18 | 
19 | export default Navbar;
20 | 


--------------------------------------------------------------------------------
/ProductsContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useState } from "react";
 2 | 
 3 | export const ProductsContext = createContext();
 4 | 
 5 | function ProductsProvider(props) {
 6 |   const [products, setProducts] = useState([
 7 |     { id: 1, title: "product1" },
 8 |     { id: 2, title: "product2" },
 9 |     { id: 3, title: "product3" }
10 |   ]);
11 |   return (
12 |     <ProductsContext.Provider value={products}>
13 |       {props.children}
14 |     </ProductsContext.Provider>
15 |   );
16 | }
17 | 
18 | export default ProductsProvider;
19 | 


--------------------------------------------------------------------------------
/ProductDetails.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { useParams } from "react-router-dom";
 3 | import Product from "./Product";
 4 | 
 5 | function ProductDetails() {
 6 |   const api_url1 = "https://fakestoreapi.com/products";
 7 |   const [product, setProduct] = useState({});
 8 | 
 9 |   const params = useParams();
10 |   useEffect(() => {
11 |     fetch(`${api_url1}/${params.productId}`)
12 |       .then((res) => res.json())
13 |       .then((product) => setProduct(product));
14 |   }, []);
15 | 
16 |   return <Product product={product} showButton={false} />;
17 | }
18 | export default ProductDetails;
19 | 


--------------------------------------------------------------------------------
/Product.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | function Product(props) {
 4 |   const { product, showButton } = props;
 5 | 
 6 |   return (
 7 |     <>
 8 |       <div className="card">
 9 |         <img src={product.image} className="card-img-top" alt="..." />
10 |         <div className="card-body">
11 |           <h5 className="card-title">{product.title}</h5>
12 |           <p className="card-text">{product.description}</p>
13 |           <p>Price: {product.price}$</p>
14 |           {showButton && (
15 |             <Link className="btn btn-primary" to={`/products/${product.id}`}>
16 |               Details
17 |             </Link>
18 |           )}
19 |         </div>
20 |       </div>
21 |     </>
22 |   );
23 | }
24 | 
25 | export default Product;
26 | 


--------------------------------------------------------------------------------
/ToDoItem.js:
--------------------------------------------------------------------------------
 1 | function ToDoItem(props) {
 2 |   const { items, deleteItem } = props;
 3 |   let length = items.length;
 4 | 
 5 |   const listItem = length ? (
 6 |     items.map((item) => {
 7 |       return (
 8 |         <div key={item.id}>
 9 |           <span>{item.name}</span>
10 |           <span>{item.age}</span>
11 |           <span onClick={() => deleteItem(item.id)}>&times;</span>
12 |         </div>
13 |       );
14 |     })
15 |   ) : (
16 |     <p>There is no item to show</p>
17 |   );
18 |   return (
19 |     <div className="Listİtems">
20 |       <div>
21 |         <span>Name</span>
22 |         <span>Age</span>
23 |         <span>Action</span>
24 |       </div>
25 |       {listItem}
26 |     </div>
27 |   );
28 | }
29 | 
30 | export default ToDoItem;
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react",
 3 |   "version": "1.0.0",
 4 |   "description": "React example starter project",
 5 |   "keywords": [
 6 |     "react",
 7 |     "starter"
 8 |   ],
 9 |   "main": "src/index.js",
10 |   "dependencies": {
11 |     "react": "18.2.0",
12 |     "react-dom": "18.2.0",
13 |     "react-router-dom": "6.4.1",
14 |     "react-scripts": "4.0.0"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/runtime": "7.13.8",
18 |     "typescript": "4.1.3"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test --env=jsdom",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "browserslist": [
27 |     ">0.2%",
28 |     "not dead",
29 |     "not ie <= 11",
30 |     "not op_mini all"
31 |   ]
32 | }


--------------------------------------------------------------------------------
/AddItem.js:
--------------------------------------------------------------------------------
 1 | import { Component } from "react";
 2 | 
 3 | class Addİtem extends Component {
 4 |   state = {
 5 |     name: "",
 6 |     age: ""
 7 |   };
 8 | 
 9 |   handleChange = (e) => {
10 |     this.setState({
11 |       [e.target.id]: e.target.value
12 |     });
13 |   };
14 | 
15 |   handleSubmit = (e) => {
16 |     e.preventDefault();
17 |     this.props.AddItem(this.state);
18 |     this.setState({
19 |       name: "",
20 |       age: ""
21 |     });
22 |   };
23 | 
24 |   render() {
25 |     return (
26 |       <div>
27 |         <form onSubmit={this.handleSubmit}>
28 |           <input
29 |             type="text"
30 |             placeholder="Enter name..."
31 |             id="name"
32 |             onChange={this.handleChange}
33 |             value={this.state.name}
34 |           />
35 |           <input
36 |             type="number"
37 |             placeholder="Enter age..."
38 |             id="age"
39 |             onChange={this.handleChange}
40 |             value={this.state.age}
41 |           />
42 |           <input type="submit" value="Add" />
43 |         </form>
44 |       </div>
45 |     );
46 |   }
47 | }
48 | 
49 | export default Addİtem;
50 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 | 	<meta name="theme-color" content="#000000">
 8 | 	<!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 | 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 | 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 | 	<!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 | 	<title>React App</title>
24 | </head>
25 | 
26 | <body>
27 | 	<noscript>
28 | 		You need to enable JavaScript to run this app.
29 | 	</noscript>
30 | 	<div id="root"></div>
31 | 	<!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/Slider.js:
--------------------------------------------------------------------------------
 1 | import image1 from "../images/commerce.jpg";
 2 | import image2 from "../images/commerce2.jpg";
 3 | import image3 from "../images/commerce3.jpg";
 4 | import "./picstyle.css";
 5 | function Slider() {
 6 |   return (
 7 |     <>
 8 |       <div
 9 |         id="carouselExampleControls"
10 |         className="carousel slide"
11 |         data-bs-ride="carousel"
12 |       >
13 |         <div className="carousel-inner">
14 |           <div className="carousel-item active">
15 |             <img src={image1} className="d-block w-100 height-500" alt="..." />
16 |           </div>
17 |           <div className="carousel-item">
18 |             <img src={image2} className="d-block w-100 height-500" alt="..." />
19 |           </div>
20 |           <div className="carousel-item">
21 |             <img src={image3} className="d-block w-100 height-500" alt="..." />
22 |           </div>
23 |         </div>
24 |         <button
25 |           className="carousel-control-prev"
26 |           type="button"
27 |           data-bs-target="#carouselExampleControls"
28 |           data-bs-slide="prev"
29 |         >
30 |           <span
31 |             className="carousel-control-prev-icon"
32 |             aria-hidden="true"
33 |           ></span>
34 |           <span className="visually-hidden">Previous</span>
35 |         </button>
36 |         <button
37 |           className="carousel-control-next"
38 |           type="button"
39 |           data-bs-target="#carouselExampleControls"
40 |           data-bs-slide="next"
41 |         >
42 |           <span
43 |             className="carousel-control-next-icon"
44 |             aria-hidden="true"
45 |           ></span>
46 |           <span className="visually-hidden">Next</span>
47 |         </button>
48 |       </div>
49 |     </>
50 |   );
51 | }
52 | 
53 | export default Slider;
54 | 


--------------------------------------------------------------------------------
/Productlist.js:
--------------------------------------------------------------------------------
 1 | import Product from "./Product";
 2 | import { useEffect, useState } from "react";
 3 | function Productlist() {
 4 |   const api_url = "https://fakestoreapi.com/products";
 5 |   const [products, setProducts] = useState([]);
 6 |   const [categories, setCategories] = useState([]);
 7 |   const getProducts = () => {
 8 |     fetch(api_url)
 9 |       .then((res) => res.json())
10 |       .then((data) => setProducts(data));
11 |   };
12 | 
13 |   const getCategories = () => {
14 |     fetch(`${api_url}/categories`)
15 |       .then((res) => res.json())
16 |       .then((data) => setCategories(data));
17 |   };
18 |   const getProductsInCategorie = (catName) => {
19 |     console.log(catName);
20 |     fetch(`${api_url}/category/${catName}`)
21 |       .then((res) => res.json())
22 |       .then((data) => setProducts(data));
23 |   };
24 | 
25 |   useEffect(() => {
26 |     getProducts();
27 |     getCategories();
28 |   }, []);
29 |   return (
30 |     <>
31 |       <h1 className="text-center p-3">Our Products</h1>
32 |       <div className="container">
33 |         <button
34 |           onClick={() => {
35 |             getProducts();
36 |           }}
37 |           className="btn btn-info"
38 |         >
39 |           All
40 |         </button>
41 |         {categories.map((cat) => {
42 |           return (
43 |             <button
44 |               key={cat}
45 |               onClick={() => {
46 |                 getProductsInCategorie(cat);
47 |               }}
48 |               className="btn btn-info"
49 |             >
50 |               {cat}
51 |             </button>
52 |           );
53 |         })}
54 | 
55 |         <div className="row">
56 |           {products.map((product) => {
57 |             return (
58 |               <div className="col-3" key={product.id}>
59 |                 <Product product={product} showButton={true} />
60 |               </div>
61 |             );
62 |           })}
63 |         </div>
64 |       </div>
65 |     </>
66 |   );
67 | }
68 | 
69 | export default Productlist;
70 | 


--------------------------------------------------------------------------------
/small project:
--------------------------------------------------------------------------------
  1 | /*
  2 | App.js
  3 | ======
  4 | import React from "react";
  5 | import Header from "./Header";
  6 | 
  7 | function App() {
  8 |   return (
  9 |       <Header />
 10 |   )
 11 | }
 12 | export default App
 13 | 
 14 | Header.js:
 15 | =========
 16 | import React from "react";
 17 | import Social from "./Social";
 18 | 
 19 | function Header() { 
 20 |     return (
 21 |         <div className="newContainer">
 22 |             <Social
 23 |                 p={{
 24 |                     img:'https://picsum.photos/200',
 25 |                 }}
 26 |                 
 27 |             />
 28 |             <Social
 29 |                p={{
 30 |                    img:'https://picsum.photos/201',
 31 |                 }}
 32 |             />
 33 |             <Social
 34 |                  p={{
 35 |                     img:'https://picsum.photos/205',
 36 |                  }}
 37 |             /> 
 38 |             <Social
 39 |                  p={{
 40 |                    img:'https://picsum.photos/203',
 41 |                   }}
 42 |             /> 
 43 |         </div>
 44 |     )
 45 | }
 46 | export default Header
 47 | 
 48 | Social.js
 49 | =========
 50 | import React from "react";
 51 | 
 52 | 
 53 | function Social(props) {
 54 |     const info = {
 55 |         working: true,
 56 |         number: true,
 57 |         email: true,
 58 |         website: true,
 59 |         name: true,
 60 |     }
 61 |     return (
 62 |         <div className={`child ${info.website?"":'newcolor'}`}>
 63 |             <img src={props.p.img} alt="moemen" />
 64 |             <p>{info.name===true?'Moemen Saadeh':''}<br />
 65 |                 {info.working===true?'Full Stack':''}<br/>
 66 |                {info.number===true?'Phone: +90 535685':''}<br />
 67 |                 {info.email === true ? 'Email: moemen5@gmail.com' : ''}<br />
 68 |                {info.website===true?'Website:saadeh.org':""}
 69 |             </p>
 70 |         </div>
 71 |     )
 72 |     
 73 | }
 74 | export default Social
 75 | 
 76 | App.css
 77 | ======
 78 | *{
 79 |   padding: 0;
 80 |   margin: 0;
 81 |   box-sizing: border-box;
 82 | }
 83 | .newContainer{
 84 |   margin: 20px auto;
 85 |   background-color:#eee;
 86 |   width: 900px;
 87 |   height: 900px;
 88 |   display: flex;
 89 |   flex-wrap: wrap;
 90 |   justify-content: space-around;
 91 | }
 92 | .child{
 93 |   width: 49%;
 94 |   height:49%;
 95 |   background-color: black;
 96 |   border: 3px solid black;
 97 | 
 98 | }
 99 | img{
100 |   width:90%;
101 |   height: 70%;
102 |   display: block;
103 |   margin-left: auto;
104 |   margin-right: auto;
105 | }
106 | p{
107 |   color: #fff;
108 |   font-family: sans-serif;
109 |   text-align: center;
110 | }
111 | .newcolor{
112 |   background-color: forestgreen;
113 | }
114 | 
115 | 
116 | 
117 | 
118 | 
119 | */
120 | 


--------------------------------------------------------------------------------
/aboutReact.js:
--------------------------------------------------------------------------------
  1 | What is JSX ?
  2 | JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
  3 | 
  4 | //Code with JSX (JAVA SCRIPT XML)
  5 | 
  6 | const Hello =() =>{
  7 | return(
  8 |     <div className ='dummyClass'>
  9 |       <h1>Hello World </h1>
 10 |     </div>
 11 |       )
 12 |                  }
 13 |    
 14 |    
 15 | //Code without JSX 
 16 | 
 17 | const Hello =() =>{
 18 | return React.createElement('div',{id:'hello',className:'dummyClass'},React.createElement('h1',null,'Hello World')
 19 |                   }
 20 |                   
 21 | //-----------------------------------------------------------------------------------------------
 22 |     
 23 | /* JSX differences:
 24 |    ----------------
 25 |    class  => className
 26 |    for    => htmlFor
 27 |    
 28 | camelCase property naming convention
 29 | onclick => onclick
 30 | tabindex => tabIndex
 31 | 
 32 | Inline Style to write Css to React 
 33 | -----------------------------------
 34 | example
 35 | -------
 36 | import React from "react";
 37 | function Header() {
 38 |     return (
 39 |         <h1 style={{color:'red',fontSize:'20px',backgroundColor:"black"}}>Programming is my life</h1>
 40 |     );
 41 | 
 42 | }
 43 | export default Header;
 44 |    
 45 | Internal Style to write Css to React
 46 | ------------------------------------
 47 | import React from "react";
 48 | function Header() {
 49 |     const style = {
 50 |         color: 'red',
 51 |         fontSize: '20px',
 52 |         backgroundColor: "black"
 53 |     }
 54 |     return (
 55 |         <h1 style={style}>Programming is my life</h1>
 56 |     );
 57 | 
 58 | }
 59 | export default Header;
 60 | 
 61 | External Style to write Css to React (same CSS)
 62 | ------------------------------------
 63 | h1{
 64 |   color: red;
 65 |   font-size: 20px;
 66 |   background-color: black;
 67 | }
 68 | #root{
 69 |   background-color: blue;
 70 | }
 71 | ! we must import css file to use all css Property
 72 | 
 73 | ===============================================
 74 | 
 75 | 
 76 | 
 77 | import React from "react";
 78 | function Header() {
 79 |     const client = "Designer";
 80 |     const title = {
 81 |         designer: "Design",
 82 |         programmer: "Programming"
 83 |     }
 84 |     const info = {
 85 |         name: "moemen",
 86 |         nick:"saade"
 87 |     }
 88 |     // if (client === "Designer") {
 89 |     //     title = "Design is my life";
 90 |     // } else {
 91 |     //     title = "Programming is my life";
 92 |     // }
 93 |     return (
 94 |         <div className="navbar bg-dark rounded text-white">
 95 |             Hello {`${info.name} ${info.nick}`}
 96 |             <h1>
 97 |                 {client === "Designer" ? title.designer : title.programmer} is my life</h1>
 98 |         </div>
 99 |     );
100 | 
101 | }
102 | export default Header;
103 | 
104 | 
105 | 
106 | =======================================
107 | 
108 | import React from "react";
109 | function Social() {
110 |     return (
111 |         <ul className="list-group">
112 |             <li className="list-group-item">
113 |                 <input type="checkbox" id="facebook" />
114 |                 <label htmlFor="facebook">facebook</label>
115 |             </li>
116 |             <li className="list-group-item">
117 |                 <input type="checkbox" id="instagram" />
118 |                 <label htmlFor="instagram">instagram</label>
119 |             </li>
120 |             <li className="list-group-item">
121 |                 <input type="checkbox" id="You-tube" />
122 |                 <label htmlFor="You-tube">You-tube</label>
123 |             </li>
124 |         </ul>
125 |     );
126 | 
127 | }
128 | export default Social;
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 |                   
150 | 


--------------------------------------------------------------------------------