Skip to content

Commit 8b580eb

Browse files
fezcodefezcode
committed
refactor: vocab
1 parent ebbe31e commit 8b580eb

File tree

6 files changed

+145
-126
lines changed

6 files changed

+145
-126
lines changed

‎src/data/vocab/anti-pattern.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
export default {
4+
title: 'Anti-Pattern',
5+
content: (
6+
<div className="space-y-4">
7+
<p>
8+
An <strong>Anti-Pattern</strong> is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive.
9+
</p>
10+
<p>
11+
It's a solution that looks good on the surface but has bad consequences in the long run.
12+
</p>
13+
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
14+
<h4 className="text-sm font-bold text-red-400 mb-2">Common React Anti-Patterns:</h4>
15+
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-400">
16+
<li>Prop Drilling (passing props down 5+ levels)</li>
17+
<li>Defining components inside other components</li>
18+
<li>Using indexes as keys in lists (when items can change order)</li>
19+
<li>Mutating state directly</li>
20+
</ul>
21+
</div>
22+
</div>
23+
),
24+
};

‎src/data/vocab/context-api.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
export default {
4+
title: 'Context API',
5+
content: (
6+
<div className="space-y-4">
7+
<p>
8+
The <strong>Context API</strong> is a React feature that enables you to share values (like global settings, user auth, or themes) between components without having to explicitly pass a prop through every level of the tree.
9+
</p>
10+
</div>
11+
)
12+
};

‎src/data/vocab/pluribus.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
export default {
4+
title: 'Pluribus',
5+
content: (
6+
<div className="space-y-4">
7+
<p>
8+
<strong>Pluribus</strong> is Latin for "from many" or "more". It is most famously known as part of the United States motto <em>E pluribus unum</em> ("Out of many, one").
9+
</p>
10+
<p>
11+
Thematically, it represents the concept of <strong>unity from diversity</strong>.
12+
</p>
13+
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700 text-sm text-gray-300">
14+
<p>
15+
In the context of sci-fi or hive-mind narratives, "Pluribus" often ironically contrasts the loss of individual identity against the strength of the collective.
16+
</p>
17+
</div>
18+
</div>
19+
),
20+
};

‎src/data/vocab/prop-drilling.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
3+
export default {
4+
title: 'Prop Drilling',
5+
content: (
6+
<div className="space-y-4">
7+
<p>
8+
<strong>Prop Drilling</strong> (also known as "threading") refers to the process of passing data from a parent component down to a deeply nested child component through intermediate components that do not need the data themselves.
9+
</p>
10+
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700 font-mono text-xs">
11+
<div className="text-blue-400">{'<App data={data} />'}</div>
12+
<div className="pl-4 text-gray-500">{'↓'}</div>
13+
<div className="pl-4 text-purple-400">{'<Layout data={data} />'}</div>
14+
<div className="pl-8 text-gray-500">{'↓'}</div>
15+
<div className="pl-8 text-green-400">{'<Page data={data} />'}</div>
16+
<div className="pl-12 text-gray-500">{'↓'}</div>
17+
<div className="pl-12 text-red-400">{'<DeepComponent data={data} />'}</div>
18+
</div>
19+
<p>
20+
While simple, it becomes problematic as the application grows, leading to:
21+
</p>
22+
<ul className="list-disc pl-5 space-y-1 text-gray-400">
23+
<li>Code verbosity</li>
24+
<li>Tight coupling between components</li>
25+
<li>Difficulty in refactoring</li>
26+
<li>Unnecessary re-renders</li>
27+
</ul>
28+
<p>
29+
<strong>Solution:</strong> Use the <em>Context API</em>, <em>Redux</em>, or similar state management libraries to make data accessible to any component in the tree without manual passing.
30+
</p>
31+
</div>
32+
),
33+
};

‎src/data/vocab/side-effects.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
3+
export default {
4+
title: 'Side Effects',
5+
content: (
6+
<div className="space-y-6">
7+
<div>
8+
<h4 className="flex items-center gap-2 text-sm font-bold text-purple-400 mb-2">
9+
<span className="text-lg">💊</span> Medicine
10+
</h4>
11+
<p className="text-gray-300 text-sm">
12+
An unintended secondary effect of a medication or treatment. While often negative (e.g., drowsiness, nausea), they can sometimes be beneficial or neutral. In the context of the show, this likely refers to the unexpected consequences of the "miracle cure."
13+
</p>
14+
</div>
15+
16+
<div className="border-t border-gray-700 pt-4">
17+
<h4 className="flex items-center gap-2 text-sm font-bold text-blue-400 mb-2">
18+
<span className="text-lg">💻</span> Computer Science
19+
</h4>
20+
<p className="text-gray-300 text-sm mb-2">
21+
A function or expression is said to have a <strong>side effect</strong> if it modifies some state outside its local environment or has an observable interaction with the outside world.
22+
</p>
23+
<div className="bg-black/50 p-3 rounded border border-gray-800 my-3 font-mono text-xs overflow-x-auto">
24+
<div className="text-gray-500">// Impure (Side Effect)</div>
25+
<span className="text-purple-300">let</span> <span className="text-blue-300">count</span> = <span className="text-orange-300">0</span>;
26+
<br />
27+
<span className="text-purple-300">function</span> <span className="text-yellow-300">increment</span>() {'{'}
28+
<br />
29+
&nbsp;&nbsp;<span className="text-blue-300">count</span>++; <span className="text-gray-500">// Modifies external state!</span>
30+
<br />
31+
{'}'}
32+
</div>
33+
<ul className="list-disc pl-5 space-y-1 text-gray-400 text-xs font-mono">
34+
<li>Modifying a global variable</li>
35+
<li>Writing to a file or database</li>
36+
<li><code>console.log()</code></li>
37+
<li>DOM manipulation</li>
38+
</ul>
39+
<p className="text-gray-500 text-xs mt-3 italic">
40+
In <strong>Functional Programming</strong>, side effects are avoided to ensure functions are "pure" (deterministic).
41+
</p>
42+
</div>
43+
</div>
44+
),
45+
};

‎src/data/vocabulary.js‎

Lines changed: 11 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,13 @@
1-
import React from 'react';
1+
import propDrilling from './vocab/prop-drilling';
2+
import contextApi from './vocab/context-api';
3+
import antiPattern from './vocab/anti-pattern';
4+
import pluribus from './vocab/pluribus';
5+
import sideEffects from './vocab/side-effects';
26

37
export const vocabulary = {
4-
'prop-drilling': {
5-
title: 'Prop Drilling',
6-
content: (
7-
<div className="space-y-4">
8-
<p>
9-
<strong>Prop Drilling</strong> (also known as "threading") refers to the process of passing data from a parent component down to a deeply nested child component through intermediate components that do not need the data themselves.
10-
</p>
11-
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700 font-mono text-xs">
12-
<div className="text-blue-400">{'<App data={data} />'}</div>
13-
<div className="pl-4 text-gray-500">{'↓'}</div>
14-
<div className="pl-4 text-purple-400">{'<Layout data={data} />'}</div>
15-
<div className="pl-8 text-gray-500">{'↓'}</div>
16-
<div className="pl-8 text-green-400">{'<Page data={data} />'}</div>
17-
<div className="pl-12 text-gray-500">{'↓'}</div>
18-
<div className="pl-12 text-red-400">{'<DeepComponent data={data} />'}</div>
19-
</div>
20-
<p>
21-
While simple, it becomes problematic as the application grows, leading to:
22-
</p>
23-
<ul className="list-disc pl-5 space-y-1 text-gray-400">
24-
<li>Code verbosity</li>
25-
<li>Tight coupling between components</li>
26-
<li>Difficulty in refactoring</li>
27-
<li>Unnecessary re-renders</li>
28-
</ul>
29-
<p>
30-
<strong>Solution:</strong> Use the <em>Context API</em>, <em>Redux</em>, or similar state management libraries to make data accessible to any component in the tree without manual passing.
31-
</p>
32-
</div>
33-
),
34-
},
35-
'context-api': {
36-
title: 'Context API',
37-
content: (
38-
<div className="space-y-4">
39-
<p>
40-
The <strong>Context API</strong> is a React feature that enables you to share values (like global settings, user auth, or themes) between components without having to explicitly pass a prop through every level of the tree.
41-
</p>
42-
</div>
43-
)
44-
},
45-
'anti-pattern': {
46-
title: 'Anti-Pattern',
47-
content: (
48-
<div className="space-y-4">
49-
<p>
50-
An <strong>Anti-Pattern</strong> is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive.
51-
</p>
52-
<p>
53-
It's a solution that looks good on the surface but has bad consequences in the long run.
54-
</p>
55-
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
56-
<h4 className="text-sm font-bold text-red-400 mb-2">Common React Anti-Patterns:</h4>
57-
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-400">
58-
<li>Prop Drilling (passing props down 5+ levels)</li>
59-
<li>Defining components inside other components</li>
60-
<li>Using indexes as keys in lists (when items can change order)</li>
61-
<li>Mutating state directly</li>
62-
</ul>
63-
</div>
64-
</div>
65-
),
66-
},
67-
'pluribus': {
68-
title: 'Pluribus',
69-
content: (
70-
<div className="space-y-4">
71-
<p>
72-
<strong>Pluribus</strong> is Latin for "from many" or "more". It is most famously known as part of the United States motto <em>E pluribus unum</em> ("Out of many, one").
73-
</p>
74-
<p>
75-
Thematically, it represents the concept of <strong>unity from diversity</strong>.
76-
</p>
77-
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700 text-sm text-gray-300">
78-
<p>
79-
In the context of sci-fi or hive-mind narratives, "Pluribus" often ironically contrasts the loss of individual identity against the strength of the collective.
80-
</p>
81-
</div>
82-
</div>
83-
),
84-
},
85-
'side-effects': {
86-
title: 'Side Effects',
87-
content: (
88-
<div className="space-y-6">
89-
<div>
90-
<h4 className="flex items-center gap-2 text-sm font-bold text-purple-400 mb-2">
91-
<span className="text-lg">💊</span> Medicine
92-
</h4>
93-
<p className="text-gray-300 text-sm">
94-
An unintended secondary effect of a medication or treatment. While often negative (e.g., drowsiness, nausea), they can sometimes be beneficial or neutral. In the context of the show, this likely refers to the unexpected consequences of the "miracle cure."
95-
</p>
96-
</div>
97-
98-
<div className="border-t border-gray-700 pt-4">
99-
<h4 className="flex items-center gap-2 text-sm font-bold text-blue-400 mb-2">
100-
<span className="text-lg">💻</span> Computer Science
101-
</h4>
102-
<p className="text-gray-300 text-sm mb-2">
103-
A function or expression is said to have a <strong>side effect</strong> if it modifies some state outside its local environment or has an observable interaction with the outside world.
104-
</p>
105-
<div className="bg-black/50 p-3 rounded border border-gray-800 my-3 font-mono text-xs overflow-x-auto">
106-
<div className="text-gray-500">// Impure (Side Effect)</div>
107-
<span className="text-purple-300">let</span> <span className="text-blue-300">count</span> = <span className="text-orange-300">0</span>;
108-
<br />
109-
<span className="text-purple-300">function</span> <span className="text-yellow-300">increment</span>() {'{'}
110-
<br />
111-
&nbsp;&nbsp;<span className="text-blue-300">count</span>++; <span className="text-gray-500">// Modifies external state!</span>
112-
<br />
113-
{'}'}
114-
</div>
115-
<ul className="list-disc pl-5 space-y-1 text-gray-400 text-xs font-mono">
116-
<li>Modifying a global variable</li>
117-
<li>Writing to a file or database</li>
118-
<li><code>console.log()</code></li>
119-
<li>DOM manipulation</li>
120-
</ul>
121-
<p className="text-gray-500 text-xs mt-3 italic">
122-
In <strong>Functional Programming</strong>, side effects are avoided to ensure functions are "pure" (deterministic).
123-
</p>
124-
</div>
125-
</div>
126-
),
127-
},
128-
};
8+
'prop-drilling': propDrilling,
9+
'context-api': contextApi,
10+
'anti-pattern': antiPattern,
11+
'pluribus': pluribus,
12+
'side-effects': sideEffects,
13+
};

0 commit comments

Comments
 (0)