LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 21:07:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add basic element references

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-07 18:41:03 -08:00
parent 99811332dd
commit 2f3c442be6
30 changed files with 10700 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/.gitignore vendored Normal file
View File

@@ -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?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/index.html Normal file
View File

@@ -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>

2056
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/package.json Normal file
View File

@@ -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"
}
}

14
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/src/main.jsx Normal file
View File

@@ -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 />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-add-event-listener-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/.gitignore vendored Normal file
View File

@@ -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?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/index.html Normal file
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/package.json Normal file
View File

@@ -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"
}
}

8
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/src/main.jsx Normal file
View File

@@ -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 />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-ref-property-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/.gitignore vendored Normal file
View File

@@ -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?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/index.html Normal file
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/package.json Normal file
View File

@@ -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"
}
}

41
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/src/main.jsx Normal file
View File

@@ -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 />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-broken-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/.gitignore vendored Normal file
View File

@@ -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?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/index.html Normal file
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/package.json Normal file
View File

@@ -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"
}
}

29
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/src/main.jsx Normal file
View File

@@ -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 />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-ref-fragile-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/.gitignore vendored Normal file
View File

@@ -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?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/index.html Normal file
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/package.json Normal file
View File

@@ -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"
}
}

38
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/src/main.jsx Normal file
View File

@@ -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 />);

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-react-use-state-ref-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});