React Vue Angular to HTML cheatsheet

Download printable version: React (PDF, 0.9MB), Vue.js (PDF, 0.7MB), Angular (PDF, 0.7MB)

ReactVueAngular
{ variable }{ metadata.subtitle.value }
{{ variable }}{{ metadata.subtitle.value }}
{{ variable }}{{ metadata.subtitle.value }}
outputting data into HTML
< ... 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}`">
outputting data into HTML attributes
< ... 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>
outputting HTML
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" ... >
iterating over data sets
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" ... >
iterating over data sets with 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>
rendering conditional markup
{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>
rendering conditional markup including else branch
<... className="classname"><div className="sidebar__inner">
<... class="classname"><div class="sidebar__inner">
<... class="classname"><div class="sidebar__inner">
adding standard class attribute
<component componentVariable={variable}><links author={author}>
<component :componentVariable="variable"><links :author="author">
<component [componentVariable]="variable"><links [author]="author">
passing data to child components