React Vue Angular to HTML cheatsheet

{ variable }{ metadata.subtitle.value }

{{ variable }}{{ metadata.subtitle.value }}

{{ variable }}{{ metadata.subtitle.value }}

< ... name={variable}><a href={`https://twitter.com/${author.twitter.value}`}>

< ... :name="variable"><a :href="`https://twitter.com/${author.twitter.value}`">

< ... [attr.name]="variable"><a [attr.href]="`https://twitter.com/${author.twitter.value}`">

< ... dangerouslySetInnerHTML={{__html: variable}}></...><div dangerouslySetInnerHTML={{__html: article.teaser}}></div>

< ... v-html="variable"></...><div v-html="article.teaser"></div>

< ... [innerHTML]="variable"></...><div [innerHTML]="article.teaser"></div>

const components = collectionVariable.map((item) => <Component data={item} key={item.uniqueKey} />);
...
<div>{components}</div>const articleComponents = articles.map((article) => <Article data={article} key={article.id} ... />);
...
<div>{articleComponents}</div>

< ... v-for="item in collectionVariable" :key="item.uniqueKey"><article v-for="article in articles" :key="article.id" ... >

< ... *ngFor="let item of collectionVariable"><article *ngFor="let article of articles" ... >

const components = collectionVariable.map((item, index) => <Component data={item} key={item.uniqueKey} index={index} />);
...
<div>{components}</div>const articleComponents = articles.map((article) => <Article data={article} key={article.id} index={index} ... />);
...
<div>{articleComponents}</div>

< ... v-for="(item, index) in collectionVariable" :key="item.id"><article v-for="(article, index) in articles" :key="article.id" ... >

< ... *ngFor="let item of collectionVariable; let i = index"><article *ngFor="let article of articles; let i = index" ... >

{variable !== null && <... >}{data.length > 0 && <div> ... </div>}

<... v-if="variable !== null"><div v-if="data.length > 0"> ... </div>

<... *ngIf="variable !== null"><div *ngIf="data.length > 0"> ... </div>

{variable !== null && <... >}
{variable == null && <... >}{data.length > 0 && <div> ... </div>}
{data.length == 0 && <div>Loading...</div>}

<... v-if="variable !== null"> ...
<... v-else><div v-if="data.length > 0"> ... </div>
<div v-else>Loading...</div>

<... *ngIf="variable !== null;else codename"> ...
<ng-template #codename><div *ngIf="data.length > 0;else show_loading"> ... </div>
<ng-template #show_loading>Loading...</ng-template>

<... className="classname"><div className="sidebar__inner">

<... class="classname"><div class="sidebar__inner">

<... class="classname"><div class="sidebar__inner">

<component componentVariable={variable}><links author={author}>

<component :componentVariable="variable"><links :author="author">

<component [componentVariable]="variable"><links [author]="author">