steffen/mms-react-abvanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier setup

Browse Source
This commit is contained in:
e560248
2025-04-08 12:54:07 +02:00
parent 419113541b
commit 6577698459
43 changed files with 781 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -29,5 +29,6 @@
}, },
"[typescriptreact]": { "[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
} },
"prettier.configPath": "react-advanced-tag1/.prettierrc.mjs"
} }

12
react-advanced-tag1/.prettierrc.mjs Normal file
View File

@@ -0,0 +1,12 @@
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
*/
const config = {
trailingComma: "es5",
tabWidth: 2,
semi: false,
singleQuote: true,
};
export default config;

17
react-advanced-tag1/package-lock.json generated
View File

@@ -27,6 +27,7 @@
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0", "globals": "^15.15.0",
"jsdom": "^26.0.0", "jsdom": "^26.0.0",
"prettier": "3.5.3",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",
"vite": "^6.2.0", "vite": "^6.2.0",
@@ -4257,6 +4258,22 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "3.5.3",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/prettier/-/prettier-3.5.3.tgz",
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-format": { "node_modules/pretty-format": {
"version": "27.5.1", "version": "27.5.1",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/pretty-format/-/pretty-format-27.5.1.tgz", "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/pretty-format/-/pretty-format-27.5.1.tgz",

6
react-advanced-tag1/package.json
View File

@@ -13,7 +13,8 @@
"test:watch": "vitest --watch", "test:watch": "vitest --watch",
"test:coverage": "vitest --coverage", "test:coverage": "vitest --coverage",
"test:coverage:report": "vitest --coverage --reporter=html", "test:coverage:report": "vitest --coverage --reporter=html",
"test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html" "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html",
"prettier": "prettier ./src --write"
}, },
"dependencies": { "dependencies": {
"react": "^19.0.0", "react": "^19.0.0",
@@ -35,9 +36,10 @@
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0", "globals": "^15.15.0",
"jsdom": "^26.0.0", "jsdom": "^26.0.0",
"prettier": "3.5.3",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",
"vite": "^6.2.0", "vite": "^6.2.0",
"vitest": "^3.1.1" "vitest": "^3.1.1"
} }
} }

4
react-advanced-tag1/src/App.css
View File

@@ -1,5 +1,3 @@
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
@@ -36,7 +34,7 @@
color: #888; color: #888;
} }
input[type="text"] { input[type='text'] {
border-radius: 6px; border-radius: 6px;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
} }

29
react-advanced-tag1/src/App.tsx
View File

@@ -13,20 +13,21 @@ import ModalPage from './pages/ModalPage'
import { HocPage } from './pages/HocPage' import { HocPage } from './pages/HocPage'
function App() { function App() {
return (
return <MainLayout> <MainLayout>
<Routes> <Routes>
<Route path="/" element={<HomePage />} /> <Route path="/" element={<HomePage />} />
<Route path="/user" element={<UsersPage />} /> <Route path="/user" element={<UsersPage />} />
<Route path="/effect" element={<EffectExercisesPage />} /> <Route path="/effect" element={<EffectExercisesPage />} />
<Route path="/forms" element={<FormsPage />} /> <Route path="/forms" element={<FormsPage />} />
<Route path="/memocallback" element={<MemoCallbackPage />} /> <Route path="/memocallback" element={<MemoCallbackPage />} />
<Route path="/componentwrapper" element={<ComponentWrapperPage />} /> <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
<Route path="/modalpage" element={<ModalPage />} /> <Route path="/modalpage" element={<ModalPage />} />
<Route path="/zustandcounterpage" element={<ZustandCounterPage />} /> <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
<Route path="/hoc" element={<HocPage />} /> <Route path="/hoc" element={<HocPage />} />
</Routes> </Routes>
</MainLayout> </MainLayout>
)
} }
export default App export default App

12
react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css
View File

@@ -10,10 +10,10 @@
} }
.component-content { .component-content {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
background-color: #888; background-color: #888;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }

27
react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
View File

@@ -1,17 +1,18 @@
import './ComponentWrapper.css' import './ComponentWrapper.css'
interface ComponentWrapperProps { interface ComponentWrapperProps {
title?: string; title?: string
children: React.ReactNode; children: React.ReactNode
}
export default function ComponentWrapper({
children,
title,
}: ComponentWrapperProps): React.ReactElement {
console.log('ComponentWrapper rendered:', title)
return (
<div className="component-wrapper">
{title && <h2>{title}</h2>}
<div className="component-content">{children}</div>
</div>
)
} }
export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
console.log("ComponentWrapper rendered:", title);
return (
<div className='component-wrapper'>
{title && <h2>{title}</h2>}
<div className='component-content'>
{children}
</div>
</div>
);
}

18
react-advanced-tag1/src/common/components/Footer.test.tsx
View File

@@ -1,10 +1,10 @@
import { render, screen } from "@testing-library/react"; import { render, screen } from '@testing-library/react'
import Footer from "./Footer"; import Footer from './Footer'
import { describe, it, expect } from "vitest"; import { describe, it, expect } from 'vitest'
describe("Footer Component", () => { describe('Footer Component', () => {
it("should render the footer with correct content", () => { it('should render the footer with correct content', () => {
render(<Footer />); render(<Footer />)
expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined(); expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined()
}); })
}); })

14
react-advanced-tag1/src/common/components/Footer.tsx
View File

@@ -1,10 +1,10 @@
function Footer() { function Footer() {
console.log("Footer rendered"); console.log('Footer rendered')
return ( return (
<footer> <footer>
<p>&copy; 2025 Your Company</p> <p>&copy; 2025 Your Company</p>
</footer> </footer>
); )
} }
export default Footer; export default Footer

51
react-advanced-tag1/src/common/components/Header/Navigation.tsx
View File

@@ -1,16 +1,35 @@
export default function Navigation () { export default function Navigation() {
return ( return (
<nav> <nav>
<ul> <ul>
<li><a href="/">Home</a></li> <li>
<li><a href="/user">Users</a></li> <a href="/">Home</a>
<li><a href="/effect">Effects</a></li> </li>
<li><a href="/forms">Forms</a></li> <li>
<li><a href="/memocallback">Memo und Callback</a></li> <a href="/user">Users</a>
<li><a href="/componentwrapper">Component Wrapper</a></li> </li>
<li><a href="/modalpage">Modal</a></li> <li>
<li><a href="/zustandcounterpage">ZustandCounterPage</a></li> <a href="/effect">Effects</a>
<li><a href="/hoc">HOC</a></li> </li>
</ul> <li>
</nav>); <a href="/forms">Forms</a>
} </li>
<li>
<a href="/memocallback">Memo und Callback</a>
</li>
<li>
<a href="/componentwrapper">Component Wrapper</a>
</li>
<li>
<a href="/modalpage">Modal</a>
</li>
<li>
<a href="/zustandcounterpage">ZustandCounterPage</a>
</li>
<li>
<a href="/hoc">HOC</a>
</li>
</ul>
</nav>
)
}

18
react-advanced-tag1/src/common/components/Header/index.tsx
View File

@@ -1,13 +1,13 @@
import Navigation from "./Navigation"; import Navigation from './Navigation'
const Header = () => { const Header = () => {
console.log("Header rendered"); console.log('Header rendered')
return ( return (
<header> <header>
<h1>My Application</h1> <h1>My Application</h1>
<Navigation /> <Navigation />
</header> </header>
); )
} }
export default Header; export default Header

2
react-advanced-tag1/src/common/components/Modal.css
View File

@@ -15,4 +15,4 @@
background-color: red; background-color: red;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
} }

35
react-advanced-tag1/src/common/components/Modal.tsx
View File

@@ -1,18 +1,25 @@
import'./Modal.css'; import './Modal.css'
interface ModalProps { interface ModalProps {
open?: boolean; open?: boolean
onClose?: () => void; onClose?: () => void
} }
export default function Modal({ open= true, onClose }: ModalProps): React.ReactElement { export default function Modal({
console.log("Modal rendered"); open = true,
return ( onClose,
<div style={{ display: open ? "block" : "none" }} className='modal' onClick={() => onClose && onClose()}> }: ModalProps): React.ReactElement {
<div className='modal-content'> console.log('Modal rendered')
<h2>Modal</h2> return (
<p>This is a modal component.</p> <div
</div> style={{ display: open ? 'block' : 'none' }}
</div> className="modal"
); onClick={() => onClose && onClose()}
} >
<div className="modal-content">
<h2>Modal</h2>
<p>This is a modal component.</p>
</div>
</div>
)
}

42
react-advanced-tag1/src/common/components/exercises/EffectExercises/index.tsx
View File

@@ -1,26 +1,24 @@
import { useEffect, useState } from "react" import { useEffect, useState } from 'react'
export default function EffectExercises() { export default function EffectExercises() {
const [counter, setCounter] = useState(0)
const [counter, setCounter] = useState(0); useEffect(() => {
console.log('EffectExercises mounted')
const interval = setInterval(() => {
setCounter((prevCounter) => prevCounter + 1)
}, 1000)
return () => {
console.log('EffectExercises unmounted')
clearInterval(interval)
}
}, [counter])
return (
<section>
<h2>Effect Exercises</h2>
<p>Counter: {counter}</p>
useEffect(() => { <button onClick={() => setCounter(0)}>Reset</button>
console.log("EffectExercises mounted"); </section>
const interval = setInterval(() => { )
setCounter(prevCounter => prevCounter + 1); }
}
, 1000);
return () => {
console.log("EffectExercises unmounted");
clearInterval(interval);
}
}, [counter]);
return (
<section>
<h2>Effect Exercises</h2>
<p>Counter: {counter}</p>
<button onClick={() => setCounter(0)}>Reset</button>
</section>
)
}

25
react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
View File

@@ -1,18 +1,17 @@
import withLoader, { LoaderData } from "./WithLoader"; import withLoader, { LoaderData } from './WithLoader'
import './DogImages.css'; import './DogImages.css'
interface DogImagesProps { interface DogImagesProps {
data: LoaderData; data: LoaderData
} }
function DogImages({data}: DogImagesProps) { function DogImages({ data }: DogImagesProps) {
return data.message.map((img, index) => ( return data.message.map((img, index) => (
<img <img key={index} src={img} className="dog-image" />
key={index} ))
src={img}
className="dog-image"
/>
));
} }
const DogImagesWithLoader = withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6"); const DogImagesWithLoader = withLoader(
export default DogImagesWithLoader; DogImages,
'https://dog.ceo/api/breed/labrador/images/random/6'
)
export default DogImagesWithLoader

66
react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
View File

@@ -1,50 +1,44 @@
import { ComponentType, useEffect, useState } from 'react'
import { ComponentType, useEffect, useState } from "react";
export type LoaderData = { export type LoaderData = {
message: string[]; message: string[]
status: string; status: string
} }
interface WithLoaderProps { interface WithLoaderProps {
data: LoaderData; data: LoaderData
} }
// HOC definition // HOC definition
export default function withLoader<P>( export default function withLoader<P>(
WrappedComponent: ComponentType<P & WithLoaderProps>, WrappedComponent: ComponentType<P & WithLoaderProps>,
url: string, url: string
) { ) {
return function WithLoaderComponent(props: P) { return function WithLoaderComponent(props: P) {
const [data, setData] = useState<LoaderData | null>(null); const [data, setData] = useState<LoaderData | null>(null)
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
try { try {
const response = await fetch(url); const response = await fetch(url)
const json = await response.json(); const json = await response.json()
// setData(json); // setData(json);
setTimeout(() => { setTimeout(() => {
setData(json); setData(json)
} }, 5000)
, 5000); } catch (error) {
} console.error('Error fetching data:', error)
catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData();
}, []);
if (!data) {
return <p>Loading...</p>;
} }
}
return ( fetchData()
<WrappedComponent {...(props as P)} data={data} /> }, [])
);
if (!data) {
}; return <p>Loading...</p>
} }
return <WrappedComponent {...(props as P)} data={data} />
}
}

2
react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
View File

@@ -3,4 +3,4 @@
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
margin: 10px; margin: 10px;
} }

16
react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx
View File

@@ -1,12 +1,18 @@
import React, { memo } from "react"; import React, { memo } from 'react'
interface SearchProps { interface SearchProps {
onChange: (text: string) => void; onChange: (text: string) => void
} }
function Search({ onChange }: SearchProps): React.ReactElement { function Search({ onChange }: SearchProps): React.ReactElement {
console.log("Search rendered"); console.log('Search rendered')
return <input type="text" onChange={(e) => onChange(e.target.value)} placeholder="Search user..." />; return (
<input
type="text"
onChange={(e) => onChange(e.target.value)}
placeholder="Search user..."
/>
)
} }
export default memo(Search); export default memo(Search)

72
react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx
View File

@@ -1,42 +1,44 @@
import { render, screen, fireEvent } from "@testing-library/react"; import { render, screen, fireEvent } from '@testing-library/react'
import MemoCallback from "./index"; import MemoCallback from './index'
import { describe, it, expect } from "vitest"; import { describe, it, expect } from 'vitest'
import { users } from "../../../utils/shuffle"; import { users } from '../../../utils/shuffle'
describe('MemoCallback Component', () => {
it('should render the component with initial users', () => {
render(<MemoCallback />)
users.forEach((user) => {
expect(screen.getByText(user)).toBeDefined()
})
})
it('should filter users based on search input', () => {
render(<MemoCallback />)
const searchInput = screen.getByPlaceholderText(/search/i)
describe("MemoCallback Component", () => { fireEvent.change(searchInput, { target: { value: 'a' } })
it("should render the component with initial users", () => { const filteredUsers = users.filter((user) =>
render(<MemoCallback />); user.toLowerCase().includes('a')
users.forEach((user) => { )
expect(screen.getByText(user)).toBeDefined(); filteredUsers.forEach((user) => {
}); expect(screen.getByText(user)).toBeDefined()
}); })
it("should filter users based on search input", () => { const nonMatchingUsers = users.filter(
render(<MemoCallback />); (user) => !user.toLowerCase().includes('a')
const searchInput = screen.getByPlaceholderText(/search/i); )
nonMatchingUsers.forEach((user) => {
expect(screen.queryByText(user)).not.toBeDefined()
})
})
fireEvent.change(searchInput, { target: { value: "a" } }); it('should shuffle users when the shuffle button is clicked', () => {
const filteredUsers = users.filter((user) => user.toLowerCase().includes("a")); render(<MemoCallback />)
filteredUsers.forEach((user) => { const shuffleButton = screen.getByText(/shuffle/i)
expect(screen.getByText(user)).toBeDefined();
});
const nonMatchingUsers = users.filter((user) => !user.toLowerCase().includes("a")); const initialOrder = screen.getAllByText(/./).map((el) => el.textContent)
nonMatchingUsers.forEach((user) => { fireEvent.click(shuffleButton)
expect(screen.queryByText(user)).not.toBeDefined(); const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent)
});
});
it("should shuffle users when the shuffle button is clicked", () => { expect(initialOrder).not.toEqual(shuffledOrder)
render(<MemoCallback />); })
const shuffleButton = screen.getByText(/shuffle/i); })
const initialOrder = screen.getAllByText(/./).map((el) => el.textContent);
fireEvent.click(shuffleButton);
const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent);
expect(initialOrder).not.toEqual(shuffledOrder);
});
});

50
react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx
View File

@@ -1,33 +1,31 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from 'react'
import Search from "./Search"; import Search from './Search'
import { users, shuffleArray } from "../../../utils/shuffle"; import { users, shuffleArray } from '../../../utils/shuffle'
export default function MemoCallback() { export default function MemoCallback() {
console.log("MemoCallback rendered"); console.log('MemoCallback rendered')
const [allUsers, setAllUsers] = useState(users); const [allUsers, setAllUsers] = useState(users)
const handleSearch = useCallback((text: string) => { const handleSearch = useCallback((text: string) => {
const filteredUsers = users.filter((user) => { const filteredUsers = users.filter((user) => {
return user.toLowerCase().includes(text.toLowerCase()); return user.toLowerCase().includes(text.toLowerCase())
}); })
setAllUsers(filteredUsers); setAllUsers(filteredUsers)
}, []); }, [])
const handleShuffle = () => { const handleShuffle = () => {
setAllUsers(shuffleArray(users)); setAllUsers(shuffleArray(users))
}; }
const ListOfUsers = allUsers.map((user) => { const ListOfUsers = allUsers.map((user) => {
return <p key={user}>{user}</p>; return <p key={user}>{user}</p>
}); })
return ( return (
<div> <div>
<button onClick={handleShuffle}>Shuffle</button> <button onClick={handleShuffle}>Shuffle</button>
<Search onChange={handleSearch} /> <Search onChange={handleSearch} />
<div> <div>{ListOfUsers}</div>
{ListOfUsers} </div>
</div> )
</div>
);
} }

173
react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx
View File

@@ -1,83 +1,112 @@
import { FormEvent, useRef, useState } from "react"; import { FormEvent, useRef, useState } from 'react'
import useLocalStorage from "../../../hooks/useLocalStorage"; import useLocalStorage from '../../../hooks/useLocalStorage'
interface FormValues { interface FormValues {
email: string; email: string
password: string; password: string
} }
export default function RefExercise(): React.ReactElement { export default function RefExercise(): React.ReactElement {
console.log("RefExercise rendered"); console.log('RefExercise rendered')
const emailRef = useRef<HTMLInputElement>(null); const emailRef = useRef<HTMLInputElement>(null)
const passwordRef = useRef<HTMLInputElement>(null); const passwordRef = useRef<HTMLInputElement>(null)
const {setStoredValue, value: formDataValues} = useLocalStorage<FormValues>("formdata", { const { setStoredValue, value: formDataValues } = useLocalStorage<FormValues>(
email: "", 'formdata',
password: "" {
} ); email: '',
password: '',
const handleSubmit = () => {
console.log("submit", {
email: emailRef.current?.value,
password: passwordRef.current?.value
});
setStoredValue({
email: emailRef.current?.value || "",
password: passwordRef.current?.value || ""
});
passwordRef.current?.focus();
} }
)
const [formData, setFormData] = useState({ const handleSubmit = () => {
strasse: "", console.log('submit', {
city: "" email: emailRef.current?.value,
}); password: passwordRef.current?.value,
})
setStoredValue({
email: emailRef.current?.value || '',
password: passwordRef.current?.value || '',
})
passwordRef.current?.focus()
}
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const [formData, setFormData] = useState({
setFormData({ strasse: '',
...formData, city: '',
[event.target.name]: event.target.value })
});
}
const handleChangeSubmit = () => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const strasse = document.querySelector('input[name="strasse"]') as HTMLInputElement; setFormData({
const city = document.querySelector('input[name="city"]') as HTMLInputElement; ...formData,
console.log("submit", { [event.target.name]: event.target.value,
strasse: strasse.value, })
city: city.value }
});
}
function handleFormSubmit(e: FormEvent) {
e.preventDefault();
const data = new FormData(e.target as HTMLFormElement);
console.log('handleFormSubmit', {
email: data.get('email'),
password: data.get('password')
});
}
return (
<div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<h3>values by ref</h3>
<input type="text" placeholder="email" ref={emailRef} defaultValue={formDataValues?.email}/>
<input type="text" placeholder="password" ref={passwordRef} defaultValue={formDataValues?.password}/>
<button onClick={handleSubmit}>Submit</button>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<h3>change event (bad way, but validation is possible)</h3>
<input type="text" name="strasse" placeholder="Strasse" onChange={handleChange} />
<input type="text" name="city" placeholder="Stadt" onChange={handleChange}/>
<button onClick={handleChangeSubmit}>submit</button>
</div> const handleChangeSubmit = () => {
<form onSubmit={handleFormSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}> const strasse = document.querySelector(
<h3>By Form Event</h3> 'input[name="strasse"]'
<input type="text" name="email" placeholder="Email" /> ) as HTMLInputElement
<input type="text" name="password" placeholder="password" /> const city = document.querySelector(
<button type="submit">Send</button> 'input[name="city"]'
</form> ) as HTMLInputElement
</div> console.log('submit', {
); strasse: strasse.value,
} city: city.value,
})
}
function handleFormSubmit(e: FormEvent) {
e.preventDefault()
const data = new FormData(e.target as HTMLFormElement)
console.log('handleFormSubmit', {
email: data.get('email'),
password: data.get('password'),
})
}
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<h3>values by ref</h3>
<input
type="text"
placeholder="email"
ref={emailRef}
defaultValue={formDataValues?.email}
/>
<input
type="text"
placeholder="password"
ref={passwordRef}
defaultValue={formDataValues?.password}
/>
<button onClick={handleSubmit}>Submit</button>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<h3>change event (bad way, but validation is possible)</h3>
<input
type="text"
name="strasse"
placeholder="Strasse"
onChange={handleChange}
/>
<input
type="text"
name="city"
placeholder="Stadt"
onChange={handleChange}
/>
<button onClick={handleChangeSubmit}>submit</button>
</div>
<form
onSubmit={handleFormSubmit}
style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
>
<h3>By Form Event</h3>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="password" placeholder="password" />
<button type="submit">Send</button>
</form>
</div>
)
}

141
react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
View File

@@ -1,66 +1,97 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
interface User { interface User {
id: number; id: number
name: string; name: string
email: string; email: string
website: string; website: string
} }
export default function UserEffect() { export default function UserEffect() {
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>()
const [userId, setUserId] = useState<number>(0); const [userId, setUserId] = useState<number>(0)
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false)
useEffect(() => { useEffect(() => {
console.log("UserEffect mounted"); console.log('UserEffect mounted')
if (userId === 0) { if (userId === 0) {
return; return
}
const start = performance.now() // Start measuring performance
setLoading(true)
// Using AbortController to cancel the fetch request if the component unmounts
// or if the userId changes before the fetch completes
const controller = new AbortController()
const signal = controller.signal
fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
signal: signal,
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok')
} }
return response.json()
})
.then((data) => {
setUser(data)
const end = performance.now() // End measuring performance
const timeTaken = end - start // Calculate the time taken
console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`)
setLoading(false)
})
.catch((error) => {
console.error('There was a problem with the fetch operation:', error)
})
return () => {
console.log('UserEffect unmounted')
// Cleanup function to abort the fetch request if the component unmounts
// or if the userId changes before the fetch completes
controller.abort('Fetch aborted')
}
}, [userId])
const start = performance.now(); // Start measuring performance return (
<section>
<h2>users Effect Exercise</h2>
setLoading(true); {userId === 0 && <p>Please select a user</p>}
{loading || userId === 0 ? (
<p>Loading...</p>
) : (
<p>
[{user?.id}] {user?.name}: {user?.website}
</p>
)}
// Using AbortController to cancel the fetch request if the component unmounts <button
// or if the userId changes before the fetch completes onClick={() => setUserId(1)}
const controller = new AbortController(); style={{ padding: 10, border: '1px solid gray' }}
const signal = controller.signal; >
User 1
fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {signal: signal}).then(response => { </button>
if (!response.ok) { <button
throw new Error("Network response was not ok"); onClick={() => setUserId(2)}
} style={{ padding: 10, border: '1px solid gray' }}
return response.json(); >
}).then(data => { User 2
setUser(data); </button>
const end = performance.now(); // End measuring performance <button
const timeTaken = end - start; // Calculate the time taken onClick={() => setUserId(3)}
console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`); style={{ padding: 10, border: '1px solid gray' }}
setLoading(false); >
}).catch(error => { User 3
console.error("There was a problem with the fetch operation:", error); </button>
}); <button
return () => { onClick={() => setUserId(4)}
console.log("UserEffect unmounted"); style={{ padding: 10, border: '1px solid gray' }}
// Cleanup function to abort the fetch request if the component unmounts >
// or if the userId changes before the fetch completes User 4
controller.abort('Fetch aborted'); </button>
} </section>
}, [userId]); )
}
return (
<section>
<h2>users Effect Exercise</h2>
{userId === 0 && <p>Please select a user</p>}
{loading || userId === 0 ? <p>Loading...</p> : <p>[{user?.id}] {user?.name}: {user?.website}</p>}
<button onClick={() => setUserId(1)} style={{padding: 10, border: '1px solid gray'}}>User 1</button>
<button onClick={() => setUserId(2)} style={{padding: 10, border: '1px solid gray'}}>User 2</button>
<button onClick={() => setUserId(3)} style={{padding: 10, border: '1px solid gray'}}>User 3</button>
<button onClick={() => setUserId(4)} style={{padding: 10, border: '1px solid gray'}}>User 4</button>
</section>
)
}

66
react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
View File

@@ -1,33 +1,45 @@
import { useFetch } from "../../hooks/useFetch"; import { useFetch } from '../../hooks/useFetch'
import { useMediaQuery } from "../../hooks/useMediaQuery"; import { useMediaQuery } from '../../hooks/useMediaQuery'
export function UserOverview() { export function UserOverview() {
const {data, loading, error} = useFetch("https://jsonplaceholder.typicode.com/users"); const { data, loading, error } = useFetch(
'https://jsonplaceholder.typicode.com/users'
)
const isMobile = useMediaQuery('(max-width: 600px)'); const isMobile = useMediaQuery('(max-width: 600px)')
console.log("isMobile", isMobile); console.log('isMobile', isMobile)
if (error) { if (error) {
return <p>Error: {error}</p>; return <p>Error: {error}</p>
} }
if (loading) { if (loading) {
return <p>Loading...</p>; return <p>Loading...</p>
} }
if (!data) { if (!data) {
return <p>No data available</p>; return <p>No data available</p>
} }
return ( return (
<div> <div>
<h2>User Overview</h2> <h2>User Overview</h2>
<ul> <ul>
{data.map((user: { id: number; name: string; email: string; website: string }) => ( {data.map(
<li key={user.id}> (user: {
<strong>{user.name}</strong> <div style={{display: isMobile ? 'none' : 'block' }}>({user.email}) - {user.website}</div> id: number
</li> name: string
))} email: string
</ul> website: string
<p>Total Users: {data.length}</p> }) => (
</div> <li key={user.id}>
); <strong>{user.name}</strong>{' '}
<div style={{ display: isMobile ? 'none' : 'block' }}>
({user.email}) - {user.website}
</div>
</li>
)
)}
</ul>
<p>Total Users: {data.length}</p>
</div>
)
} }

16
react-advanced-tag1/src/common/components/globals/Heading.tsx
View File

@@ -1,8 +1,8 @@
export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement { export default function Heading({
console.log("Heading rendered"); title = 'Hallo Teilnehmer',
return ( }: {
<h2 > title?: string
{title} }): React.ReactElement {
</h2> console.log('Heading rendered')
); return <h2>{title}</h2>
} }

75
react-advanced-tag1/src/common/hooks/useFetch.ts
View File

@@ -1,49 +1,44 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
interface User { interface User {
id: number; id: number
name: string; name: string
email: string; email: string
website: string; website: string
} }
export function useFetch(url: string) { export function useFetch(url: string) {
const [data, setData] = useState<User[] | null>(null); const [data, setData] = useState<User[] | null>(null)
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null)
// alternativ // alternativ
// const [fetchValues, setFetchValues] = useState({ // const [fetchValues, setFetchValues] = useState({
// data: null, // data: null,
// loading: true, // loading: true,
// error: null, // error: null,
// }); // });
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
try { try {
const response = await fetch(url); const response = await fetch(url)
if (!response.ok) { if (!response.ok) {
setError("Network response was not ok"); setError('Network response was not ok')
throw new Error("Network response was not ok"); throw new Error('Network response was not ok')
}
const data = await response.json();
setData(data);
setError(null);
} catch (error) {
console.error("Error fetching data:", error);
setError("Error fetching data");
}
finally {
setLoading(false);
}
} }
fetchData(); const data = await response.json()
setData(data)
setError(null)
} catch (error) {
console.error('Error fetching data:', error)
setError('Error fetching data')
} finally {
setLoading(false)
}
}
fetchData()
}, [url])
}, [url]); return { data, loading, error }
}
return { data, loading, error };
}

74
react-advanced-tag1/src/common/hooks/useLocalStorage.ts
View File

@@ -1,39 +1,43 @@
import { useState } from "react"; import { useState } from 'react'
export default function useLocalStorage<T>(key: string, initialValue: T | null) { export default function useLocalStorage<T>(
const [value, setValue] = useState<T | null>(() => { key: string,
try { initialValue: T | null
if (typeof window === "undefined") { ) {
return initialValue; const [value, setValue] = useState<T | null>(() => {
} try {
const storedValue = localStorage.getItem(key); if (typeof window === 'undefined') {
return storedValue ? JSON.parse(storedValue) : initialValue; return initialValue
} catch (error) { }
console.error("Error reading from localStorage", error); const storedValue = localStorage.getItem(key)
return initialValue; return storedValue ? JSON.parse(storedValue) : initialValue
} } catch (error) {
}); console.error('Error reading from localStorage', error)
const setStoredValue = (newValue: T) => { return initialValue
try {
const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
setValue(valueToStore);
if (typeof window !== "undefined") {
localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (error) {
console.error("Error writing to localStorage", error);
}
} }
})
const setStoredValue = (newValue: T) => {
try {
const valueToStore =
newValue instanceof Function ? newValue(value) : newValue
setValue(valueToStore)
if (typeof window !== 'undefined') {
localStorage.setItem(key, JSON.stringify(valueToStore))
}
} catch (error) {
console.error('Error writing to localStorage', error)
}
}
const removeStoredValue = () => { const removeStoredValue = () => {
try { try {
if (typeof window !== "undefined") { if (typeof window !== 'undefined') {
localStorage.removeItem(key); localStorage.removeItem(key)
} }
setValue(null); setValue(null)
} catch (error) { } catch (error) {
console.error("Error removing from localStorage", error); console.error('Error removing from localStorage', error)
}
} }
return {value, setStoredValue, removeStoredValue}; }
} return { value, setStoredValue, removeStoredValue }
}

37
react-advanced-tag1/src/common/hooks/useMediaQuery.ts
View File

@@ -1,5 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
/** /**
* Custom hook to check if a media query matches the current viewport. * Custom hook to check if a media query matches the current viewport.
@@ -7,25 +6,25 @@ import { useEffect, useState } from "react";
* @returns A boolean indicating whether the media query matches. * @returns A boolean indicating whether the media query matches.
*/ */
export function useMediaQuery(query: string) { export function useMediaQuery(query: string) {
const [matches, setMatches] = useState<boolean>(false); const [matches, setMatches] = useState<boolean>(false)
useEffect(() => { useEffect(() => {
const mediaQueryList = window.matchMedia(query); const mediaQueryList = window.matchMedia(query)
const handleChange = (event: MediaQueryListEvent) => { const handleChange = (event: MediaQueryListEvent) => {
setMatches(event.matches); setMatches(event.matches)
}; }
// Set the initial value // Set the initial value
setMatches(mediaQueryList.matches); setMatches(mediaQueryList.matches)
// Add event listener // Add event listener
mediaQueryList.addEventListener('change', handleChange); mediaQueryList.addEventListener('change', handleChange)
// Cleanup function to remove the event listener // Cleanup function to remove the event listener
return () => { return () => {
mediaQueryList.removeEventListener('change', handleChange); mediaQueryList.removeEventListener('change', handleChange)
}; }
}, [query]); }, [query])
return matches; return matches
} }

12
react-advanced-tag1/src/common/stores/counter-store.ts
View File

@@ -1,15 +1,15 @@
import { create } from "zustand"; import { create } from 'zustand'
interface CounterState { interface CounterState {
count: number; count: number
increment: () => void; increment: () => void
decrement: () => void; decrement: () => void
} }
const useCounterStore = create<CounterState>((set) => ({ const useCounterStore = create<CounterState>((set) => ({
count: 0, count: 0,
increment: () => set((state) => ({ count: state.count + 1 })), increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })), decrement: () => set((state) => ({ count: state.count - 1 })),
})); }))
export default useCounterStore; export default useCounterStore

34
react-advanced-tag1/src/common/utils/shuffle.test.ts
View File

@@ -1,22 +1,22 @@
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest'
import { shuffleArray, users } from './shuffle'; import { shuffleArray, users } from './shuffle'
describe('shuffleArray', () => { describe('shuffleArray', () => {
it('should shuffle the array and return a new order', () => { it('should shuffle the array and return a new order', () => {
const originalArray = [...users]; const originalArray = [...users]
const shuffledArray = shuffleArray([...users]); const shuffledArray = shuffleArray([...users])
expect(shuffledArray).not.toEqual(originalArray); // Ensure the order is different expect(shuffledArray).not.toEqual(originalArray) // Ensure the order is different
expect(shuffledArray.sort()).toEqual(originalArray.sort()); // Ensure all elements are still present expect(shuffledArray.sort()).toEqual(originalArray.sort()) // Ensure all elements are still present
}); })
it('should return an empty array when input is empty', () => { it('should return an empty array when input is empty', () => {
const result = shuffleArray([]); const result = shuffleArray([])
expect(result).toEqual([]); expect(result).toEqual([])
}); })
it('should handle arrays with one element', () => { it('should handle arrays with one element', () => {
const result = shuffleArray(['onlyElement']); const result = shuffleArray(['onlyElement'])
expect(result).toEqual(['onlyElement']); expect(result).toEqual(['onlyElement'])
}); })
}); })

17
react-advanced-tag1/src/common/utils/shuffle.ts
View File

@@ -1,11 +1,10 @@
export function shuffleArray(array: string[]){ export function shuffleArray(array: string[]) {
for(let i = array.length -1; i>0; i--){ for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const j = Math.floor(Math.random()* (i +1)); ;[array[i], array[j]] = [array[j], array[i]]
[array[i], array[j]] = [array[j], array[i]]; }
}
return [...array]
return [...array]
} }
export const users =['John', 'Peter', 'Stefanie', 'Marta', 'Klaus', 'Anna'] export const users = ['John', 'Peter', 'Stefanie', 'Marta', 'Klaus', 'Anna']

59
react-advanced-tag1/src/layouts/MainLayout.css
View File

@@ -1,56 +1,55 @@
#root { #root {
width: 100%; width: 100%;
} }
header { header {
background-color: #1a1a1a; background-color: #1a1a1a;
color: #ffffff; color: #ffffff;
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
} }
header nav { header nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
} }
header nav ul { header nav ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
header nav li { header nav li {
display: inline; display: inline;
} }
header nav a { header nav a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
transition: background-color 0.3s, color 0.3s; transition:
background-color 0.3s,
color 0.3s;
} }
header nav a:hover { header nav a:hover {
text-decoration: underline; text-decoration: underline;
} }
header nav a.active { header nav a.active {
text-decoration: underline; text-decoration: underline;
} }
footer { footer {
background-color: #1a1a1a; background-color: #1a1a1a;
color: #ffffff; color: #ffffff;
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
} }
.content { .content {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
} }

38
react-advanced-tag1/src/layouts/MainLayout.tsx
View File

@@ -1,31 +1,33 @@
import { useState } from "react"; import { useState } from 'react'
import './MainLayout.css' import './MainLayout.css'
import Footer from "../common/components/Footer"; import Footer from '../common/components/Footer'
import Header from "../common/components/Header"; import Header from '../common/components/Header'
export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement { export default function MainLayout({
children,
}: {
const [clicked, setClicked] = useState(false); children: React.ReactNode | React.ReactElement | React.ReactElement[]
}): React.ReactElement {
const [clicked, setClicked] = useState(false)
function handleClick() { function handleClick() {
setClicked(!clicked); setClicked(!clicked)
console.log("clicked", clicked); console.log('clicked', clicked)
} }
console.log("MainLayout rendered", clicked); console.log('MainLayout rendered', clicked)
return ( return (
<> <>
<Header /> <Header />
<div className="content"> <div className="content">
{children} {children}
<button onClick={handleClick}>Click</button> <button onClick={handleClick}>Click</button>
</div> </div>
<Footer /> <Footer />
</> </>
); )
} }

2
react-advanced-tag1/src/main.tsx
View File

@@ -9,5 +9,5 @@ createRoot(document.getElementById('root')!).render(
<BrowserRouter> <BrowserRouter>
<App /> <App />
</BrowserRouter> </BrowserRouter>
</StrictMode>, </StrictMode>
) )

18
react-advanced-tag1/src/pages/ComponentWrapperPage.tsx
View File

@@ -1,11 +1,11 @@
import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper"; import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
export default function ComponentWrapperPage() { export default function ComponentWrapperPage() {
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
<ComponentWrapper title='Komponenten Wrapper Test'> <ComponentWrapper title="Komponenten Wrapper Test">
<h1>Hallo</h1> <h1>Hallo</h1>
</ComponentWrapper> </ComponentWrapper>
</div> </div>
); )
} }

19
react-advanced-tag1/src/pages/EffectExercisesPage.tsx
View File

@@ -1,12 +1,11 @@
import EffectExercises from "../common/components/exercises/EffectExercises"; import EffectExercises from '../common/components/exercises/EffectExercises'
import Heading from "../common/components/globals/Heading"; import Heading from '../common/components/globals/Heading'
export default function EffectExercisesPage() { export default function EffectExercisesPage() {
return ( return (
<div> <div>
<Heading title="Effekte" /> <Heading title="Effekte" />
<EffectExercises /> <EffectExercises />
</div> </div>
); )
} }

18
react-advanced-tag1/src/pages/FormsPage.tsx
View File

@@ -1,11 +1,11 @@
import RefExercise from "../common/components/exercises/RefExercise"; import RefExercise from '../common/components/exercises/RefExercise'
import Heading from "../common/components/globals/Heading"; import Heading from '../common/components/globals/Heading'
export default function FormsPage() { export default function FormsPage() {
return ( return (
<div> <div>
<Heading title="Formulare" /> <Heading title="Formulare" />
<RefExercise /> <RefExercise />
</div> </div>
); )
} }

7
react-advanced-tag1/src/pages/HocPage.tsx
View File

@@ -1,6 +1,5 @@
import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper"; import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
import DogImagesWithLoader from "../common/components/exercises/HocExercise/DogImages"; import DogImagesWithLoader from '../common/components/exercises/HocExercise/DogImages'
export function HocPage() { export function HocPage() {
return ( return (
@@ -8,4 +7,4 @@ export function HocPage() {
<DogImagesWithLoader /> <DogImagesWithLoader />
</ComponentWrapper> </ComponentWrapper>
) )
} }

16
react-advanced-tag1/src/pages/HomePage.tsx
View File

@@ -1,10 +1,10 @@
import Heading from "../common/components/globals/Heading"; import Heading from '../common/components/globals/Heading'
export default function HomePage() { export default function HomePage() {
return ( return (
<> <>
<Heading title="Willkommen" /> <Heading title="Willkommen" />
<p>Willkommen auf der Startseite!</p> <p>Willkommen auf der Startseite!</p>
</> </>
); )
} }

18
react-advanced-tag1/src/pages/MemoCallbackPage.tsx
View File

@@ -1,11 +1,11 @@
import MemoCallback from "../common/components/exercises/MemoCallback"; import MemoCallback from '../common/components/exercises/MemoCallback'
import Heading from "../common/components/globals/Heading"; import Heading from '../common/components/globals/Heading'
export default function MemoCallbackPage() { export default function MemoCallbackPage() {
return ( return (
<> <>
<Heading title="Memo und Callback" /> <Heading title="Memo und Callback" />
<MemoCallback /> <MemoCallback />
</> </>
) )
} }

28
react-advanced-tag1/src/pages/ModalPage.tsx
View File

@@ -1,14 +1,18 @@
import { useState } from "react"; import { useState } from 'react'
import { createPortal } from "react-dom"; import { createPortal } from 'react-dom'
import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper"; import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
import Modal from "../common/components/Modal"; import Modal from '../common/components/Modal'
export default function ModalPage() { export default function ModalPage() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false)
return ( return (
<ComponentWrapper title='Modal Test'> <ComponentWrapper title="Modal Test">
<button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button> <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
{modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)} {modalOpen &&
</ComponentWrapper> createPortal(
); <Modal onClose={() => setModalOpen(false)} />,
} document.getElementById('modal') as HTMLElement
)}
</ComponentWrapper>
)
}

22
react-advanced-tag1/src/pages/UsersPage.tsx
View File

@@ -1,13 +1,13 @@
import UserEffect from "../common/components/exercises/UserEffect"; import UserEffect from '../common/components/exercises/UserEffect'
import { UserOverview } from "../common/components/exercises/UserOverview"; import { UserOverview } from '../common/components/exercises/UserOverview'
import Heading from "../common/components/globals/Heading"; import Heading from '../common/components/globals/Heading'
export default function UsersPage() { export default function UsersPage() {
return ( return (
<div> <div>
<Heading title="Benutzer" /> <Heading title="Benutzer" />
<UserEffect /> <UserEffect />
<UserOverview /> <UserOverview />
</div> </div>
); )
} }

24
react-advanced-tag1/src/pages/ZustandCounterPage.tsx
View File

@@ -1,18 +1,18 @@
import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper"; import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
import useCounterStore from "../common/stores/counter-store"; import useCounterStore from '../common/stores/counter-store'
export default function ZustandCounterPage() { export default function ZustandCounterPage() {
const {decrement, increment} = useCounterStore(); const { decrement, increment } = useCounterStore()
return ( return (
<ComponentWrapper title='Zustand Counter'> <ComponentWrapper title="Zustand Counter">
<button onClick={increment}>Increment</button> <button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button> <button onClick={decrement}>Decrement</button>
<CounterValue /> <CounterValue />
</ComponentWrapper> </ComponentWrapper>
); )
} }
function CounterValue() { function CounterValue() {
const count = useCounterStore((state) => state.count); const count = useCounterStore((state) => state.count)
return <p>Count: {count}</p>; return <p>Count: {count}</p>
} }