From 6032e3533fa01cb722d750db13419406da344ae0 Mon Sep 17 00:00:00 2001 From: Kamal Wickramanayake Date: Wed, 1 Jul 2026 15:30:09 +0530 Subject: React sample apps: useEffect hook, Axios api calls --- react/05-useeffect/src/App.css | 0 react/05-useeffect/src/App.jsx | 37 ++++++++++++++++++++++++++++++++ react/05-useeffect/src/assets/hero.png | Bin 0 -> 13057 bytes react/05-useeffect/src/assets/react.svg | 1 + react/05-useeffect/src/assets/vite.svg | 1 + react/05-useeffect/src/index.css | 0 react/05-useeffect/src/main.jsx | 10 +++++++++ 7 files changed, 49 insertions(+) create mode 100644 react/05-useeffect/src/App.css create mode 100644 react/05-useeffect/src/App.jsx create mode 100644 react/05-useeffect/src/assets/hero.png create mode 100644 react/05-useeffect/src/assets/react.svg create mode 100644 react/05-useeffect/src/assets/vite.svg create mode 100644 react/05-useeffect/src/index.css create mode 100644 react/05-useeffect/src/main.jsx (limited to 'react/05-useeffect/src') diff --git a/react/05-useeffect/src/App.css b/react/05-useeffect/src/App.css new file mode 100644 index 0000000..e69de29 diff --git a/react/05-useeffect/src/App.jsx b/react/05-useeffect/src/App.jsx new file mode 100644 index 0000000..4caa969 --- /dev/null +++ b/react/05-useeffect/src/App.jsx @@ -0,0 +1,37 @@ +import { useEffect, useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from './assets/vite.svg' +import heroImg from './assets/hero.png' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + useEffect(() => { + console.log('This runs on every render'); + }); + + useEffect(() => { + console.log('This runs only once when the component mounts'); + }, []); + + useEffect(() => { + console.log(`This runs on mount and whenever count changes`); + }, [count]); + + return ( + <> + + + + + ) +} + +export default App diff --git a/react/05-useeffect/src/assets/hero.png b/react/05-useeffect/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/react/05-useeffect/src/assets/hero.png differ diff --git a/react/05-useeffect/src/assets/react.svg b/react/05-useeffect/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/react/05-useeffect/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react/05-useeffect/src/assets/vite.svg b/react/05-useeffect/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/react/05-useeffect/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/react/05-useeffect/src/index.css b/react/05-useeffect/src/index.css new file mode 100644 index 0000000..e69de29 diff --git a/react/05-useeffect/src/main.jsx b/react/05-useeffect/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/react/05-useeffect/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) -- cgit v1.2.3