React form

2025. 01. 06/test/package.json

@@ -6,7 +6,8 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^7.1.3",
+    "react-scripts": "^3.0.1",
     "web-vitals": "^4.2.4"
   },
   "scripts": {

2025. 01. 06/test/src/About.jsx

@@ -0,0 +1,8 @@
+function About() {
+    return (
+        <p>Körtefa</p>
+    )
+}
+
+
+export default About

2025. 01. 06/test/src/App.js

@@ -1,25 +1,20 @@
 import logo from './logo.svg';
 import './App.css';
+import { Routes, Route } from 'react-router-dom';
+import Home from './Home';
+import About from './About';
+import Contact from './Contact';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    <>
+      <Routes>
+        <Route path='/' element={ <Home/> }></Route>
+        <Route path='about' element={ <About/> }></Route>
+        <Route path='contact' element={ <Contact/> }></Route>
+      </Routes>
+    </>
+  )
 }
 
-export default App;
+export default App;

2025. 01. 06/test/src/Contact.jsx

@@ -0,0 +1,8 @@
+function Contact() {
+    return (
+        <p>Almafa</p>
+    )
+}
+
+
+export default Contact

2025. 01. 06/test/src/Counter.js

@@ -0,0 +1,16 @@
+import { useContext } from "react"
+import { CounterContext } from "./CounterContext"
+
+
+function Counter() {
+    let { counter, setCounter } = useContext(CounterContext)
+    return (
+        <div>
+            <h1>Számláló: {counter}</h1>
+            <button onClick={() => {setCounter(counter + 1)}}>Növelés</button>
+        </div>
+    )
+}
+
+
+export default Counter

2025. 01. 06/test/src/CounterContext.js

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

2025. 01. 06/test/src/Home.jsx

@@ -0,0 +1,14 @@
+import { Link } from "react-router-dom"
+
+function Home() {
+    return (
+        <>
+            <h1>Kezdőlap</h1>
+            <Link to="about">Információhoz link</Link>
+            <Link to="contact">Elérhetőséghez link</Link>
+        </>
+    )
+}
+
+
+export default Home

2025. 01. 06/test/src/StarWarsGet.js

@@ -0,0 +1,35 @@
+async function StarWarsGet() {
+    const data = await lekeres()
+    
+    return (
+        data.map((item) => {
+            <div>
+                <h1>{item.title}</h1>
+                <span><b>Rendező:</b> {item.director}</span>
+                <span><b>Producer:</b> {item.producer}</span>
+                <span><b>Készítés éve:</b> {item.release_date}</span>
+            </div>  
+        })
+    )
+}
+
+
+async function lekeres() {
+    try {
+        let results = await fetch("https://swapi.dev/api/films/?format=json")
+
+        if(!results) {
+            return <h1>Adatok betöltése</h1>
+        }
+        
+
+        const data = await results.json()
+        
+        return data.results
+    } catch (e) {
+        console.log(`Hiba történt: ${e}`);
+    }
+}
+
+
+export default StarWarsGet

2025. 01. 06/test/src/UseEffectTest.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+
+function UseEffectTest() {
+    let [counter, setCounter] = useState(0)
+
+
+    useEffect(() => {
+        let timer = setTimeout(() => {
+            setCounter((counter) => counter + 1)
+        }, 3000)
+
+
+        return () => clearTimeout(timer)
+    }, [counter])
+
+
+    return <h1>A counter értéke {counter}</h1>
+}
+
+
+export default UseEffectTest

2025. 01. 06/test/src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import StarWarsGet from './StarWarsGet';
+import { BrowserRouter } from 'react-router-dom';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <BrowserRouter>
+    <Home/>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function