<h2>S: Single Responsibility - One Pokémon, One Job</h2>
Problem: <code>PokemonComponent</code> handles catching, battling, and displaying scores, violating SRP.
<pre><code class="language-jsx">function PokemonComponent({ pokemon, onCatch, onBattle, score }) {
 return (
 &lt;div&gt;
 &lt;h2&gt;{pokemon.name}&lt;/h2&gt;
 &lt;button onClick={() =&gt; onCatch(pokemon)}&gt;Catch&lt;/button&gt;
 &lt;button onClick={() =&gt; onBattle(pokemon)}&gt;Battle&lt;/button&gt;
 &lt;div&gt;Score: {score}&lt;/div&gt;
 &lt;/div&gt;
 );
}
</code></pre>
Solution: Split responsibilities.
<pre><code class="language-jsx">function PokemonCatcher({ pokemon, onCatch }) {
 return &lt;button onClick={() =&gt; onCatch(pokemon)}&gt;Catch&lt;/button&gt;;
}
function PokemonBattler({ pokemon, onBattle }) {
 return &lt;button onClick={() =&gt; onBattle(pokemon)}&gt;Battle&lt;/button&gt;;
}
function ScoreBoard({ score }) {
 return &lt;div&gt;Score: {score}&lt;/div&gt;;
}
function PokemonGame({ pokemon, onCatch, onBattle, score }) {
 return (
 &lt;div&gt;
 &lt;h2&gt;{pokemon.name}&lt;/h2&gt;
 &lt;PokemonCatcher pokemon={pokemon} onCatch={onCatch} /&gt;
 &lt;PokemonBattler pokemon={pokemon} onBattle={onBattle} /&gt;
 &lt;ScoreBoard score={score} /&gt;
 &lt;/div&gt;
 );
}
</code></pre>
<h2>O: Open/Closed - Evolving Pokémon Components</h2>
Problem: Adding features like power-ups requires modifying existing components.
Solution: Use a Higher-Order Component (HOC).
<pre><code class="language-javascript">function withPowerUp(PokemonComponent) {
 return function PoweredUpComponent(props) {
 const [isPoweredUp, setPowerUp] = useState(false);
 const powerUp = () =&gt; {
 setPowerUp(true);
 setTimeout(() =&gt; setPowerUp(false), 5000);
 };
 return (
 &lt;div&gt;
 &lt;PokemonComponent {...props} isPoweredUp={isPoweredUp} /&gt;
 &lt;button onClick={powerUp}&gt;Power Up!&lt;/button&gt;
 &lt;/div&gt;
 );
 };
}

const Charmander = ({ isPoweredUp }) =&gt; (
 &lt;div&gt;Charmander {isPoweredUp &amp;&amp; &quot;(Powered Up!)&quot;}&lt;/div&gt;
);

const PoweredCharmander = withPowerUp(Charmander);

function PokemonApp() {
 return &lt;PoweredCharmander /&gt;;
}
</code></pre>
<h2>L: Liskov Substitution - The Interchangeable Pokémon</h2>
Problem: Swapping components causes issues.
Solution: Use a base component.
<pre><code class="language-javascript">function BasePokemon({ attack, children }) {
 return (
 &lt;div className=&quot;pokemon&quot;&gt;
 &lt;div&gt;Attack: {attack}&lt;/div&gt;
 {children}
 &lt;/div&gt;
 );
}
function Pikachu({ attack }) {
 return (
 &lt;BasePokemon attack={attack}&gt;
 &lt;h2&gt;Pikachu&lt;/h2&gt;
 &lt;/BasePokemon&gt;
 );
}
function Charizard({ attack }) {
 return (
 &lt;BasePokemon attack={attack}&gt;
 &lt;h2&gt;Charizard&lt;/h2&gt;
 &lt;/BasePokemon&gt;
 );
}
function PokemonBattle() {
 return (
 &lt;div&gt;
 &lt;BasePokemon attack=&quot;Tackle&quot;&gt;
 &lt;h2&gt;Generic Pokémon&lt;/h2&gt;
 &lt;/BasePokemon&gt;
 &lt;Pikachu attack=&quot;Thunderbolt&quot; /&gt;
 &lt;Charizard attack=&quot;Flamethrower&quot; /&gt;
 &lt;/div&gt;
 );
}
</code></pre>
<h2>D: Dependency Inversion - Depend on Abstractions</h2>
Problem: Components tightly coupled with data sources.
Solution: Use context for data injection.
<pre><code class="language-jsx">const PokemonContext = createContext();
function Pikachu() {
 const { attack } = useContext(PokemonContext);
}
&lt;PokemonContext.Provider value={{ attack: &quot;Thunderbolt&quot; }}&gt;
 &lt;Pikachu /&gt;
&lt;/PokemonContext.Provider&gt;
</code></pre>
<h2>Cheatsheet: SOLID Principles</h2>
<table>
<thead>
<tr>
<th>Principle</th>
<th>Poké-Mantra</th>
<th>Trainer’s Tip</th>
</tr>
</thead>
<tbody>
<tr>
<td>Single Responsibility</td>
<td>One Pokémon, one role.</td>
<td>Split complex components into focused ones.</td>
</tr>
<tr>
<td>Open/Closed</td>
<td>Evolve without changing.</td>
<td>Use HOCs, render props for new features.</td>
</tr>
<tr>
<td>Liskov Substitution</td>
<td>Components like Pokémon moves - interchangeable.</td>
<td>Ensure components can be used interchangeably.</td>
</tr>
<tr>
<td>Dependency Inversion</td>
<td>Depend on abstractions, not concretes.</td>
<td>Use context or props for data management.</td>
</tr>
</tbody>
</table>

Welcome to Web Accidents, where every coding blunder becomes a breakthrough! From those ‘why is this not working?’ moments to accidental wins, we’re here to turn every misstep into a lesson learned. Let’s embrace the chaos of web development and grow

Web Accidents

This post explores how to build a Pokémon game in React by applying SOLID principles. It provides examples of breaking down components for Single Responsibility, using Higher-Order Components for Open/Closed, a base component for Liskov Substitution, and context for Dependency Inversion. The post includes a cheatsheet summarizing each SOLID principle with practical tips.

Building a SOLID Pokémon Game in React: A Developer’s Adventure!

I was exited to see a full functional game 😅

Thanks you for putting the code in here. instead of me having to click and scroll down to see the good stuff. 👍🏾 I’m joining the squad.

Love it ! I’m saving it for later