Below are several examples that might be helpful if you're familiar with Angular templates and are moving to JSX or hyperscrpt (AKA Javascript.)
Hyperscript imlementations vary, but are fairly similar for the most part. In the examples below, the function h()
represents the hyperscript function. (For example React's React.createElement()
or Mithril's m()
.)
Note that when using hyperscript with React, the second parameter must always be the element attributes or component props (or null if none.) With Mithril, this parameter can be omitted. Examples below follow Mithril's convention.
Angular:
<p>Hello, {{user.firstName}}</p>
<p>1 + 1 = {{1 + 1}}</p>
JSX:
<p>Hello, {user.firstName}</p>
<p>1 + 1 = {1 + 1}</p>
Hyperscript:
h('p', `Hello, ${user.firstName}`),
h('p', `1 + 1 = ${1 + 1}`)
Angular:
<img [src]="heroImageUrl">
<button [disabled]="isDisabled">Button Text</button>
JSX:
<img src={heroImageUrl}>
<button disabled={isDisabled}>Button Text</button>
Hyperscript:
h('img', {src: heroImageUrl}),
h('button', {disabled: isDisabled}, 'Button Text')
Angular:
<div class="article">Article</div>
JSX:
<div class="article">Article</div>
Hyperscript:
h('.article', 'Article')
Angular:
<div [class]="article">Article</div>
JSX:
<div class={article}>Article</div>
Hyperscript:
h('div', {class: article}, 'Article')
Note that with React you must use className
. Mithril will accept class
or className
.
Angular:
<div [style.color]="isSpecial ? 'red' : 'green'">The Hero</div>
JSX:
<div style={color: isSpecial ? 'red' : 'green'}>The Hero</div>
Hyperscript:
h('div', {style: {color: isSpecial ? 'red' : 'green'}}, 'The Hero')
Angular:
<button (click)="deleteHero()">Delete hero</button>
JSX:
<button onclick={deleteHero()}>Delete hero</button>
Hyperscript:
h('button', {onclick(){deleteHero()}}, 'Delete hero')
Angular:
<div *ngFor="let hero of heroes">{{hero.name}}</div>
JSX:
heroes.map(hero => <div>{hero.name}</div>)
Hyperscript:
heroes.map(hero => h('div', hero.name))
Angular:
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
JSX:
heroes.map((hero, i) => <div>{i + 1} - {hero.name}</div>)
Hyperscript:
heroes.map((hero, i) => h('div', `${i + 1} - ${hero.name}`))
Angular:
<myComponent [name]="Zeke"></myComponent>
JSX:
<myComponent name="Zeke"/>
Hyperscript:
h(myComponent, {name: 'Zeke'})
Angular:
<div>
<myComponent [name]="Zeke">
<myChildComponent/>
</myComponent>
</div>
JSX:
<div>
<myComponent name="Zeke">
<myChildComponent/>
</myComponent>
</div>
Hyperscript:
h('div',
h(myComponent, {name: 'Zeke'},
h(myChildComponent)
)
)
Angular:
<div *ngIf="isActive">Is active</div>
JSX:
isActive && <div>Is active</div>
Hyperscript:
isActive && h('div', 'Is active')
Angular:
(See swtich
below.)
JSX:
<div>{
isAlive
? <p class="green">The hero is alive.</p>
: <p class="red">The hero is dead.</p>
}</div>
Hyperscript:
h('div', isAlive
? h('p.green', 'The hero is alive.')
: h('p.red', 'The hero is dead.')
)
Angular:
<div [ngSwitch]="hero.emotion">
<happy-hero *ngSwitchCase="'happy'" [hero]="hero"></happy-hero>
<sad-hero *ngSwitchCase="'sad'" [hero]="hero"></sad-hero>
<confused-hero *ngSwitchCase="'confused'" [hero]="hero"></confused-hero>
<unknown-hero *ngSwitchDefault [hero]="hero"></unknown-hero>
</div>
JSX:
<div>{
hero.emotion === 'happy' ? <happyHero hero={hero}/>
: hero.emotion === 'sad' ? <sadHero hero={hero}/>
: hero.emotion === 'confused' ? <confusedHero hero={hero}/>
: <unknownHero hero={hero}/>
}</div>
Hyperscript:
h('div',
hero.emotion === 'happy' ? h(happyHero, {hero})
: hero.emotion === 'sad' ? h(sadHero, {hero})
: hero.emotion === 'confused' ? h(confusedHero, {hero})
: h(unknownHero, {hero})
)
Angular:
<p>The hero's name is {{hero?.name}}</p>
JSX:
<p>The hero's name is {hero ? hero.name : ''}</p>
Hyperscript:
h('p', `The hero's name is ${hero ? hero.name : ''}`)