DEV Community

michele
michele

Posted on

My React Journey: Day 2- Create a component and use expression in template

#angular #react #typescript #webdev

Hello everybody, this is my second React journey (Day 2).
Today we will create a component both in Angular and React, and we’ll see how to interpolate an expression (a variable) inside the template.

Angular 19 application

In Angular we can use angular cli command to generate a component

ng g c shopping-cart/shoppingCart --flat
Enter fullscreen mode Exit fullscreen mode

Then delete shopping-cart.component.html, shopping-cart.component.scss, and shopping-cart.component.spect.ts.

We will use a inline templat and we will add:

1)ChangeDetectionStrategy.OnPush

This is a performance optimization.
By default, Angular checks every component whenever something changes. With OnPush, Angular only checks the component when an input changes or when an event inside it is triggered.
This reduces unnecessary checks and speeds up large apps.

2)header = signal('Shopping List App - Angular');

Signals are Angular’s new reactivity model. A signal holds a value and notifies Angular whenever it changes. Any template bound to this signal will automatically update.
Here, the signal holds the string "Shopping List App - Angular".

This is the code component file

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

@Component({
 selector: 'app-shopping-cart',
 imports: [],
 template: `
   <h1>{{ header() }}</h1>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
   header = signal('Shopping List App - Angular');
}
Enter fullscreen mode Exit fullscreen mode

Finally, add the component to app.component.ts:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';

@Component({
 selector: 'app-root',
 imports: [ShoppingCartComponent],
 template: '<app-shopping-cart />',
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

Now the app shows the header inside an <h1> tag.

React

Unlike Angular, React doesn’t have a CLI that auto-generates components with decorators and separate files for HTML/CSS.
In React with TypeScript, every component is simply a TypeScript function that returns JSX.
The file extension is .tsx (TypeScript + JSX), which allows us to write both logic and template in the same file.

Step 1 – Creating the component

Inside the src/ folder, create a components/ directory.

Inside it, create the file ShoppingCartComponent.tsx.

Code: ShoppingCartComponent.tsx

export function ShoppingCart() {
  const header = "Shopping Cart";
  return (
    <>
      <h1>{header}</h1>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Explanation for Angular developers:

const header: string → this is just a plain TypeScript variable. No signal() or @Input decorator needed.

<h1>{header}</h1> → the curly braces {} in JSX are the React equivalent of Angular’s {{ header() }} syntax for interpolation.

JSX looks like HTML, but it’s actually TypeScript/JavaScript that compiles down to React function calls.

Step 2 – Using the component in the root

In App.tsx, import the component and render it inside the template:

Code: App.tsx

import { ShoppingCart } from "./components/ShoppingCartComponent";

function App() {
  return (
    <>
      <ShoppingCart />
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Angular → React analogy:

App.tsx = Angular’s AppComponent.

<ShoppingCart /> = Angular’s <app-shopping-cart />.

No imports array or NgModule setup is required. You just import the function and use it as a JSX tag.

Summary

In Angular, we created a component with signals and ChangeDetectionStrategy.OnPush.

In React + TypeScript, we built a function component in .tsx that returns JSX and interpolates variables using {...}.

The ShoppingCart component was then imported and rendered inside App.tsx, just like adding a child component to Angular’s AppComponent.

Github Repos:
https://github.com/michelemalagnini/angular-project-example
https://github.com/michelemalagnini/react-fundamental

Top comments (0)