├── react-useContext ├── README.md ├── package.json ├── public │ └── index.html └── src │ ├── App.js │ ├── User.js │ ├── UserList.js │ ├── contexts │ └── UserContext.js │ ├── index.js │ └── styles.css ├── react-useMemo ├── .codesandbox │ └── workspace.json ├── README.md ├── package.json ├── public │ └── index.html └── src │ ├── App.js │ ├── index.js │ └── styles.css ├── react-useReducer ├── .codesandbox │ └── workspace.json ├── README.md ├── package.json ├── public │ └── index.html └── src │ ├── App.js │ ├── index.js │ ├── reducer.js │ └── styles.css └── react-useRef ├── .codesandbox └── workspace.json ├── README.md ├── package.json ├── public └── index.html └── src ├── App.js ├── index.js └── styles.css /react-useContext/README.md: -------------------------------------------------------------------------------- 1 | # react-useContext 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /react-useContext/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konu-context-api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.12.0", 9 | "react-dom": "16.12.0", 10 | "react-router-dom": "5.1.2", 11 | "react-scripts": "3.0.1" 12 | }, 13 | "devDependencies": { 14 | "typescript": "3.3.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } -------------------------------------------------------------------------------- /react-useContext/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /react-useContext/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./styles.css"; 3 | import UserList from "./UserList"; 4 | import { UserContext } from "./contexts/UserContext.js"; 5 | //prettier-ignore 6 | const data = [ 7 | { id: 1, name: "Ahmet", email: "ahmet@site.com", age: 25, color: "lightcyan" }, 8 | { id: 2, name: "Mehmet", email: "mehmet@site.com", age: 30, color: "honeydew" }, 9 | { id: 3, name: "Ali", email: "ali@site.com", age: 35, color: "mistyrose" } 10 | ]; 11 | 12 | const App = () => { 13 | const [users, setUsers] = useState(data); 14 | 15 | const changeColor = (id, color) => 16 | setUsers( 17 | users.map((user) => (user.id === id ? { ...user, color: color } : user)) 18 | ); 19 | 20 | return ( 21 | 22 |
23 |
24 |

Welcome!

25 |
26 | 27 |
28 | 29 | ); 30 | }; 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /react-useContext/src/User.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { UserContext } from "./contexts/UserContext"; 3 | const User = ({ user, changeColor }) => { 4 | const change = useContext(UserContext); 5 | 6 | return ( 7 |
8 |

{user.name}

9 |

Email: {user.email}

10 |

Age: {user.age}

11 | Color:{" "} 12 | change.changeColor(user.id, e.target.value)} 15 | /> 16 |
17 | ); 18 | }; 19 | 20 | export default User; 21 | -------------------------------------------------------------------------------- /react-useContext/src/UserList.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import User from "./User"; 3 | import { UserContext } from "./contexts/UserContext"; 4 | const UserList = () => { 5 | const deger = useContext(UserContext); 6 | 7 | return ( 8 | <> 9 |

User List

10 | {deger.users.map((user) => ( 11 | 12 | ))} 13 | 14 | ); 15 | }; 16 | 17 | export default UserList; 18 | -------------------------------------------------------------------------------- /react-useContext/src/contexts/UserContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const UserContext = createContext(); 4 | -------------------------------------------------------------------------------- /react-useContext/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render(, rootElement); 8 | -------------------------------------------------------------------------------- /react-useContext/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /react-useMemo/.codesandbox/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 | } -------------------------------------------------------------------------------- /react-useMemo/README.md: -------------------------------------------------------------------------------- 1 | # react-useMemo 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /react-useMemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": ["react", "starter"], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "17.0.2", 9 | "react-dom": "17.0.2", 10 | "react-scripts": "4.0.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "typescript": "4.1.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] 23 | } 24 | -------------------------------------------------------------------------------- /react-useMemo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /react-useMemo/src/App.js: -------------------------------------------------------------------------------- 1 | import "./styles.css"; 2 | import React, { useMemo } from "react"; 3 | 4 | const users = [ 5 | { id: "a", name: "Robin" }, 6 | { id: "b", name: "Dennis" } 7 | ]; 8 | export default function App() { 9 | const [text, setText] = React.useState(""); 10 | const [search, setSearch] = React.useState(""); 11 | 12 | const handleText = (event) => { 13 | setText(event.target.value); 14 | }; 15 | 16 | const handleSearch = () => { 17 | setSearch(text); 18 | }; 19 | 20 | const filteredUsers = useMemo( 21 | () => 22 | users.filter((user) => { 23 | console.log("Filter function is running ..."); 24 | return user.name.toLowerCase().includes(search.toLowerCase()); 25 | }), 26 | [search] 27 | ); 28 | console.log(search); 29 | return ( 30 |
31 | 32 | 35 | 36 | 37 |
38 | ); 39 | } 40 | const List = ({ list }) => { 41 | return ( 42 | 47 | ); 48 | }; 49 | 50 | const ListItem = ({ item }) => { 51 | return
  • {item.name}
    • ; 52 | }; 53 | -------------------------------------------------------------------------------- /react-useMemo/src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /react-useMemo/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /react-useReducer/.codesandbox/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 | } -------------------------------------------------------------------------------- /react-useReducer/README.md: -------------------------------------------------------------------------------- 1 | # react-useReducer 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /react-useReducer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": ["react", "starter"], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "17.0.2", 9 | "react-dom": "17.0.2", 10 | "react-scripts": "4.0.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "typescript": "4.1.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] 23 | } 24 | -------------------------------------------------------------------------------- /react-useReducer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
    31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /react-useReducer/src/App.js: -------------------------------------------------------------------------------- 1 | import { useReducer } from "react"; 2 | import { reducer } from "./reducer"; 3 | import "./styles.css"; 4 | 5 | export default function App() { 6 | const initialState = { 7 | data: "", 8 | loading: false, 9 | error: "" 10 | }; 11 | 12 | const [state, dispatch] = useReducer(reducer, initialState); 13 | const { data, loading, error } = state; 14 | const fetchDog = () => { 15 | dispatch({ type: "FETCH_START" }); 16 | 17 | fetch("https://dog.ceo/api/breeds/image/random") 18 | .then((res) => res.json()) 19 | .then((res) => { 20 | dispatch({ type: "FETCH_SUCCESS", payload: res.message }); 21 | }) 22 | .catch(() => { 23 | dispatch({ type: "FETCH_ERROR" }); 24 | }); 25 | }; 26 | return ( 27 |
    28 | 31 | {data && ( 32 |
    33 | Random Dog 34 |
    35 | )} 36 | {error &&

    {error}

    } 37 |
    38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /react-useReducer/src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /react-useReducer/src/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | switch (action.type) { 3 | case "FETCH_START": 4 | return { ...state, loading: true, error: "", data: "" }; 5 | case "FETCH_SUCCESS": 6 | return { ...state, loading: false, data: action.payload }; 7 | case "FETCH_ERROR": 8 | return { ...state, loading: false, error: "Error fetching data" }; 9 | 10 | default: 11 | return state; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /react-useReducer/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /react-useRef/.codesandbox/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 | } -------------------------------------------------------------------------------- /react-useRef/README.md: -------------------------------------------------------------------------------- 1 | # react-useRef 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /react-useRef/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": ["react", "starter"], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "17.0.2", 9 | "react-dom": "17.0.2", 10 | "react-scripts": "4.0.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "typescript": "4.1.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] 23 | } 24 | -------------------------------------------------------------------------------- /react-useRef/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
    31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /react-useRef/src/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react"; 2 | import "./styles.css"; 3 | 4 | export default function App() { 5 | const inputRef = useRef(); 6 | const divRef = useRef(); 7 | const [, setDummy] = useState({}); 8 | const value = useRef(0); 9 | console.log(value); 10 | const onFocusButton = () => { 11 | inputRef.current.focus(); 12 | }; 13 | 14 | const onDivBorder = () => { 15 | divRef.current.style.border = "1px solid black"; 16 | }; 17 | 18 | const onIncrease = () => { 19 | setDummy({}); 20 | value.current += 1; 21 | }; 22 | 23 | useEffect(() => { 24 | console.log(inputRef.current); 25 | }); 26 | 27 | return ( 28 |
    29 |

    Hello CodeSandbox

    30 |

    Start editing to see some magic happen!

    31 | 32 | 33 | 34 | 35 |
    36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /react-useRef/src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /react-useRef/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | --------------------------------------------------------------------------------