loading...
Cover image for More JSX For Angular Developers

More JSX For Angular Developers

daviddalbusco profile image David Dal Busco Originally published at Medium ・4 min read

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Fifteen days left until hopefully better days.


It is Saturday, I cleaned my flat, I could begin the writing of my today’s challenge blog post 😉.

Yesterday I published a brief introduction to JSX for Angular Developers. When I was about to finish writing, I noticed that there were still some materials which can be presented, that’s why I follow up with some more information regarding JSX, the syntax extension to JavaScript.


Data Binding

I should have mentioned it in my yesterday’s post, but as Angular use its own templating syntax, the one from JSX differs a bit.

Commonly you use double braces {{}} to bind values or brackets [] to set for examples conditional classes or pass variables to a component.

<div *ngIf="odd" [class.danger]="count > 1">{{count}}</div>

<app-my-component count="{{count}}"></app-my-component>

Meanwhile with JSX, you are going to use single braces {}. Furthermore we can also take advantages of the render or return functions to use, if we would like, temporary variables to make the code even a bit cleaner by avoiding some long inline expressions.

The above coded with Stencil:

render() {
  const myClass = this.count > 1 ? 'danger' : undefined;

  return <Host>
    <div class={myClass}>{this.count}</div>

    <my-component count={this.count}></my-component>
  </Host>;
}

Funny thing, you will not use class to define such in React but rather className .

return (
    <>
        {renderLabel()}

        <MyComponent count={props.count}></MyComponent>
    </>
);

function renderLabel() {
    const myClass = props.count > 1 ? 'danger' : undefined;

    return <div className={myClass}>{props.count}</div>
}

Loops

Is it in or of or let , what’s the proper syntax of *ngFor? It has always been for me one of these things for which I have to think twice before being sure, what’s the proper way of writing it 😅.

<p *ngFor="let value of values;">{{value}}</p>

While with JSX, there is not particular templating structure to remember, but rather how to use the array map() function.

Moreover, it is also worth to notice that if your list or collection aims to be dynamic, it is mandatory to add a key attribute to each entries to preserve the ordering.

Regardless if Stencil or React, beside the object reference this for Stencil, the code is the same.

render() {
  return this.values.map((entry, index) => {
    return <p key={index}>{entry}</p>
  });
}

Content Projection

Even though it is maybe not something you probably use, or at least I use, every day, it is possible to pass content to an Angular component using ng-content .

<ng-content select="[start]"></ng-content>

<ng-content select="[end]"></ng-content>

Doing so, the component becomes more reusable as it is possible to use it with some more flexibility regarding its content.

<app-my-component>
  <h1 start>Hello</h1>
  <h2 end>World</h2>
</app-my-component>

To the contrary, content projection is something you may, or at least I may, use really often with Stencil because slot are a core features of the Web Components.

render() {
  return <Host>
    <slot name="start"></slot>
    <slot name="end"></slot>
  </Host>;
}

They can be use “anywhere”, with or without any modern frontend framework. That’s why they, Web Components, really shine to my eyes.

<my-component>
  <h1 slot="start">Hello</h1>
  <h2 slot="end">World</h2>
</my-component>

In React, a common way to solve composition is done through the use of the default special children prop which would allow you to pass multiple children to a component.

import React, {ReactNode} from 'react';

interface MyProps {
    children: ReactNode;
}

const MyComponent: React.FC<MyProps> = (props: MyProps) => {

    return <>
        {props.children}
     </>;
};

export default MyComponent;

Events

Finally, the Angular syntax expect parenthesis as declarations for events interactions.

<button (click)="inc()">Increment</button>

JSX is to some extension closer to vanilla JavaScript as the events are prefixed with the on keyword followed by a function’s call. Note again, that beside this , the syntax is the same for both Stencil and React.

render() {
  return <button onClick={() => this.inc()}>Increment</button>
}

Summary

My two blog posts were really light introductions to JSX and I am pretty sure that you are eager to discover more technical details about it. That’s why I would say, give either Stencil or React a try, or even better, give them both a try as they both use the JSX syntax. It makes kind of accessible the switch from one to the other without too much pain.

Stay home, stay safe!

David

Cover photo by Luyi Yang on Unsplash

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

Posted on by:

daviddalbusco profile

David Dal Busco

@daviddalbusco

Creator of DeckDeckGo | Organizer of the Ionic Zürich Meetup

Discussion

markdown guide
 

Typescript + React is the best thing ever!

 

Yep TSX, React or Stencil, is pretty slick!