Merge pull request #1 from michaelboateng1/advanceReact

Advance react

Author: michaelboateng1

src/App.js

@@ -0,0 +1,88 @@
+import React from "react";
+
+// CSS
+import "./index.css";
+
+// ! /* useState examples */
+// import UseStateExample from "./advance_react/useState/useState_basics";
+// import UseStateWithArray from "./advance_react/useState/useState_withArray";
+// import UseStateWithObj from "./advance_react/useState/useState_objects";
+// import Counter from "./advance_react/useState/useState_counter";
+
+// ! /* useEffect examples */
+// import UseEffectBasics from "./advance_react/useEffect/useEffect_basics";
+// import CleanFunction from "./advance_react/useEffect/useEffect_clean";
+// import FetchData from "./advance_react/useEffect/useEffect_fetch-data";
+
+// ! /* conditional rendering */
+// import ConditionalRExample from "./advance_react/conditional_rendring/conditional_rendring";
+// import GetUser from "./advance_react/conditional_rendring/get-data";
+// import ShortCircute from "./advance_react/conditional_rendring/short_circuting";
+// import ShortCircuteExample from "./advance_react/conditional_rendring/short_circute-examples";
+// import ShowAndHide from "./advance_react/conditional_rendring/show_hide";
+
+// ! /* forms */
+// import ControlledInputBasics from "./advance_react/forms/controlled_input";
+// import MultipleInputs from "./advance_react/forms/multiple_inputs";
+
+// ! /* useRef */
+// import UncontrolledInput from "./advance_react/useRef/uncontrolled_input";
+
+// ! /* useReducer */
+// import Index from "./advance_react/useReducer";
+
+// ! /* propDrilling */
+// import PropDrilling from "./advance_react/prop_drilling/prop_drilling";
+
+// ! /* ContextAPI/useContext */
+// import ContextAPI from "./advance_react/useContext/useContext";
+
+// ! /* Custom Hooks */
+import Example from "./advance_react/custom_hooks/customHookExample";
+
+function App() {
+  return (
+    <React.Fragment>
+      <div className="container">
+        {/* useState hook examples */}
+        {/* <UseStateExample /> */}
+        {/* <UseStateWithArray /> */}
+        {/* <UseStateWithObj /> */}
+        {/* <Counter /> */}
+
+        {/* useEffect hook examples */}
+        {/* <UseEffectBasics /> */}
+        {/* <CleanFunction /> */}
+        {/* <FetchData /> */}
+
+        {/* conditional rendering */}
+        {/* <ConditionalRExample /> */}
+        {/* <GetUser /> */}
+        {/* <ShortCircute /> */}
+        {/* <ShortCircuteExample /> */}
+        {/* <ShowAndHide /> */}
+
+        {/* controlled input */}
+        {/* <ControlledInputBasics /> */}
+        {/* <MultipleInputs /> */}
+
+        {/* useRef hook */}
+        {/* <UncontrolledInput /> */}
+
+        {/* useReducer hook */}
+        {/* <Index /> */}
+
+        {/* propDrilling */}
+        {/* <PropDrilling /> */}
+
+        {/* contextAPI/useContext */}
+        {/* <ContextAPI /> */}
+
+        {/* Custom Hooks */}
+        <Example />
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default App;

src/Book.js

@@ -0,0 +1,18 @@
+import React, { useState, useEffect } from "react";
+
+function ConditionalRendering() {
+  let [isLoading, setIsLoading] = useState(true);
+  let [user] = useState("Default user");
+
+  useEffect(() => {
+    setTimeout(() => setIsLoading(false), 3000);
+  }, []);
+
+  if (isLoading) {
+    return <h1>Loading...</h1>;
+  }
+
+  return <h1>{user}</h1>;
+}
+
+export default ConditionalRendering;

src/advance_react/conditional_rendring/conditional_rendring.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+
+const url = "https://api.github.com/users/QuincyLarson";
+
+function GetUser() {
+  let [isLoading, setIsLoading] = useState(true);
+  let [isError, setIsError] = useState(false);
+  let [user, setUser] = useState("Default User");
+
+  useEffect(() => {
+    fetch(url)
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.status >= 200 && data.status <= 299) {
+          console.log(data);
+          let { login } = data;
+          setIsLoading(false);
+          setUser(login);
+
+          throw new Error(data.statusText);
+        } else {
+          setIsLoading(false);
+          setIsError(true);
+        }
+      })
+      .catch((error) => console.error(error));
+  });
+
+  if (isLoading) {
+    return <h1>Loading...</h1>;
+  }
+
+  if (isError) {
+    return <h1>Error...</h1>;
+  }
+
+  return <h1>{user}</h1>;
+}
+
+export default GetUser;

src/advance_react/conditional_rendring/get-data.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+function ShortCircuteExample() {
+  const [text] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  return (
+    <>
+      <h1>{text || "Hello World"}</h1>
+      <h1>{isError && "Error..."}</h1>
+      <p>{isError ? "There's an error..." : "There's no error"}</p>
+      <button
+        type="button"
+        className="btn"
+        onClick={() => setIsError(!isError)}
+      >
+        Toggle
+      </button>
+    </>
+  );
+}
+
+export default ShortCircuteExample;

src/advance_react/conditional_rendring/short_circute-examples.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+
+function ShortCircute() {
+  let [text] = useState("Michael");
+  let firstText = text || <h1>First circute</h1>;
+  let secondText = text && <h1>Second circute</h1>;
+
+  return (
+    <>
+      <div>{firstText}</div>
+      <div>{secondText}</div>
+      <h1>{text && "this is a test"}</h1>
+    </>
+  );
+}
+
+export default ShortCircute;

src/advance_react/conditional_rendring/short_circuting.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+
+function ShowAndHide() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      {show && <Item />}
+      <button type="button" className="btn" onClick={() => setShow(!show)}>
+        Show/Hide
+      </button>
+    </>
+  );
+}
+
+function Item() {
+  const [size, setSize] = useState(window.innerWidth);
+
+  const checkSize = () => {
+    setSize(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", checkSize);
+    return () => {
+      window.removeEventListener("resize", checkSize);
+    };
+  }, []);
+  return (
+    <>
+      <h1>Window</h1>
+      <h2>{size}</h2>
+    </>
+  );
+}
+
+export default ShowAndHide;

src/advance_react/conditional_rendring/show_hide.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+// importing custom hook
+import { useFetch } from "./useFetch";
+
+const url = "https://api.github.com/users";
+
+function Example() {
+  const { isLoading, data } = useFetch(url);
+  return <h1>{isLoading ? "Loading..." : "Data is in :)"}</h1>;
+}
+
+export default Example;

src/advance_react/custom_hooks/customHookExample.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+
+export function useFetch(url) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getData = async () => {
+    try {
+      const response = await fetch(url);
+      const parseData = await response.json();
+      setData(parseData);
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, [url]);
+
+  return { isLoading, data };
+}

src/advance_react/custom_hooks/useFetch.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+function ControlledInputBasics() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [people, setPeople] = useState([]);
+
+  const hundleSubmit = (e) => {
+    e.preventDefault();
+    if (name && email) {
+      setPeople((people) => {
+        return [...people, { id: new Date().getTime().toString(), name, email }];
+      });
+      setName("");
+      setEmail("");
+    } else {
+      console.log("Please fill in your name and email");
+    }
+  };
+
+  return (
+    <>
+      <article>
+        <form onSubmit={hundleSubmit}>
+          <div className="form-controlle">
+            <label htmlFor="name">Name: </label>
+            <input type="text" id="name" name="fullName" value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="form-controlle">
+            <label htmlFor="email">Email: </label>
+            <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <button type="submit">Add Person</button>
+        </form>
+      </article>
+      {people.map((person) => {
+        const { id, name, email } = person;
+        return (
+          <div className="person" key={id}>
+            <h4>{name}</h4>
+            <p>{email}</p>
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+export default ControlledInputBasics;