React 50 Example
<div><p>Certainly, here are some examples related to React and Redux:</p> <ol> <li> <strong>React Example:</strong> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="nf">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="nf">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Count: <span class="si">{</span><span class="nx">count</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">increment</span><span class="si">}</span><span class="p">></span>Increment<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">decrement</span><span class="si">}</span><span class="p">></span>Decrement<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">Counter</span><span class="p">;</span> </code></pre> </div> <ol> <li> <p><strong>Redux Example:</strong></p> <ul> <li>Actions: </li> </ul> <pre class="highlight javascript"><code> <span class="c1">// action types</span> <span class="kd">const</span> <span class="nx">INCREMENT</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">INCREMENT</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">DECREMENT</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">DECREMENT</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// action creators</span> <span class="kd">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">({</span> <span class="na">type</span><span class="p">:</span> <span class="nx">INCREMENT</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">({</span> <span class="na">type</span><span class="p">:</span> <span class="nx">DECREMENT</span> <span class="p">});</span> </code></pre> </li> </ol> <ul> <li> <p>Reducer:<br> </p> <pre class="highlight javascript"><code> <span class="kd">const</span> <span class="nx">counterReducer</span> <span class="o">=</span> <span class="p">(</span><span class="nx">state</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">action</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">switch </span><span class="p">(</span><span class="nx">action</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span> <span class="k">case</span> <span class="na">INCREMENT</span><span class="p">:</span> <span class="k">return</span> <span class="nx">state</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="k">case</span> <span class="na">DECREMENT</span><span class="p">:</span> <span class="k">return</span> <span class="nx">state</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nl">default</span><span class="p">:</span> <span class="k">return</span> <span class="nx">state</span><span class="p">;</span> <span class="p">}</span> <span class="p">};</span> </code></pre> </li> <li> <p>Store:<br> </p> <pre class="highlight javascript"><code> <span class="k">import</span> <span class="p">{</span> <span class="nx">createStore</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">redux</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nf">createStore</span><span class="p">(</span><span class="nx">counterReducer</span><span class="p">);</span> </code></pre> </li> <li> <p>Connecting React Component:<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useSelector</span><span class="p">,</span> <span class="nx">useDispatch</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-redux</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">increment</span><span class="p">,</span> <span class="nx">decrement</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./actions</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nf">useSelector</span><span class="p">((</span><span class="nx">state</span><span class="p">)</span> <span class="o">=></span> <span class="nx">state</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">dispatch</span> <span class="o">=</span> <span class="nf">useDispatch</span><span class="p">();</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Count: <span class="si">{</span><span class="nx">count</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nf">dispatch</span><span class="p">(</span><span class="nf">increment</span><span class="p">())</span><span class="si">}</span><span class="p">></span>Increment<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nf">dispatch</span><span class="p">(</span><span class="nf">decrement</span><span class="p">())</span><span class="si">}</span><span class="p">></span>Decrement<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">Counter</span><span class="p">;</span> </code></pre> </li> </ul> <p>These examples cover a basic React component and a simple Redux setup with actions, a reducer, and a connected React component.</p> <p>Certainly, let's delve into more topics with additional example code:</p> <ol> <li> <p><strong>React Router Example:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>react-router-dom </code></pre> </li> </ol> <ul> <li> <p>Usage:<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserRouter</span> <span class="k">as</span> <span class="nx">Router</span><span class="p">,</span> <span class="nx">Route</span><span class="p">,</span> <span class="nx">Link</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-router-dom</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">Home</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>Home<span class="p"></</span><span class="nt">h2</span><span class="p">>;</span> <span class="kd">const</span> <span class="nx">About</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>About<span class="p"></</span><span class="nt">h2</span><span class="p">>;</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nc">Router</span><span class="p">></span> <span class="p"><</span><span class="nt">nav</span><span class="p">></span> <span class="p"><</span><span class="nc">Link</span> <span class="na">to</span><span class="p">=</span><span class="s">"/"</span><span class="p">></span>Home<span class="p"></</span><span class="nc">Link</span><span class="p">></span> <span class="p"><</span><span class="nc">Link</span> <span class="na">to</span><span class="p">=</span><span class="s">"/about"</span><span class="p">></span>About<span class="p"></</span><span class="nc">Link</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span> <span class="p"><</span><span class="nc">Route</span> <span class="na">path</span><span class="p">=</span><span class="s">"/"</span> <span class="na">exact</span> <span class="na">component</span><span class="p">=</span><span class="si">{</span><span class="nx">Home</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nc">Route</span> <span class="na">path</span><span class="p">=</span><span class="s">"/about"</span> <span class="na">component</span><span class="p">=</span><span class="si">{</span><span class="nx">About</span><span class="si">}</span> <span class="p">/></span> <span class="p"></</span><span class="nc">Router</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Redux Thunk Example:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>redux-thunk </code></pre> </li> </ol> <ul> <li> <p>Usage (Action with Thunk):<br> </p> <pre class="highlight javascript"><code> <span class="c1">// Action Creator using Thunk</span> <span class="kd">const</span> <span class="nx">fetchData</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return </span><span class="p">(</span><span class="nx">dispatch</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">dispatch</span><span class="p">({</span> <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">FETCH_DATA_REQUEST</span><span class="dl">'</span> <span class="p">});</span> <span class="c1">// Perform asynchronous operation (e.g., API call)</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.example.com/data</span><span class="dl">'</span><span class="p">)</span> <span class="p">.</span><span class="nf">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="o">=></span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">())</span> <span class="p">.</span><span class="nf">then</span><span class="p">((</span><span class="nx">data</span><span class="p">)</span> <span class="o">=></span> <span class="nf">dispatch</span><span class="p">({</span> <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">FETCH_DATA_SUCCESS</span><span class="dl">'</span><span class="p">,</span> <span class="na">payload</span><span class="p">:</span> <span class="nx">data</span> <span class="p">}))</span> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="o">=></span> <span class="nf">dispatch</span><span class="p">({</span> <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">FETCH_DATA_FAILURE</span><span class="dl">'</span><span class="p">,</span> <span class="na">payload</span><span class="p">:</span> <span class="nx">error</span> <span class="p">}));</span> <span class="p">};</span> <span class="p">};</span> </code></pre> </li> </ul> <ol> <li> <p><strong>CSS Modules Example:</strong></p> <ul> <li>Styles in <code>styles.module.css</code>: </li> </ul> <pre class="highlight css"><code> <span class="nc">.button</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#3498db</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> </code></pre> </li> </ol> <ul> <li> <p>React Component using CSS Modules:<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">styles</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./styles.module.css</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">Button</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">button</span> <span class="na">className</span><span class="p">=</span><span class="si">{</span><span class="nx">styles</span><span class="p">.</span><span class="nx">button</span><span class="si">}</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Button clicked</span><span class="dl">'</span><span class="p">)</span><span class="si">}</span><span class="p">></span> Click me <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">Button</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Server-Side Rendering (SSR) Example:</strong></p> <ul> <li>Server-side entry point: </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">express</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">express</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">renderToString</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-dom/server</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">App</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./App</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">server</span> <span class="o">=</span> <span class="nf">express</span><span class="p">();</span> <span class="nx">server</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">appString</span> <span class="o">=</span> <span class="nf">renderToString</span><span class="p">(<</span><span class="nc">App</span> <span class="p">/>);</span> <span class="nx">res</span><span class="p">.</span><span class="nf">send</span><span class="p">(</span><span class="s2">` <!DOCTYPE html> <html> <head> <title>React SSR Example</title> </head> <body> <div id="app"></span><span class="p">${</span><span class="nx">appString</span><span class="p">}</span><span class="s2"></div> <script src="/bundle.js"></script> </body> </html> `</span><span class="p">);</span> <span class="p">});</span> <span class="nx">server</span><span class="p">.</span><span class="nf">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Server is listening on port 3000</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre> </li> </ol> <ul> <li> <p>Client-side entry point (bundle.js):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">ReactDOM</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-dom</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">App</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./App</span><span class="dl">'</span><span class="p">;</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nf">hydrate</span><span class="p">(<</span><span class="nc">App</span> <span class="p">/>,</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">app</span><span class="dl">'</span><span class="p">));</span> </code></pre> </li> </ul> <p>These examples cover React Router, Redux Thunk, CSS Modules, and Server-Side Rendering, showcasing various aspects of React and Redux ecosystem.</p> <p>Certainly, let's explore additional topics with corresponding example code:</p> <ol> <li> <p><strong>GraphQL Example with Apollo Client:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install</span> @apollo/client graphql </code></pre> </li> </ol> <ul> <li> <p>Usage (Fetching data with GraphQL):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useQuery</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@apollo/client</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">gql</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">graphql-tag</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">GET_USERS</span> <span class="o">=</span> <span class="nx">gql</span><span class="s2">` query { users { id name } } `</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">UserList</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">loading</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nf">useQuery</span><span class="p">(</span><span class="nx">GET_USERS</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">loading</span><span class="p">)</span> <span class="k">return</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Loading...<span class="p"></</span><span class="nt">p</span><span class="p">>;</span> <span class="k">if </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="k">return</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Error: <span class="si">{</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">>;</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">ul</span><span class="p">></span> <span class="si">{</span><span class="nx">data</span><span class="p">.</span><span class="nx">users</span><span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="si">}</span><span class="p">></span><span class="si">{</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p">))</span><span class="si">}</span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">UserList</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>WebSocket Example with Socket.io:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>socket.io-client </code></pre> </li> </ol> <ul> <li> <p>Usage (Connecting to a WebSocket server):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">io</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">socket.io-client</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">ChatApp</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nf">io</span><span class="p">(</span><span class="dl">'</span><span class="s1">http://localhost:3001</span><span class="dl">'</span><span class="p">);</span> <span class="nx">socket</span><span class="p">.</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Received message:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> <span class="p">});</span> <span class="c1">// Clean up the socket connection on component unmount</span> <span class="k">return </span><span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">socket</span><span class="p">.</span><span class="nf">disconnect</span><span class="p">();</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[]);</span> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span>WebSocket Chat App<span class="p"></</span><span class="nt">div</span><span class="p">>;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">ChatApp</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Firebase Authentication Example:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>firebase </code></pre> </li> </ol> <ul> <li> <p>Usage (Firebase authentication in React):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">firebase</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">firebase/app</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="dl">'</span><span class="s1">firebase/auth</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">firebaseConfig</span> <span class="o">=</span> <span class="p">{</span> <span class="na">apiKey</span><span class="p">:</span> <span class="dl">'</span><span class="s1">your-api-key</span><span class="dl">'</span><span class="p">,</span> <span class="na">authDomain</span><span class="p">:</span> <span class="dl">'</span><span class="s1">your-auth-domain</span><span class="dl">'</span><span class="p">,</span> <span class="c1">// ... other config options</span> <span class="p">};</span> <span class="nx">firebase</span><span class="p">.</span><span class="nf">initializeApp</span><span class="p">(</span><span class="nx">firebaseConfig</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">AuthExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">handleSignIn</span> <span class="o">=</span> <span class="k">async </span><span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">provider</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">firebase</span><span class="p">.</span><span class="nx">auth</span><span class="p">.</span><span class="nc">GoogleAuthProvider</span><span class="p">();</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">firebase</span><span class="p">.</span><span class="nf">auth</span><span class="p">().</span><span class="nf">signInWithPopup</span><span class="p">(</span><span class="nx">provider</span><span class="p">);</span> <span class="nf">setUser</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">user</span><span class="p">);</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="dl">'</span><span class="s1">Authentication error:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="si">{</span><span class="nx">user</span> <span class="p">?</span> <span class="p">(</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Welcome, <span class="si">{</span><span class="nx">user</span><span class="p">.</span><span class="nx">displayName</span><span class="si">}</span>!<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p">)</span> <span class="p">:</span> <span class="p">(</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">handleSignIn</span><span class="si">}</span><span class="p">></span>Sign in with Google<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p">)</span><span class="si">}</span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">AuthExample</span><span class="p">;</span> </code></pre> </li> </ul> <p>These examples cover GraphQL integration with Apollo Client, WebSocket communication with Socket.io, and Firebase authentication in React. Feel free to explore and adapt these examples to your specific use cases.</p> <p>Certainly, let's continue exploring more topics with corresponding example code:</p> <ol> <li> <p><strong>Testing with Jest and Enzyme:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>jest enzyme enzyme-to-json enzyme-adapter-react-16 <span class="nt">--save-dev</span> </code></pre> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>- Usage (Sample test using Jest and Enzyme): </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```jsx import React from 'react'; import { shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import MyComponent from './MyComponent'; describe('MyComponent', () => { it('renders correctly', () => { const wrapper = shallow(<MyComponent />); expect(toJson(wrapper)).toMatchSnapshot(); }); it('handles click event', () => { const mockOnClick = jest.fn(); const wrapper = shallow(<MyComponent onClick={mockOnClick} />); wrapper.find('button').simulate('click'); expect(mockOnClick).toHaveBeenCalledTimes(1); }); }); ``` </code></pre> </div> <ol> <li> <p><strong>Storybook Example:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npx sb init </code></pre> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>- Usage (Creating a simple story in Storybook): - Create a `Button.js` component: </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```jsx import React from 'react'; const Button = ({ label, onClick }) => ( <button onClick={onClick}>{label}</button> ); export default Button; ``` </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - Create a `Button.stories.js` file: </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```jsx import React from 'react'; import Button from './Button'; export default { title: 'Button', component: Button, }; const Template = (args) => <Button {...args} />; export const Primary = Template.bind({}); Primary.args = { label: 'Primary Button', onClick: () => console.log('Button clicked'), }; ``` </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - Run Storybook: </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```bash npx sb ``` </code></pre> </div> <ol> <li> <p><strong>Code Splitting with React Lazy and Suspense:</strong></p> <ul> <li>Usage (Lazy loading a component with React Lazy and Suspense): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">lazy</span><span class="p">,</span> <span class="nx">Suspense</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">LazyComponent</span> <span class="o">=</span> <span class="nf">lazy</span><span class="p">(()</span> <span class="o">=></span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./LazyComponent</span><span class="dl">'</span><span class="p">));</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nc">Suspense</span> <span class="na">fallback</span><span class="p">=</span><span class="si">{</span><span class="p"><</span><span class="nt">div</span><span class="p">></span>Loading...<span class="p"></</span><span class="nt">div</span><span class="p">></span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nc">LazyComponent</span> <span class="p">/></span> <span class="p"></</span><span class="nc">Suspense</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>CSS-in-JS with styled-components:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>styled-components </code></pre> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>- Usage (Styling a component with styled-components): </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```jsx import React from 'react'; import styled from 'styled-components'; const StyledButton = styled.button` background-color: #3498db; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; `; const StyledComponent = () => ( <StyledButton onClick={() => console.log('Styled button clicked')}> Click me </StyledButton> ); export default StyledComponent; ``` </code></pre> </div> <p>Feel free to explore these examples to gain insights into testing with Jest and Enzyme, using Storybook for component development, implementing code splitting with React Lazy and Suspense, and styling components with CSS-in-JS using styled-components.</p> <p>Certainly, let's explore additional topics with corresponding example code:</p> <ol> <li> <p><strong>Responsive Design with CSS Media Queries:</strong></p> <ul> <li>Usage (Creating a responsive layout using CSS media queries): </li> </ul> <pre class="highlight css"><code> <span class="c">/* Regular styles */</span> <span class="nc">.container</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* Media query for screens smaller than 768px */</span> <span class="k">@media</span> <span class="n">screen</span> <span class="n">and</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.container</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">90%</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </li> <li> <p><strong>Error Boundary Example:</strong></p> <ul> <li>Usage (Implementing an error boundary in React): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">class</span> <span class="nc">ErrorBoundary</span> <span class="kd">extends</span> <span class="nc">Component</span> <span class="p">{</span> <span class="nf">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> <span class="k">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="na">hasError</span><span class="p">:</span> <span class="kc">false</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">static</span> <span class="nf">getDerivedStateFromError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="na">hasError</span><span class="p">:</span> <span class="kc">true</span> <span class="p">};</span> <span class="p">}</span> <span class="nf">componentDidCatch</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">errorInfo</span><span class="p">)</span> <span class="p">{</span> <span class="nf">logErrorToService</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">errorInfo</span><span class="p">);</span> <span class="p">}</span> <span class="nf">render</span><span class="p">()</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">hasError</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Something went wrong.<span class="p"></</span><span class="nt">h1</span><span class="p">>;</span> <span class="p">}</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">ErrorBoundary</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>JWT Authentication in React:</strong></p> <ul> <li>Usage (Handling JWT authentication in a React app): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">jwtToken</span><span class="dl">'</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Verify the token on the server and set the user accordingly</span> <span class="nf">verifyToken</span><span class="p">(</span><span class="nx">token</span><span class="p">);</span> <span class="p">}</span> <span class="p">},</span> <span class="p">[]);</span> <span class="kd">const</span> <span class="nx">handleLogin</span> <span class="o">=</span> <span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">// Save token to localStorage and set the user</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">jwtToken</span><span class="dl">'</span><span class="p">,</span> <span class="nx">token</span><span class="p">);</span> <span class="nf">verifyToken</span><span class="p">(</span><span class="nx">token</span><span class="p">);</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">handleLogout</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">// Remove token from localStorage and reset the user</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">removeItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">jwtToken</span><span class="dl">'</span><span class="p">);</span> <span class="nf">setUser</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">verifyToken</span> <span class="o">=</span> <span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">// Send token to server for verification</span> <span class="c1">// Set the user if verification is successful</span> <span class="p">};</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="si">{</span><span class="nx">user</span> <span class="p">?</span> <span class="p">(</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">handleLogout</span><span class="si">}</span><span class="p">></span>Logout<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p">)</span> <span class="p">:</span> <span class="p">(</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nf">handleLogin</span><span class="p">(</span><span class="dl">'</span><span class="s1">exampleToken</span><span class="dl">'</span><span class="p">)</span><span class="si">}</span><span class="p">></span>Login<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p">)</span><span class="si">}</span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>Serverless Function Example:</strong></p> <ul> <li> <p>Usage (Creating a serverless function with Netlify Functions):</p> <ul> <li>Create a file named <code>hello.js</code> in the <code>netlify/functions</code> directory: </li> </ul> <pre class="highlight javascript"><code><span class="nx">exports</span><span class="p">.</span><span class="nx">handler</span> <span class="o">=</span> <span class="k">async </span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">context</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="na">statusCode</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span> <span class="na">message</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Hello, World!</span><span class="dl">'</span> <span class="p">}),</span> <span class="p">};</span> <span class="p">};</span> </code></pre> </li> </ul> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - Deploy your site to Netlify, and the function becomes available at `/.netlify/functions/hello`. </code></pre> </div> <p>Feel free to explore these examples covering responsive design with CSS media queries, implementing an error boundary in React, handling JWT authentication, and creating a serverless function using Netlify Functions.</p> <p>Certainly, let's delve into additional topics with corresponding example code:</p> <ol> <li> <p><strong>Redux Persist for Persistent State:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>redux-persist </code></pre> </li> </ol> <ul> <li> <p>Usage (Persisting Redux state to local storage):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="p">{</span> <span class="nx">createStore</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">redux</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">persistStore</span><span class="p">,</span> <span class="nx">persistReducer</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">redux-persist</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">storage</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">redux-persist/lib/storage</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">rootReducer</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./reducers</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">persistConfig</span> <span class="o">=</span> <span class="p">{</span> <span class="na">key</span><span class="p">:</span> <span class="dl">'</span><span class="s1">root</span><span class="dl">'</span><span class="p">,</span> <span class="nx">storage</span><span class="p">,</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">persistedReducer</span> <span class="o">=</span> <span class="nf">persistReducer</span><span class="p">(</span><span class="nx">persistConfig</span><span class="p">,</span> <span class="nx">rootReducer</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nf">createStore</span><span class="p">(</span><span class="nx">persistedReducer</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">persistor</span> <span class="o">=</span> <span class="nf">persistStore</span><span class="p">(</span><span class="nx">store</span><span class="p">);</span> <span class="k">export</span> <span class="p">{</span> <span class="nx">store</span><span class="p">,</span> <span class="nx">persistor</span> <span class="p">};</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Internationalization (i18n) Example with react-intl:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>react-intl </code></pre> </li> </ol> <ul> <li> <p>Usage (Implementing internationalization in a React app):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">FormattedMessage</span><span class="p">,</span> <span class="nx">IntlProvider</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-intl</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">messages</span> <span class="o">=</span> <span class="p">{</span> <span class="na">en</span><span class="p">:</span> <span class="p">{</span> <span class="na">greeting</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Hello!</span><span class="dl">'</span><span class="p">,</span> <span class="p">},</span> <span class="na">fr</span><span class="p">:</span> <span class="p">{</span> <span class="na">greeting</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bonjour!</span><span class="dl">'</span><span class="p">,</span> <span class="p">},</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">locale</span> <span class="p">})</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nc">IntlProvider</span> <span class="na">locale</span><span class="p">=</span><span class="si">{</span><span class="nx">locale</span><span class="si">}</span> <span class="na">messages</span><span class="p">=</span><span class="si">{</span><span class="nx">messages</span><span class="p">[</span><span class="nx">locale</span><span class="p">]</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nc">FormattedMessage</span> <span class="na">id</span><span class="p">=</span><span class="s">"greeting"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nc">IntlProvider</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Integration with WebSockets using Socket.io:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>socket.io-client </code></pre> </li> </ol> <ul> <li> <p>Usage (Connecting to a WebSocket server with Socket.io):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">io</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">socket.io-client</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">ChatApp</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nf">io</span><span class="p">(</span><span class="dl">'</span><span class="s1">http://localhost:3001</span><span class="dl">'</span><span class="p">);</span> <span class="nx">socket</span><span class="p">.</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">message</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Received message:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> <span class="p">});</span> <span class="k">return </span><span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">socket</span><span class="p">.</span><span class="nf">disconnect</span><span class="p">();</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[]);</span> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span>WebSocket Chat App<span class="p"></</span><span class="nt">div</span><span class="p">>;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">ChatApp</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Using React Portals:</strong></p> <ul> <li>Usage (Creating a portal in React): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">ReactDOM</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-dom</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">PortalComponent</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">portalRoot</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">portal-root</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">portalContent</span> <span class="o">=</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Content rendered in portal<span class="p"></</span><span class="nt">div</span><span class="p">>;</span> <span class="k">return</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nf">createPortal</span><span class="p">(</span><span class="nx">portalContent</span><span class="p">,</span> <span class="nx">portalRoot</span><span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">PortalComponent</span><span class="p">;</span> </code></pre> </li> </ol> <p>Feel free to explore these examples covering Redux Persist for persistent state, internationalization with react-intl, integration with WebSockets using Socket.io, and the use of React Portals. Adapt and experiment with these concepts based on your application's requirements.</p> <p>Certainly, let's continue exploring more topics with corresponding example code:</p> <ol> <li> <p><strong>Web Workers in React:</strong></p> <ul> <li>Usage (Creating and using a Web Worker in a React app): </li> </ul> <pre class="highlight jsx"><code> <span class="c1">// main.js</span> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="nx">MyWorker</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./my.worker</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">worker</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">MyWorker</span><span class="p">();</span> <span class="nx">worker</span><span class="p">.</span><span class="nf">postMessage</span><span class="p">({</span> <span class="na">message</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Hello from main thread!</span><span class="dl">'</span> <span class="p">});</span> <span class="nx">worker</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Received message from Web Worker:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span> <span class="p">};</span> <span class="k">return </span><span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">worker</span><span class="p">.</span><span class="nf">terminate</span><span class="p">();</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[]);</span> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Web Worker Example<span class="p"></</span><span class="nt">div</span><span class="p">>;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> </code></pre> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> ```js // my.worker.js self.onmessage = (event) => { console.log('Received message in Web Worker:', event.data); self.postMessage({ message: 'Hello from Web Worker!' }); }; ``` </code></pre> </div> <ol> <li> <p><strong>Form Handling in React:</strong></p> <ul> <li>Usage (Handling form input in a React component): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">FormExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">formData</span><span class="p">,</span> <span class="nx">setFormData</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">({</span> <span class="na">username</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="na">password</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">handleChange</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">setFormData</span><span class="p">({</span> <span class="p">...</span><span class="nx">formData</span><span class="p">,</span> <span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">name</span><span class="p">]:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span> <span class="p">});</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">handleSubmit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Form submitted with data:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">formData</span><span class="p">);</span> <span class="p">};</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">form</span> <span class="na">onSubmit</span><span class="p">=</span><span class="si">{</span><span class="nx">handleSubmit</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> Username: <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"text"</span> <span class="na">name</span><span class="p">=</span><span class="s">"username"</span> <span class="na">value</span><span class="p">=</span><span class="si">{</span><span class="nx">formData</span><span class="p">.</span><span class="nx">username</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="nx">handleChange</span><span class="si">}</span> <span class="p">/></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span> <span class="p">/></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> Password: <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"password"</span> <span class="na">name</span><span class="p">=</span><span class="s">"password"</span> <span class="na">value</span><span class="p">=</span><span class="si">{</span><span class="nx">formData</span><span class="p">.</span><span class="nx">password</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="nx">handleChange</span><span class="si">}</span> <span class="p">/></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span> <span class="p">/></span> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="p">=</span><span class="s">"submit"</span><span class="p">></span>Submit<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">FormExample</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>React Helmet for Managing Head in React:</strong></p> <ul> <li>Installation: </li> </ul> <pre class="highlight shell"><code> npm <span class="nb">install </span>react-helmet </code></pre> </li> </ol> <ul> <li> <p>Usage (Setting document head properties in a React component):<br> </p> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Helmet</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-helmet</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">HeadExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nc">Helmet</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Page Title<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="p">=</span><span class="s">"description"</span> <span class="na">content</span><span class="p">=</span><span class="s">"This is a description."</span> <span class="p">/></span> <span class="p"></</span><span class="nc">Helmet</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Page Content<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">HeadExample</span><span class="p">;</span> </code></pre> </li> </ul> <ol> <li> <p><strong>Using React Context API:</strong></p> <ul> <li>Usage (Creating a simple context in React): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">createContext</span><span class="p">,</span> <span class="nx">useContext</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="nf">createContext</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">ParentComponent</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nc">MyContext</span><span class="p">.</span><span class="nc">Provider</span> <span class="na">value</span><span class="p">=</span><span class="si">{</span><span class="p">{</span> <span class="na">message</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Hello from Context!</span><span class="dl">'</span> <span class="p">}</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nc">ChildComponent</span> <span class="p">/></span> <span class="p"></</span><span class="nc">MyContext</span><span class="p">.</span><span class="nc">Provider</span><span class="p">></span> <span class="p">);</span> <span class="kd">const</span> <span class="nx">ChildComponent</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">contextValue</span> <span class="o">=</span> <span class="nf">useContext</span><span class="p">(</span><span class="nx">MyContext</span><span class="p">);</span> <span class="k">return</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span><span class="si">{</span><span class="nx">contextValue</span><span class="p">.</span><span class="nx">message</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">>;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">ParentComponent</span><span class="p">;</span> </code></pre> </li> </ol> <p>Feel free to explore these examples covering Web Workers in React, form handling, managing document head properties with React Helmet, and using the React Context API. Experiment with these concepts based on your application's needs.</p> <p>Certainly, let's continue exploring more topics with corresponding example code:</p> <ol> <li> <p><strong>Debouncing and Throttling in React:</strong></p> <ul> <li>Usage (Implementing debouncing and throttling in a React component): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">debounce</span><span class="p">,</span> <span class="nx">throttle</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">lodash</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">DebounceThrottleExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">value</span><span class="p">,</span> <span class="nx">setValue</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="dl">''</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">debouncedHandleChange</span> <span class="o">=</span> <span class="nf">debounce</span><span class="p">((</span><span class="nx">input</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Debounced Input:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">input</span><span class="p">);</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">throttledHandleChange</span> <span class="o">=</span> <span class="nf">throttle</span><span class="p">((</span><span class="nx">input</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Throttled Input:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">input</span><span class="p">);</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">handleChange</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nf">setValue</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="nf">debouncedHandleChange</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="nf">throttledHandleChange</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="p">};</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"text"</span> <span class="na">value</span><span class="p">=</span><span class="si">{</span><span class="nx">value</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="nx">handleChange</span><span class="si">}</span> <span class="p">/></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">DebounceThrottleExample</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>Intersection Observer in React:</strong></p> <ul> <li>Usage (Using Intersection Observer in a React component): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useRef</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">IntersectionObserverExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">targetRef</span> <span class="o">=</span> <span class="nf">useRef</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">handleIntersection</span> <span class="o">=</span> <span class="p">(</span><span class="nx">entries</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">entries</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">entry</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">isIntersecting</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Target is in view!</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Target is out of view!</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="p">};</span> <span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">observer</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">IntersectionObserver</span><span class="p">(</span><span class="nx">handleIntersection</span><span class="p">);</span> <span class="nx">observer</span><span class="p">.</span><span class="nf">observe</span><span class="p">(</span><span class="nx">targetRef</span><span class="p">.</span><span class="nx">current</span><span class="p">);</span> <span class="k">return </span><span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">observer</span><span class="p">.</span><span class="nf">disconnect</span><span class="p">();</span> <span class="p">};</span> <span class="p">},</span> <span class="p">[]);</span> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span> <span class="na">ref</span><span class="p">=</span><span class="si">{</span><span class="nx">targetRef</span><span class="si">}</span><span class="p">></span>Intersection Observer Target<span class="p"></</span><span class="nt">div</span><span class="p">>;</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">IntersectionObserverExample</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>Lazy Loading Images in React:</strong></p> <ul> <li>Usage (Implementing lazy loading of images in a React component): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">LazyLoadingImage</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span> <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="p">=</span><span class="si">{</span><span class="p">{</span> <span class="na">height</span><span class="p">:</span> <span class="dl">'</span><span class="s1">500px</span><span class="dl">'</span><span class="p">,</span> <span class="na">overflowY</span><span class="p">:</span> <span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span> <span class="p">}</span><span class="si">}</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Scroll down to load the image<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="p">=</span><span class="s">"https://example.com/large-image.jpg"</span> <span class="na">alt</span><span class="p">=</span><span class="s">"Lazy Loaded Image"</span> <span class="na">loading</span><span class="p">=</span><span class="s">"lazy"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">LazyLoadingImage</span><span class="p">;</span> </code></pre> </li> <li> <p><strong>Memoization in React with useMemo:</strong></p> <ul> <li>Usage (Using <code>useMemo</code> for memoization in a React component): </li> </ul> <pre class="highlight jsx"><code> <span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useMemo</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">MemoizationExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">squaredValue</span> <span class="o">=</span> <span class="nf">useMemo</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Computing squared value...</span><span class="dl">'</span><span class="p">);</span> <span class="k">return</span> <span class="nx">count</span> <span class="o">*</span> <span class="nx">count</span><span class="p">;</span> <span class="p">},</span> <span class="p">[</span><span class="nx">count</span><span class="p">]);</span> <span class="k">return </span><span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Count: <span class="si">{</span><span class="nx">count</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Squared Value: <span class="si">{</span><span class="nx">squaredValue</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nf">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span><span class="si">}</span><span class="p">></span>Increment<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">};</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">MemoizationExample</span><span class="p">;</span> </code></pre> </li> </ol> <p>Feel free to explore these examples covering debouncing and throttling, using Intersection Observer, lazy loading images, and memoization with <code>useMemo</code> in React. Adapt and experiment with these concepts based on your application's requirements.</p></div>