mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 12:57:44 +00:00
docs: add basic element references
This commit is contained in:
Corbin Crutchley
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React addEventListener - Example #62b - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@ffg-fundamentals/react-add-event-listener-62",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const RenderButton = () => {
|
||||
// el is HTMLElement
|
||||
const addClickListener = (el) => {
|
||||
el.addEventListener("click", () => {
|
||||
alert("User has clicked!");
|
||||
});
|
||||
};
|
||||
|
||||
return <button ref={addClickListener}>Click me!</button>;
|
||||
};
|
||||
|
||||
createRoot(document.getElementById("root")).render(<RenderButton />);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React Ref Property - Example #62a - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/package-lock.json
generated
Normal file
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@ffg-fundamentals/react-ref-property-62",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const RenderParagraph = () => {
|
||||
// el is HTMLElement
|
||||
return <p ref={(el) => console.log({ el: el })}>Check your console</p>;
|
||||
};
|
||||
|
||||
createRoot(document.getElementById("root")).render(<RenderParagraph />);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React useState Ref Broken - Example #62e - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/package-lock.json
generated
Normal file
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@ffg-fundamentals/react-use-ref-broken-62",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
|
||||
// This code intentionally doesn't work to demonstrate how `useRef`
|
||||
// might not work with `useEffect` as you might think
|
||||
const CountButton = () => {
|
||||
const [count, setCount] = useState(0);
|
||||
const buttonRef = useRef();
|
||||
|
||||
const [showButton, setShowButton] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setShowButton(true);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const clickFn = () => {
|
||||
setCount((v) => v + 1);
|
||||
};
|
||||
|
||||
if (!buttonRef.current) return;
|
||||
buttonRef.current.addEventListener("click", clickFn);
|
||||
|
||||
return () => {
|
||||
buttonRef.current.removeEventListener("click", clickFn);
|
||||
};
|
||||
}, [buttonRef.current]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showButton && <button ref={buttonRef}>Add one</button>}
|
||||
<p>Count is {count}</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
createRoot(document.getElementById("root")).render(<CountButton />);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React useState Ref Fragile - Example #62d - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/package-lock.json
generated
Normal file
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@ffg-fundamentals/react-use-state-ref-fragile-62",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
|
||||
const CountButton = () => {
|
||||
const [count, setCount] = useState(0);
|
||||
const buttonRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const clickFn = () => {
|
||||
setCount((v) => v + 1);
|
||||
};
|
||||
|
||||
buttonRef.current.addEventListener("click", clickFn);
|
||||
|
||||
return () => {
|
||||
buttonRef.current.removeEventListener("click", clickFn);
|
||||
};
|
||||
// Do not use a useRef inside of a useEffect like this, it will likely cause bugs
|
||||
}, [buttonRef.current]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button ref={buttonRef}>Add one</button>
|
||||
<p>Count is {count}</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
createRoot(document.getElementById("root")).render(<CountButton />);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React useState Ref - Example #62c - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/package-lock.json
generated
Normal file
2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@ffg-fundamentals/react-use-state-ref-62",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const CountButton = () => {
|
||||
const [count, setCount] = useState(0);
|
||||
const [buttonEl, setButtonEl] = useState();
|
||||
|
||||
const storeButton = (el) => {
|
||||
setButtonEl(el);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initial render will not have `buttonEl` defined, subsequent renders will
|
||||
if (!buttonEl) return;
|
||||
const clickFn = () => {
|
||||
/**
|
||||
* We need to use `v => v + 1` instead of `count + 1`, otherwise `count` will
|
||||
* be stale and not update further than `1`. More details in the next paragraph.
|
||||
*/
|
||||
setCount((v) => v + 1);
|
||||
};
|
||||
|
||||
buttonEl.addEventListener("click", clickFn);
|
||||
|
||||
return () => {
|
||||
buttonEl.removeEventListener("click", clickFn);
|
||||
};
|
||||
}, [buttonEl]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button ref={storeButton}>Add one</button>
|
||||
<p>Count is {count}</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
createRoot(document.getElementById("root")).render(<CountButton />);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
Reference in New Issue
Block a user