DevIdiot!
Styling in React
<div><h4>
Introduction
</h4>
<p>Styling is a crucial aspect of web development that ensures your applications are visually appealing and user-friendly. React offers several approaches to styling components, from traditional CSS and Sass to modern CSS-in-JS solutions like Styled-Components. This week, we'll dive into these methods and learn how to apply them effectively in your React projects.</p>
<h4>
Importance of Styling in React
</h4>
<p>Proper styling enhances the user experience, improves usability, and makes your application more engaging. Understanding different styling techniques allows you to choose the best approach for your specific project needs.</p>
<h4>
Traditional CSS
</h4>
<p><strong>Using CSS with React:</strong></p>
<ul>
<li>
<strong>Basic Example</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><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="dl">'</span><span class="s1">./App.css</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">container</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">h1</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">title</span><span class="dl">"</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">World</span><span class="o">!<</span><span class="sr">/h1</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</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>
</div>
<ul>
<li>
<strong>App.css</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight css"><code> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.title</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
<p><strong>CSS Modules:</strong></p>
<ul>
<li>
<strong>Example</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><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">./App.module.css</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">styles</span><span class="p">.</span><span class="nx">container</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">h1</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">styles</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">World</span><span class="o">!<</span><span class="sr">/h1</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</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>
</div>
<ul>
<li>
<strong>App.module.css</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight css"><code> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.title</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
<h4>
Using Sass
</h4>
<p><strong>Installing Sass:</strong></p>
<ul>
<li>
<strong>Command to Install</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code> npm <span class="nb">install </span>node-sass
</code></pre>
</div>
<p><strong>Using Sass in React:</strong></p>
<ul>
<li>
<strong>App.scss</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight scss"><code> <span class="nv">$primary-color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="nv">$padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="nc">.container</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="nv">$padding</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.title</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$primary-color</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>
<ul>
<li>
<strong>App Component</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><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="dl">'</span><span class="s1">./App.scss</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">container</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">h1</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">title</span><span class="dl">"</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">World</span><span class="o">!<</span><span class="sr">/h1</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</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>
</div>
<p><strong>Nested Styling with Sass:</strong></p>
<ul>
<li>
<strong>Example</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight scss"><code> <span class="nc">.container</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="nc">.title</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">darkblue</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre>
</div>
<h4>
Styled-Components
</h4>
<p><strong>Introduction to Styled-Components:</strong></p>
<ul>
<li>
<strong>Definition</strong>: A library for styling React components using tagged template literals.</li>
<li>
<strong>Installation</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code> npm <span class="nb">install </span>styled-components
</code></pre>
</div>
<p><strong>Using Styled-Components:</strong></p>
<ul>
<li>
<strong>Example</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><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">styled</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">styled-components</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">Container</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">div</span><span class="s2">`
text-align: center;
padding: 20px;
`</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">Title</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">h1</span><span class="s2">`
color: blue;
font-size: 2em;
&:hover {
color: darkblue;
}
`</span><span class="p">;</span>
<span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="o"><</span><span class="nx">Container</span><span class="o">></span>
<span class="o"><</span><span class="nx">Title</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">World</span><span class="o">!<</span><span class="sr">/Title</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/Container</span><span class="err">>
</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>
</div>
<p><strong>Theming with Styled-Components:</strong></p>
<ul>
<li>
<strong>Creating a Theme</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code> <span class="k">import</span> <span class="p">{</span> <span class="nx">ThemeProvider</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">styled-components</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">theme</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">colors</span><span class="p">:</span> <span class="p">{</span>
<span class="na">primary</span><span class="p">:</span> <span class="dl">'</span><span class="s1">blue</span><span class="dl">'</span><span class="p">,</span>
<span class="na">secondary</span><span class="p">:</span> <span class="dl">'</span><span class="s1">darkblue</span><span class="dl">'</span>
<span class="p">},</span>
<span class="na">spacing</span><span class="p">:</span> <span class="p">{</span>
<span class="na">padding</span><span class="p">:</span> <span class="dl">'</span><span class="s1">20px</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">function</span> <span class="nf">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="o"><</span><span class="nx">ThemeProvider</span> <span class="nx">theme</span><span class="o">=</span><span class="p">{</span><span class="nx">theme</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Container</span><span class="o">></span>
<span class="o"><</span><span class="nx">Title</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">World</span><span class="o">!<</span><span class="sr">/Title</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/Container</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/ThemeProvider</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<ul>
<li>
<strong>Using Theme Values</strong>:
</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code> <span class="k">import</span> <span class="nx">styled</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">styled-components</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">Container</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">div</span><span class="s2">`
text-align: center;
padding: </span><span class="p">${(</span><span class="nx">props</span><span class="p">)</span> <span class="o">=></span> <span class="nx">props</span><span class="p">.</span><span class="nx">theme</span><span class="p">.</span><span class="nx">spacing</span><span class="p">.</span><span class="nx">padding</span><span class="p">}</span><span class="s2">;
`</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">Title</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">h1</span><span class="s2">`
color: </span><span class="p">${(</span><span class="nx">props</span><span class="p">)</span> <span class="o">=></span> <span class="nx">props</span><span class="p">.</span><span class="nx">theme</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">primary</span><span class="p">}</span><span class="s2">;
font-size: 2em;
&:hover {
color: </span><span class="p">${(</span><span class="nx">props</span><span class="p">)</span> <span class="o">=></span> <span class="nx">props</span><span class="p">.</span><span class="nx">theme</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">secondary</span><span class="p">}</span><span class="s2">;
}
`</span><span class="p">;</span>
</code></pre>
</div>
<h4>
Conclusion
</h4>
<p>Choosing the right styling approach in React depends on your project requirements and personal preference. Traditional CSS and Sass offer familiarity and simplicity, while Styled-Components provide dynamic and scoped styling capabilities. Mastering these techniques will help you build beautiful and maintainable user interfaces.</p>
<h4>
Resources for Further Learning
</h4>
<ul>
<li>
<strong>Online Courses</strong>: Websites like Udemy, Pluralsight, and freeCodeCamp offer courses on React styling techniques.</li>
<li>
<strong>Books</strong>: "React and React Native" by Adam Boduch and "React Quickly" by Azat Mardan.</li>
<li>
<strong>Documentation and References</strong>:
<ul>
<li><a href="https://styled-components.com/docs">Styled-Components Documentation</a></li>
<li><a href="https://sass-lang.com/documentation">Sass Documentation</a></li>
<li><a href="https://github.com/css-modules/css-modules">React CSS Modules Documentation</a></li>
</ul>
</li>
<li>
<strong>Communities</strong>: Join developer communities on platforms like Stack Overflow, Reddit, and GitHub for support and networking.</li>
</ul></div>
What is Behavior Driven Development (BDD)?
Introduction
What is bdd ?
Behavior Driven Development (BDD) is an agile software development methodology that emphasizes collaboration among all stakeholders—developers, testers, and business analysts—to create a shared understanding of the behavior of a software application. BDD extends Test Driven Development (TDD) by focusing on the behavior of the application from the end user's perspective. It uses natural language constructs to describe the expected behavior, making it accessible to non-
UI Libraries in React
<div><p>UI libraries that can create aesthetically pleasing websites are what every developer looks for. These libraries not only help developers but also make life easier for users by enabling them to navigate the system quickly. So, what are some great UI libraries that developers can use with React.js? Let’s see them one by one.</p>
<p>Before that, it’s imperative to understand what React UI component libraries are. These libraries are *<em>collections of pre-coded user-interface elements. *</em> The elements included in component libraries are buttons, cards, tables, etc. Ultimately, they help developers ensure quick development and prototyping.</p>
<p>Now, let’s see some of the best React UI Component Libraries.</p>
<p><strong>Chakra UI</strong></p>
<p>It’s one of the simpler UI libraries loved by almost every developer because of its modular and accessible components. It is built on top of React UI primitives. Moreover, to ensure that all components are accessible, Chakra UI uses WAI-ARIA guidelines. Some pros of using Chakra UI include:</p>
<ul>
<li>Responsive components</li>
<li>Availability of stack components</li>
<li>Dark mode</li>
<li>Multiple color modes</li>
<li>Custom values</li>
</ul>
<p>But why should you use it over others? Chakra UI's main focus is accessibility. This ensures that the app you build is usable by everyone. Additionally, it emphasizes simplicity. This might also be why it’s popular. As of today, Chakra UI has more than 37k stars on GitHub.</p>
<p><strong>Prime React</strong></p>
<p>Another library that developers love to use is PrimeReact. It is an open-source front-end library that helps in building responsive websites. However, for beginners, it’s challenging to learn. Some also call it the underdog because it’s not very popular. Part of the reason might be marketing. On GitHub, it has 6.1k stars. Why do I love this library? Developers don’t need to install extra packages to accomplish tasks. They can do a lot with just the library.</p>
<p>Some pros of using PrimeReact include:</p>
<ul>
<li>Data table components</li>
<li>Customizable templates and themes</li>
<li>Responsiveness</li>
<li>Better accessibility</li>
</ul>
<p><strong>NextUI</strong></p>
<p>Another library that is popular in React.js is NextUI. It is renowned for its flexible nature and performance. NextUI is particularly recommended for building landing pages quickly. Moreover, NextUI offers immediate styling and components that developers can use after making some edits. It’s built on top of TailWind CSS and React Aria. Some advantages of NextUI include:</p>
<ul>
<li>Gentle learning curve</li>
<li>Use of high-quality and customizable components</li>
<li>Adherence to WAI-ARIA guidelines</li>
<li>Well-scaled default dark theme</li>
<li>Lazy loading (helpful for app performance)</li>
<li>Support for internationalization</li>
<li>Form validation</li>
</ul>
<p><strong>Semantic UI</strong></p>
<p>If you prefer a library that is full of pre-built components then you need to use semantic UI. Some of the advantages of using Semantic UI include:</p>
<ul>
<li>Auto-controlled state</li>
<li>Shorthand props</li>
<li>Augmentation</li>
<li>Customization of themes</li>
<li>Community support</li>
</ul>
<p><strong>Ant Design</strong></p>
<p>If you want to build enterprise applications, then go for Ant Design. This is because this UI library has many features that can make applications accessible as well as scalable. In fact, the reason it is too popular is because it has good performance and accessibility. Moreover, it gives developers the ability to tailor design elements as well. There are varying internalisation tools, too. The best part about Ant Design is that it enables the creation of a minimalist website. Ant Design focuses more on simplicity and consistency. </p>
<ul>
<li>Typescript friendly</li>
<li>Comprehensive</li>
<li>Best (if you have to take a lot of input)</li>
<li>Variety and customization</li>
<li>Thorough documentation</li>
</ul></div>
Tips and Tools for Software Development Engineers (SDEs)
## Introduction
As a Software Development Engineer (SDE), your role involves not only writing code but also managing projects, collaborating with teams, and continuously learning new technologies. To succeed and excel in this fast-paced field, it’s essential to leverage the right tools and adopt effective practices. Here are some tips and tools that can help you become a more efficient and productive SDE.
Tips for SDEs
1. Master Version Control
Version control is a fundam
Master Coding Trends in 2024 and Stay Ahead of the Curve
Shaping Today’s Digital Landscape Coding has surged in popularity worldwide due to its pivotal role in technology’s evolution ...
8 Amazing AI Tools that will Save you 100+ Hours Monthly
We are always told that efficiency is key, and in 2024, it cannot be truer with such high competition across industries. Thankfully, the beginning of the artificial intelligence (AI) powered tools revolution has led the way for tools and software that enormously reduce the time required and boost productivity to complete different tasks, making it possible to achieve a day’s work in just one hour, helping you save time. There is an AI tool for everyone, whether for music production, creating new
Launching 50+ FREE website templates - React, Next.js, Tailwind CSS
Introducing Easy UI ✨ - High quality templates for web designers.
I am building 50+ free website templates using React, Next.js, TypeScript, Tailwind Labs CSS, Shadcn-UI, and Framer Motion.
Today, I am super excited to launch first 3 templates,
1.Easy Template - Template suitable for SaaS products
2.Designfast - Minimal template designed for service/creative business
3.QuotesAI - Ready-to-use Micro SaaS with NextAuth built-in
Here's the link to checkout Easy UI
How to Use ChatGPT to Write a Cover Letter
The Great Resignation and the global shift to remote work has opened up the job market. But today's market conditions have swung the power back into the hands of HR. Layoffs, hiring freezes, ghosting and greater competition make securing a new job a harder, longer progress. Applying for a job is arduous and time-consuming, and it's tempting to use the fast apply button and attach a generic cover letter to every application -- but that's not going to get you hired in this mark
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>
50 Terms using in React development
<div><ol>
<li><p><strong>React:</strong> A JavaScript library for building user interfaces, developed and maintained by Facebook. It facilitates the creation of reusable UI components.</p></li>
<li><p><strong>Redux:</strong> A state management library for JavaScript applications, often used in conjunction with React. Redux helps manage the state of an application in a predictable and centralized manner.</p></li>
<li><p><strong>Component:</strong> A modular, self-contained piece of code in React that encapsulates a specific functionality or UI element. Components can be reused throughout an application.</p></li>
<li><p><strong>Virtual DOM:</strong> An in-memory representation of the actual DOM in React. It improves performance by allowing React to update only the parts of the DOM that have changed.</p></li>
<li><p><strong>JSX:</strong> A syntax extension for JavaScript used with React to write XML-like code for creating React elements.</p></li>
<li><p><strong>Props:</strong> Short for properties, props are used to pass data from one component to another in React. They are immutable and are set by the parent component.</p></li>
<li><p><strong>State:</strong> An internal data storage mechanism in React components that allows them to keep track of changing information. Unlike props, state can be modified within a component.</p></li>
<li><p><strong>Lifecycle Methods:</strong> Methods in a React component that are invoked at different stages of its lifecycle, such as mounting, updating, and unmounting.</p></li>
<li><p><strong>React Router:</strong> A library that enables navigation and routing in React applications, allowing for the creation of Single Page Applications (SPAs).</p></li>
<li><p><strong>Hooks:</strong> Functions introduced in React 16.8 that allow functional components to use state and other React features without writing a class.</p></li>
<li><p><strong>Redux Store:</strong> The central hub where the state of a Redux application is stored. It is a single JavaScript object that represents the entire state tree.</p></li>
<li><p><strong>Reducer:</strong> A pure function in Redux that specifies how the application's state changes in response to actions. Reducers take the current state and an action and return a new state.</p></li>
<li><p><strong>Action:</strong> Plain JavaScript objects that describe changes in the application state. Actions must have a <code>type</code> property indicating the type of change.</p></li>
<li><p><strong>Dispatch:</strong> A method in Redux used to send actions to the Redux store. It is the only way to trigger a state change.</p></li>
<li><p><strong>Middleware:</strong> Functions that have access to the action being dispatched and the current state in Redux. Middleware can be used for logging, asynchronous actions, and other purposes.</p></li>
<li><p><strong>Immutable State:</strong> In Redux, the state should be treated as immutable, meaning it should not be directly modified. Instead, new copies of the state should be created.</p></li>
<li><p><strong>Provider:</strong> A React component provided by React Redux that makes the Redux store available to the rest of the application.</p></li>
<li><p><strong>Connect:</strong> A higher-order component provided by React Redux that connects a React component to the Redux store, allowing it to access the state and dispatch actions.</p></li>
<li><p><strong>Thunk:</strong> A middleware for Redux that allows the action creators to return functions instead of plain actions. Thunks are often used for handling asynchronous operations.</p></li>
<li><p><strong>Selectors:</strong> Functions in Redux that are used to extract specific pieces of information from the state. They help in keeping the component logic independent of the shape of the state.</p></li>
<li><p><strong>Higher-Order Component (HOC):</strong> A function that takes a component and returns a new component with additional props or behavior.</p></li>
<li><p><strong>Context API:</strong> A feature in React that allows data to be passed through the component tree without having to pass props manually at every level.</p></li>
<li><p><strong>CSS-in-JS:</strong> A technique where styles are defined directly within JavaScript files, often used in React applications for component-specific styling.</p></li>
<li><p><strong>Webpack:</strong> A popular module bundler for JavaScript applications. It is commonly used in React projects to bundle and optimize assets.</p></li>
<li><p><strong>Babel:</strong> A JavaScript compiler that converts ECMAScript 2015+ code into a backward-compatible version of JavaScript for older browsers.</p></li>
<li><p><strong>JSX Compiler:</strong> A tool that translates JSX code into JavaScript that browsers can understand. Babel is commonly used for this purpose in React projects.</p></li>
<li><p><strong>PropTypes:</strong> A library used in React for documenting and validating the types of props that a component should receive.</p></li>
<li><p><strong>React Fragment:</strong> A syntax in React used to group multiple elements without introducing an additional DOM node.</p></li>
<li><p><strong>Error Boundary:</strong> A React component that catches JavaScript errors anywhere in the component tree and logs those errors.</p></li>
<li><p><strong>CSS Modules:</strong> A way to locally scope CSS in React applications, preventing style conflicts between different components.</p></li>
<li><p><strong>Lazy Loading:</strong> A technique where components or assets are loaded only when they are actually needed, improving the initial load time of a React application.</p></li>
<li><p><strong>Code Splitting:</strong> The process of breaking down a large JavaScript bundle into smaller, more manageable chunks that can be loaded on demand.</p></li>
<li><p><strong>Server-Side Rendering (SSR):</strong> A technique where a React application is rendered on the server side and the generated HTML is sent to the client, improving initial page load performance.</p></li>
<li><p><strong>Client-Side Rendering (CSR):</strong> The traditional approach where a React application is rendered on the client side using JavaScript.</p></li>
<li><p><strong>Immutable.js:</strong> A library that provides immutable data structures, which can be used to enforce immutability in a Redux application.</p></li>
<li><p><strong>XHR Request:</strong> Stands for XMLHttpRequest, a feature in browsers that allows making HTTP requests from the client side.</p></li>
<li><p><strong>JWT (JSON Web Token):</strong> A compact, URL-safe means of representing claims to be transferred between two parties, commonly used for authentication in React applications.</p></li>
<li><p><strong>Firebase:</strong> A mobile and web application development platform by Google, often used with React for real-time database and authentication.</p></li>
<li><p><strong>GraphQL:</strong> A query language for APIs that allows clients to request only the data they need. It is an alternative to REST and is often used with React.</p></li>
<li><p><strong>PropTypes:</strong> A library used in React for documenting and validating the types of props that a component should receive.</p></li>
<li><p><strong>Serverless Architecture:</strong> An architectural approach where the server is abstracted away, and developers focus on writing functions that run in response to events.</p></li>
<li><p><strong>WebSocket:</strong> A communication protocol that provides full-duplex communication channels over a single, long-lived connection, often used for real-time features in React applications.</p></li>
<li><p><strong>Axios:</strong> A popular JavaScript library used for making HTTP requests in React applications.</p></li>
<li><p><strong>JWT (JSON Web Token):</strong> A compact, URL-safe means of representing claims to be transferred between two parties, commonly used for authentication in React applications.</p></li>
<li><p><strong>GraphQL:</strong> A query language for APIs that allows clients to request only the data they need. It is an alternative to REST and is often used with React.</p></li>
<li><p><strong>Storybook:</strong> An open-source tool for developing UI components in isolation, providing a visual way to test and showcase components.</p></li>
<li><p><strong>Redux DevTools:</strong> A set of developer tools that help with debugging and inspecting the state and actions in a Redux application.</p></li>
<li><p><strong>Jest:</strong> A JavaScript testing framework often used with React for writing unit tests and ensuring the reliability of code.</p></li>
<li><p><strong>Enzyme:</strong> A JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse React components' output.</p></li>
<li><p><strong>CI/CD (Continuous Integration/Continuous Deployment):</strong> Practices and tools that aim to automate the process of testing and deploying code changes in a React application.</p></li>
</ol></div>
Simple task list application
Certainly, let's consider a real-time example using JavaScript ES6 that involves fetching data from a public API, manipulating the DOM, handling events, and incorporating a breakpoint for debugging purposes. In this example, we'll use the JSONPlaceholder API and create a simple task list application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task L
Storing and Testing State in localStorage with React
<div><p>Managing state in a React application is a common challenge, and when it comes to persisting that state across sessions, localStorage is a handy solution. In this post, we'll explore a custom React hook, <code>useSemiPersistentState</code>, that simplifies the process of storing and testing state in localStorage.</p>
<h2>
The <code>useSemiPersistentState</code> Hook
</h2>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">Dispatch</span><span class="p">,</span> <span class="nx">SetStateAction</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">useSemiPersistentState</span> <span class="o">=</span> <span class="p"><</span><span class="nc">T</span><span class="p">></span>(
key: string,
initialValue: T
): [T, Dispatch<span class="p"><</span><span class="nc">SetStateAction</span><span class="err"><</span><span class="na">T</span><span class="p">></span>>] => <span class="si">{</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">state</span><span class="p">,</span> <span class="nx">setState</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="o"><</span><span class="nx">T</span><span class="o">></span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">storedState</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="nx">key</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">storedState</span> <span class="p">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">storedState</span><span class="p">)</span> <span class="p">:</span> <span class="nx">initialValue</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="c1">// Handle parsing error, fallback to initial value</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="s2">Error parsing localStorage data:</span><span class="dl">"</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">initialValue</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="c1">// Save the value to localStorage whenever it changes</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="nx">key</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="nx">state</span><span class="p">));</span>
<span class="p">},</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">state</span><span class="p">]);</span>
<span class="k">return</span> <span class="p">[</span><span class="nx">state</span><span class="p">,</span> <span class="nx">setState</span><span class="p">];</span>
<span class="si">}</span>;
export <span class="si">{</span> <span class="nx">useSemiPersistentState</span> <span class="si">}</span>;
</code></pre>
</div>
<p>The <code>useSemiPersistentState</code> hook makes it easy to manage state in your React components while ensuring its persistence between page reloads.</p>
<h2>
Usage and Example
</h2>
<p>Let's consider a scenario where we want to persist the user's theme preference. Here's how you can use the hook:<br>
</p>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useSemiPersistentState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1"><relative-path-to-your-hook-file></span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">ThemeSelector</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">theme</span><span class="p">,</span> <span class="nx">setTheme</span><span class="p">]</span> <span class="o">=</span> <span class="nf">useSemiPersistentState</span><span class="p">(</span><span class="dl">'</span><span class="s1">theme</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">toggleTheme</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">newTheme</span> <span class="o">=</span> <span class="nx">theme</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">dark</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span><span class="p">;</span>
<span class="nf">setTheme</span><span class="p">(</span><span class="nx">newTheme</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">p</span><span class="p">></span>Current Theme: <span class="si">{</span><span class="nx">theme</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">toggleTheme</span><span class="si">}</span><span class="p">></span>Toggle Theme<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">ThemeSelector</span><span class="p">;</span>
</code></pre>
</div>
<p>In this example, the <code>ThemeSelector</code> component effortlessly maintains the theme preference in <code>localStorage</code>, allowing the theme to persist across page reloads.</p>
<h2>
Testing Made Simple
</h2>
<p>Testing stateful components becomes easier with this hook. You can mock the <code>localStorage</code> object in your tests to simulate different scenarios and ensure that your components behave as expected.</p>
<h2>
Conclusion
</h2>
<p>The <code>useSemiPersistentState</code> hook provides an elegant solution for handling semi-persistent state in React applications. Whether you're building a theme switcher or saving user preferences, this hook simplifies the process and enhances the user experience.</p></div>
Trip Planner Ai
Revolutionize your journeys with Trip Planner AI—an innovative tool that crafts personalized, optimized itineraries for your next adventure. Whether it's a vacation, work, or everyday escapade, our advanced algorithms consider your preferences in explore-sights, dining, and lodging to create the ultimate travel plan. Unleash the power of Instagram reels and TikToks to discover hidden gems, seamlessly integrating them into your bespoke adventure. Say farewell to planning stress and embrace tailor
JavaScript Shorthand Techniques
In today's fast-paced world of web development, efficiency and readability are essential. Have you ever found yourself wading through lines and lines of JavaScript, feeling overwhelmed? Or perhaps, while coding, you've wished for a more concise way to express common patterns. Bloated code not only reduces readability but can also impact performance and maintainability.
Long-winded JavaScript expressions can:
Increase Development Time: Writing and reading extended versions of common operation
44 React Frontend Interview Questions
IntroductionWhen it comes to interviewing for a React frontend developer position, being well-prepared for the technical questions is crucial. React has become one of the most popular JavaScript libraries for building user interfaces, and employers often focus on assessing a candidate's understanding of React's core concepts, best practices, and related technologies. In this article, we will explore a comprehensive list of questions commonly asked during React frontend developer interviews. By f
Image selector form using html, css, javascript
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
Image selector form using html, css, javascript
For full source code visit : https://freecodez.com/post/gvt3i5t
<!-- https://freecodez.com -->
<div class="container">
<div class="header" id="img" onclick
DevIdiot! Weekly Newsletter Vol. 9 | WebIdiot.Online
DevIdiot! Weekly Newsletter Vol.9This is a post from the host of WebIdiot.Online. Welcome to the latest edition of our DevIdiot! newsletter.The content in this newsletter is meant to help you stay up-to-date on the latest trending articles on our website. If you find these resources helpful consider subscribing to our newsletter and get the latest content directly to your inbox each week.Latest Trending ArticlesForm validation in React is made simpler by using JavaScript librariesA Web developer
Form validation in React is made simpler by using JavaScript libraries
A Web developer’s step-by-step guide to implementing JavaScript libraries for validating forms.Table of ContentIntroductionPrerequisiteWhat is form validationCreating a form in ReactTop 4 form validation librariesValidating a React form with a libraryConclusionIntroductionAlmost all available website in the world has a form. Therefore it is important to get the correct details filled in those forms. In this guide, we will learn what form validation is and how to validate forms more easily by usi
Threado AI
"We want to empower community builders, startups, makers, and creators like you with the tools to help you provide support to your customers wherever they are. That’s why we built Threado AI, the intelligent sidekick that provides instant support anywhere - Slack, Discord, inside your product, and even on your website."With Threado AI you can:🤖 Train AI with your knowledge base, support URLs, PDFs, and community conversations🤝 Install it on Slack, Discord or embed it on your webpage and let it i
Creating an animated navbar inspired by Vercel for my personal site using React (Next.js v13), Framer-Motion, and Tailwind CSS
While building web apps, I usually like to take inspiration from other sites. I'm always fascinated by beautifully designed websites with subtle yet cool animations. Vercel is one of those sites I really like as a web developer. Also, Vercel's design & frontend team is one of the best out there. So, a few days back while I was deploying one of my apps on Vercel, I noticed there navbar component had a subtle hover animation which felt really smooth. Basically, what's happening was that each n