asd

react_alap/mai/package-lock.json

@@ -13723,6 +13723,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

react_alap/mai/src/25_01_21/Counter.js

@@ -0,0 +1,14 @@
+import { useContext, useEffect } from "react";
+import { CounterContext } from "./CounterContext";
+
+function Counter(){
+    let {counter, setCounter} = useContext(CounterContext);
+
+    return (
+        <button onClick={() => {setCounter(counter + 1)}}>
+            Nyomj meg {counter}
+        </button>
+    )
+}
+
+export default Counter;

react_alap/mai/src/25_01_21/CounterContext.js

@@ -0,0 +1,16 @@
+import { createContext, useState } from "react";
+import Counter from "./Counter";
+
+export let CounterContext = createContext();
+
+function CounterProvider(){
+    const [counter, setCounter] = useState(0);
+
+    return (
+        <CounterContext.Provider value={{counter, setCounter}}>
+            <Counter></Counter>
+        </CounterContext.Provider>
+    )
+}
+
+export default CounterProvider;

react_alap/mai/src/25_01_21/SW.js

@@ -0,0 +1,42 @@
+import { useState , useEffect} from "react";
+
+const url = "https://swapi.dev/api/films/?format=json";
+
+function SW(){
+    let [resp, setResp] = useState([]);
+
+    useEffect(
+        () => {
+            async function lekeres(fetchUrl) {
+                try {
+                    let response = await fetch(fetchUrl);
+                    let data = await response.json();
+                    setResp(data.results);
+                } catch (error) {
+                    console.error(error);
+                }
+                
+            }
+    
+            lekeres(url);
+        }, []
+    );
+
+    if (!resp){
+        <>
+            Adatok betöltése ...
+        </>
+    }
+
+    return (
+        <ul>
+            {resp.map((adat) => (
+                <li key={adat.episode_id}>
+                    {adat.title}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default SW;

react_alap/mai/src/25_01_21/SW7.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const url = "https://swapi.dev/api/films/?format=json";
+
+let adatok = [
+    {
+        episode_id: 7
+    }, 
+    {
+        episode_id: 8
+    }, 
+    {
+        episode_id: 9
+    }
+]
+
+function SW7(){
+    return (
+        <button>
+            Adatok feltöltése
+        </button>
+    )
+}

react_alap/mai/src/App.js

@@ -7,11 +7,14 @@ import Keslelteto from './Keslelteto';
 import Idozito from './Idozito';
 import ContextPelda from './ContextPelda';
 import UseRefPelda from './UseRefPelda';
+import Counter from './25_01_21/Counter';
+import CounterProvider from './25_01_21/CounterContext';
+import SW from './25_01_21/SW';
 
 function App() {
   return (
     <>
-      <UseRefPelda/>
+      <SW/>
     </>
   );
 }