first commit

README.md

@@ -2,34 +2,41 @@
 
 #### useState
 
-1. Birthday Reminder
+<!-- 1. Birthday Reminder -->
 
 #### useEffect and Conditional Rendering
 
-2. Tours
-3. Reviews
-4. Accordion
-5. Menu
-6. Tabs
-7. Slider
+<!-- 2. Tours -->
+
+<!-- 3. Reviews -->
+<!-- 4. Accordion -->
+<!-- 5. Menu -->
+<!-- 6. Tabs -->
+
+<!-- 7. Slider -->
 
 #### Forms
 
-8. Lorem Ipsum Generator
-9. Color Shades Generator
-10. Grocery Bud
+<!-- 8. Lorem Ipsum Generator -->
+
+<!-- 9. Color Shades Generator -->
+
+<!-- 10. Grocery Bud -->
 
 #### useRef
 
-11. Navbar
+<!-- 11. Navbar -->
 
 #### useContext
 
-12. Modal and Sidebar
-13. Stripe Menus
+<!-- 12. Modal and Sidebar (with custom hook) -->
+
+<!-- 13. Stripe Menus -->
 
 #### useReducer and useContext
 
-14. Cart
+<!-- 14. Cart -->
 
 #### React Router
+
+<!-- 15. Cocktails -->

src/App.js

@@ -1,10 +1,32 @@
-import React from 'react'
+import React from "react";
+// import Setup from "./tutorial/1-useState/setup/1-error-example";
+// import Setup from "./tutorial/1-useState/setup/2-useState-basics";
+// import Setup from "./tutorial/1-useState/setup/3-useState-array";
+// import Setup from "./tutorial/1-useState/setup/4-useState-object";
+// import Setup from "./tutorial/1-useState/setup/5-useState-counter";
+// import Setup from "./tutorial/2-useEffect/setup/1-useEffect-basics";
+// import Setup from "./tutorial/2-useEffect/setup/2-useEffect-cleanup";
+// import Setup from "./tutorial/2-useEffect/setup/3-useEffect-fetch-data";
+// import Setup from "./tutorial/3-conditional-rendering/setup/1-multiple-returns";
+// import Setup from "./tutorial/3-conditional-rendering/setup/2-short-circuit";
+// import Setup from "./tutorial/3-conditional-rendering/setup/3-show-hide";
+// import Setup from "./tutorial/4-forms/setup/1-controlled-inputs";
+// import Setup from "./tutorial/4-forms/setup/2-multiple-inputs";
+// import Setup from "./tutorial/5-useRef/setup/1-useRef-basics";
+// import Setup from "./tutorial/6-useReducer/setup";
+// import Setup from "./tutorial/7-prop-drilling/setup/1-prop-drilling";
+// import Setup from "./tutorial/8-useContext/setup/1-context-api";
+// import Setup from "./tutorial/9-custom-hooks/setup/1-fetch-example";
+// import Setup from "./tutorial/10-prop-types/setup";
+// import Setup from "./tutorial/11-react-router/setup";
+import Setup from "./tutorial/12-memo-useMemo-useCallback/setup";
+
 function App() {
   return (
-    <div className='container'>
-      <h2>Advanced Tutorial</h2>
+    <div className="container">
+      <Setup />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/tutorial/1-useState/setup/1-error-example.js

@@ -1,7 +1,19 @@
-import React from 'react';
+import React from "react";
 
 const ErrorExample = () => {
-  return <h2>useState error example</h2>;
+  let title = "random title";
+  const handleClick = () => {
+    title = "hello world";
+    console.log(title);
+  };
+  return (
+    <React.Fragment>
+      <h2>{title}</h2>
+      <button type="button" className="btn" onClick={handleClick}>
+        change title
+      </button>
+    </React.Fragment>
+  );
 };
 
 export default ErrorExample;

src/tutorial/1-useState/setup/2-useState-basics.js

@@ -1,7 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const UseStateBasics = () => {
-  return <h2>useState basic example</h2>;
+  // console.log(useState("hi"));
+  // const value = useState(1)[0];
+  // const handler = useState(1)[1];
+  // console.log(value, handler);
+  const [text, setText] = useState("hello");
+
+  const handleClick = () => {
+    if (text === "hello") {
+      setText(420);
+    } else {
+      setText("hello");
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <h1>{text}</h1>
+      <button className="btn" onClick={handleClick}>
+        change title
+      </button>
+    </React.Fragment>
+  );
 };
 
 export default UseStateBasics;

src/tutorial/1-useState/setup/3-useState-array.js

@@ -1,8 +1,41 @@
-import React from 'react';
-import { data } from '../../../data';
+import React from "react";
+import { data } from "../../../data";
+
+// data is an ARRAY of 4 OBJECTS
 
 const UseStateArray = () => {
-  return <h2>useState array example</h2>;
+  const [people, setPeople] = React.useState(data);
+
+  const removeItem = (id) => {
+    let newPeople = people.filter((person) => person.id !== id);
+    setPeople(newPeople);
+  };
+
+  // const removeItem = (id) => {
+  //   setPeople((oldPeople) => {
+  //     let newPeople = oldPeople.filter((person) => {
+  //       person.id !== id;
+  //       return newPeople;
+  //     });
+  //   });
+  // };
+
+  return (
+    <>
+      {people.map((person) => {
+        const { id, name } = person;
+        return (
+          <div key={id} className="item">
+            <h4>{name}</h4>
+            <button onClick={() => removeItem(id)}>remove</button>
+          </div>
+        );
+      })}
+      <button className="btn" onClick={() => setPeople([])}>
+        clear items
+      </button>
+    </>
+  );
 };
 
 export default UseStateArray;

src/tutorial/1-useState/setup/4-useState-object.js

@@ -1,7 +1,32 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const UseStateObject = () => {
-  return <h2>useState object example</h2>;
+  const [person, setPerson] = useState({
+    name: "dina",
+    age: 24,
+    message: "hello ",
+  });
+
+  // const [name, setName] = useState("dina");
+  // const [age, setAge] = useState(26);
+  // const [message, setMessage] = useState("hello");
+
+  const changeMessage = () => {
+    setPerson({ ...person, message: "bye" });
+    // setMessage("bye");
+  };
+
+  return (
+    <>
+      <h3>{person.name}</h3>
+      <h3>{person.age}</h3>
+      <h3>{person.message}</h3>
+
+      <button className="btn" onClick={changeMessage}>
+        change message
+      </button>
+    </>
+  );
 };
 
 export default UseStateObject;

src/tutorial/1-useState/setup/5-useState-counter.js

@@ -1,7 +1,47 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const UseStateCounter = () => {
-  return <h2>useState counter example</h2>;
+  const [value, setValue] = useState(0);
+
+  const reset = () => {
+    setValue(0);
+  };
+
+  const complexIncrease = () => {
+    setTimeout(() => {
+      // setValue(value + 1)
+      setValue((prevState) => {
+        console.log(prevState);
+        return prevState + 1;
+      });
+    }, 2000);
+  };
+
+  return (
+    <>
+      <section style={{ margin: "4rem 0" }}>
+        <h2>counter</h2>
+        <h1>{value}</h1>
+        <button className="btn" onClick={() => setValue(value - 1)}>
+          decrease
+        </button>
+        <button className="btn" onClick={reset}>
+          reset
+        </button>
+        <button className="btn" onClick={() => setValue(value + 1)}>
+          increase
+        </button>
+      </section>
+
+      <section style={{ margin: "4rem 0" }}>
+        <h2>complex counter</h2>
+        <h1>{value}</h1>
+        <button className="btn" onClick={complexIncrease}>
+          increase later
+        </button>
+      </section>
+    </>
+  );
 };
 
 export default UseStateCounter;

src/tutorial/10-prop-types/setup/Product.js

@@ -1,7 +1,29 @@
-import React from 'react';
+import React from "react";
+import PropTypes from "prop-types";
+import defaultImage from "../../../assets/default-image.jpeg";
 
-const Product = () => {
-  return <article className='product'>single product</article>;
+const Product = ({ name, image, price }) => {
+  const url = image && image.url;
+  return (
+    <article className="product">
+      <img src={url || defaultImage} alt={name} />
+      <h4>{name}</h4>
+      <p>${price || 3.99}</p>
+    </article>
+  );
 };
 
+Product.propTypes = {
+  name: PropTypes.object.isRequired,
+  image: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+};
+
+// if any properties are missing, set these values:
+// Product.defaultProps = {
+//   name: "default name",
+//   price: 3.99,
+//   image: defaultImage,
+// };
+
 export default Product;

src/tutorial/10-prop-types/setup/index.js

@@ -1,23 +1,23 @@
-import React from 'react'
-import Product from './Product'
-import { useFetch } from '../../9-custom-hooks/final/2-useFetch'
+import React from "react";
+import Product from "./Product";
+import { useFetch } from "../../9-custom-hooks/final/2-useFetch";
 
 // ATTENTION!!!!!!!!!!
 // I SWITCHED TO PERMANENT DOMAIN
-const url = 'https://course-api.com/react-prop-types-example'
+const url = "https://course-api.com/react-prop-types-example";
 
 const Index = () => {
-  const { products } = useFetch(url)
+  const { products } = useFetch(url);
   return (
     <div>
       <h2>products</h2>
-      <section className='products'>
+      <section className="products">
         {products.map((product) => {
-          return <Product key={product.id} {...product} />
+          return <Product key={product.id} {...product} />;
         })}
       </section>
     </div>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;

src/tutorial/11-react-router/setup/About.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const About = () => {
   return (

src/tutorial/11-react-router/setup/Error.js

@@ -1,9 +1,13 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
+
 const Error = () => {
   return (
     <div>
       <h1>Error Page</h1>
+      <Link to="/" className="btn">
+        Back to home
+      </Link>
     </div>
   );
 };

src/tutorial/11-react-router/setup/Home.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React from "react";
 
 const Home = () => {
   return (
     <div>
       <h1>Home Page</h1>
+      <p>this is the home page</p>
     </div>
   );
 };