Wordpress is a famous CMS, but it&#39;s far from &quot;complete&quot; out of the box.
Wordpress is born to solve the &quot;blog&quot; problem, so the native CMS provides only blog functionalities.
Over the years, Wordpress started to be used for building websites that are not traditional blogs, and this trend changed the ecosystem of the platform, which saw emerging plugins, each adding specific functionality to the CMS.
Nowadays, the ecosystem is the platform!
<h2>Why do you need Worpress plugins?</h2>
Your website needs good SEO tools? It&#39;s better to use a dedicated SEO plugin ...
Your website is for a business that sells services, and each service has the same structure of information? You need dynamic data plugins...
Your website lets the user contact you with a form? You need a form plugin...
You... get the idea!
The Wordpress CMS capabilities of the early days are pretty much the same as what Wordpress offers today.
The ecosystem is the platform.
The platform is made of plugins.
You need to know them (and do not abuse)!



<h2>Collection of Plugins</h2>
Here is a list of the most used Wordpress plugins (based on my perspective). I update the list regularly. 
You can add your own plugins to the list by following the instructions that you find in the link. 
<a target="_blank" href="https://elastic-cymbal-9af.notion.site/03bdc660ec38433aaf43f792f13fd9b0?v=dd2a7bfbe2f74038882f136af3ca221c&pvs=74">Top Wordpress Plugins</a>

Interactive collection of most famous and used Wordpress plugins. Included SEO, Dynamic Data, Marketing and Page Builder

Top Wordpress plugins grouped by what they do

Imagine you&#39;re building a reusable <code>&lt;Section&gt;</code> component with React. The Section component renders an HTML <code>&lt;div&gt;</code> tag because you hardcoded it. However, in some cases, you might want to use an other tag instead, for example a <code>&lt;section&gt;</code> HTML tag.
This is a typical scenario when you want your HTML to be more semantic and SEO friendly.
The solution is to let the consumer decide which HTML tag should be used to render the component. 
<h2>The &quot;as&quot; prop</h2>
This is nothing new. It&#39;s an industry standard &quot;approach&quot; that allows you to dynamically decide which HTML tag should be used to render the component. A lot of React Components library use it, like Chakra UI and Material UI.
Without the &quot;as&quot; prop, you&#39;d need to create separate components for each use case, and it makes no sense. Don&#39;t do it!
This is how you consume the &quot;as&quot; prop
<pre><code class="hljs language-tsx">import { Section } from &#x27;./section&#x27;;

const App = () =&gt; {
 return (
 &lt;div&gt;
 &lt;Section as=&quot;section&quot;&gt;CTA&lt;/Section&gt;
 &lt;Section as=&quot;article&quot;&gt;My Article&lt;/Section&gt;
 &lt;Section&gt;This use the default HTML tag of the component&lt;/Section&gt;
 &lt;/div&gt;
 );
};
</code></pre>And this is the component definition
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: React.ElementType,
 children: React.ReactNode,
}

export const Section = (props: SectionProps) =&gt; {

 const { as: Tag = &#x27;div&#x27;, children } = props;

 return &lt;Tag&gt;{children}&lt;/Tag&gt;;

}
</code></pre><h2>Typescript Support for the &quot;as&quot; prop</h2>
React helps us with Typescript types. Using the typescript&#39;s <code>React.ElementType</code> type, provided by React, you will obtain autocomplete for your IDE, like this
<img src="/blog/dynamic-html-tag-in-react-components-with-the-as-prop/as-prop-autocomlete-ide.png" alt="VS Code autocomplete suggestion for the &quot;as&quot; prop">
As an alternative to <code>React.ElementType</code> you can use 
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: keyof JSX.IntrinsicElements,
 children: React.ReactNode,
}
</code></pre>or
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: keyof HTMLElementTagNameMap,
 children: React.ReactNode,
}
</code></pre>

Learn how to add the "as" prop to your React Component, to add dynamic HTML tags decided by the consumer Component