DEV Community: michele

My React Journey: Day 3 – Rendering Lists with Angular @for and React .map()

michele — Sun, 31 Aug 2025 19:08:51 +0000

Hello everybody, welcome back to Day 3 of my React Journey!
Yesterday we rendered a simple header, but today we’re leveling up:

We’ll take a typed array of shopping items, render it inside our component, and add a delete button with an icon.
This will show how Angular and React approach list rendering — Angular with the new @for syntax, React with the standard .map() method.

I’ve also updated the CSS styles for the shopping cart, but to keep the code clean we’ll skip them here — you can find the full styles in the repository
.

Angular 19 Application

In Angular we start by defining a TypeScript type for our shopping items:

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

We store an array of items inside a signal, and render them with Angular’s new control-flow syntax @for.
For the delete button, we add an Angular Material remove icon.

Code: ShoppingCartComponent

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { matRemove } from '@ng-icons/material-icons/baseline';

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

@Component({
  selector: 'app-shopping-cart',
  imports: [NgIcon],
  viewProviders: [provideIcons({ matRemove })],
  template: `
    <h1>{{ header() }}</h1>
    <ul>
      @for (item of items(); track item.id) {
        <div class="list-item">
          <li>{{ item.id }} - {{ item.label }}</li>
          <button class="btn btn-cancel" aria-label="Delete">
            <ng-icon name="matRemove"></ng-icon>
          </button>
        </div>
      }
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  header = signal('Shopping List App - Angular 19');
  items = signal<Item[]>([
    { id: 1, label: '10 Apples', purchased: false, higherPriority: false },
    { id: 2, label: '5 Bananas', purchased: false, higherPriority: false },
  ]);
}

Angular key points:

signal<Item[]>→ reactive array of items.

@for (item of items(); track item.id) → Angular’s modern, optimized replacement for *ngFor.

track item.idensures stable identity for efficient DOM updates.

ChangeDetectionStrategy.OnPush makes the component even more performant.

React

React follows the same logic, but instead of structural directives, we rely on plain JavaScript array methods.
We’ll define a type Item, create the array, and use .map() to loop through the items.

Code: ShoppingCartComponent

import { Icon } from "@iconify/react";
import "./ShoppingCart.css";

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

export function ShoppingCart() {
  const header: string = "Shopping List App - React";

  const items: Item[] = [
    { id: 1, label: "10 Apples", purchased: false, higherPriority: false },
    { id: 2, label: "5 Bananas", purchased: false, higherPriority: false },
  ];

  return (
    <>
      <h1>{header}</h1>
      <ul className="shopping-list">
        {items.map((item) => (
          <div key={item.id} className="list-item">
            <div className="list-item-content">
              <span className="item-text">
                {item.id} - {item.label}
              </span>
            </div>
            <button className="btn btn-cancel" aria-label="Delete">
              <Icon icon="ic:baseline-remove" />
            </button>
          </div>
        ))}
      </ul>
    </>
  );
}

React key points for Angular developers:

type Item→ same TypeScript typing as in Angular.

items.map(...)→ React’s way of looping over data, equivalent to Angular’s @for.

key={item.id} → same purpose as track item.id in Angular. It helps React efficiently update the DOM.

JSX interpolation {} is the React counterpart of Angular’s {{}}.

The styles are placed in ShoppingCart.css — see the repository
for details.

Summary

Day 3 upgrade: from a single header to a typed, rendered list of items.

Angular: used signals + @for loop with tracking for performance.

React: used a TypeScript type + .map() to iterate items with keys.

Both approaches highlight the same principle: data drives the UI.

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

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

michele — Sun, 31 Aug 2025 09:34:02 +0000

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

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');
}

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 {}

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>
    </>
  );
}

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;

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

My React Journey: Day 1- Create a new project, add dependencies, and global CSS styles

michele — Sat, 30 Aug 2025 10:05:43 +0000

Hello everyone

I'm Michele Malagnini, an Angular developer. For my next article, I want to help fellow Angular developers learn React. To do this, I'm drawing inspiration from a cool series of articles where a developer Connie Leung built a basic app in Vue and then ported it to Svelte and Angular. I'm going to follow a similar path, taking his original Angular application and rebuilding it from the ground up in React, all while using TypeScript.

We are going to do a simple CRUD application a shopping cart that adds and delets items from it

*1. Create a new project *

Angular 19 application

ng new angular-project-example
select css or what you want for css style
do not use ssr and ssg Type no

cd angular-project-example
npm i
ng serve
go to localhost://4200

React

npm create vite@4         # install version Vite 4.x 
name: react-project-example
react -> typescript

cd react-project-example
npm i

*2. Install Icon library *

Like a Connie Leung article I would like to use icons to make the examples more creative :-P. I installed Iconify for react and ng-icons for Angular.

Angular 19 application

npm install --save-exact @ng-icons/core @ng-icons/materialicons

React

npm i @iconify/react

*3. edit global stylesheet *

Angular 19 application

Angular 19 application
Update the global styles in styles.css
copy the file src/styles.css

React

create the file src/styles/global.css
copy this file src/styles/global.css

Import it once in the app's bootstrap.

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

// impor here the global stylesheet
import './styles/global.css'

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

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

Hot vs Cold Observables in Angular: Understanding the Difference

michele — Mon, 14 Oct 2024 09:41:42 +0000

If you've ever wondered what makes RxJS Observables so powerful in Angular, and more importantly, what makes some of them "hot" or "cold," then you're in the right place. Today, we'll break down the basics of Observables, how they fit into the Angular ecosystem, and take a deep dive into the differences between hot and cold Observables.

What Are Observables?

First things first: Observables are core components in RxJS (Reactive Extensions for JavaScript), which Angular uses heavily for handling asynchronous events like HTTP requests, user input, or even WebSocket data. An Observable is a stream of data that can be processed asynchronously—think of it as a river carrying data packets instead of water. You subscribe to the Observable to start receiving data, much like you would scoop up water from a river when you're ready.

In Angular, Observables are used extensively, particularly with services like HttpClient for making API calls, as well as in reactive forms or event handling to allow seamless and powerful data flow management.

The Real Question: Hot vs Cold Observables

The real magic starts when you understand the difference between hot and cold Observables. This distinction is at the heart of RxJS and is key to knowing how and when to use them in your Angular applications.

Cold Observables

Cold Observables are like a personal concert—they don't start playing until you arrive and buy a ticket. In other words, a cold Observable only starts emitting values when you subscribe to it. If two people subscribe at different times, they each get their own independent stream of values.

Example:

import { Observable } from 'rxjs';

const coldObservable = new Observable(observer => {
  observer.next('Hello');
  setTimeout(() => observer.next('World!'), 1000);
});

// Subscriber 1
coldObservable.subscribe(value => console.log('Subscriber 1:', value));

// Subscriber 2 (with delay)
setTimeout(() => {
  coldObservable.subscribe(value => console.log('Subscriber 2:', value));
}, 500);

In this example, Subscriber 2 will receive "Hello" and "World!" with a delay. Each subscriber essentially gets a unique concert.

Hot Observables

Hot Observables, on the other hand, are like a radio broadcast—it's playing whether you're listening or not. If you tune in late, you'll miss whatever has already been broadcast. They start emitting values as soon as they're created, regardless of whether anyone is subscribed.

Example:

import { Subject } from 'rxjs';

const hotObservable = new Subject();

hotObservable.next('Broadcast started');

// Subscriber 1 (gets everything)
hotObservable.subscribe(value => console.log('Subscriber 1:', value));

hotObservable.next('Live update 1');

// Subscriber 2 (misses the first value)
hotObservable.subscribe(value => console.log('Subscriber 2:', value));

hotObservable.next('Live update 2');

Subscriber 1 catches everything, but Subscriber 2 misses the initial broadcast and only catches updates starting from the point it subscribes.

When to Use Which?

Cold Observables are great for tasks like HTTP requests, where each subscriber expects a unique response—like fetching user data from an API. Every time you subscribe, you want a fresh stream that starts from the beginning.

Hot Observables are ideal for scenarios like live updates, shared streams, or user interactions. Think about a WebSocket connection or a user action that multiple parts of your application are listening to simultaneously.

Bringing It All Together in Angular

In Angular, knowing whether you're dealing with a hot or cold Observable is crucial for understanding the flow of data. The HttpClient service, for example, returns cold Observables, meaning every time you subscribe, the HTTP request is sent again.

On the other hand, you can turn an Observable hot using subjects like ReplaySubject or BehaviorSubject to multicast data. This way, multiple components can share the same data stream without re-triggering events.

Wrap-Up

Hot and cold Observables may seem like a tricky concept at first, but once you get the hang of it, you'll find they add incredible flexibility to your applications. Remember—cold Observables are unique streams for every subscriber, while hot Observables are shared experiences that emit continuously. Mastering these will make you a pro at handling async operations and data flow in Angular!

Happy coding, and keep those Observables flowing!

Unlocking Complex Structures in JavaScript: A Guide for Front-End Developers

michele — Sun, 06 Oct 2024 14:53:09 +0000

Hey there, fellow devs! If you've ever found yourself tangled in the web of JavaScript arrays and objects, you're not alone. Navigating these complex data structures is key to writing efficient, clean code. So let's break it down together, step by step, and keep things fun and relatable.

Getting Started: Simple Examples

Arrays

Think of an array as a simple list where you can keep a bunch of stuff in one place. Like this:

javascript

let fruits = ['Apple', 'Banana', 'Cherry'];

// Accessing elements
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry

Easy, right? You just grab what you need by its position in the list.

Objects

Now, objects are like a toolbox with labeled drawers. Each drawer has a name and some value inside. Check it out:

javascript

let person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

// Accessing properties
console.log(person.name); // Output: John
console.log(person.city); // Output: New York

So, if you need John’s age or where he lives, you just call it by name. Super handy!

Going Deeper: Advanced Examples

Nested Arrays

Alright, sometimes you’ve got arrays within arrays (kind of like an onion with layers). Here’s how you work with those layers:

javascript

let numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

// Accessing nested elements
console.log(numbers[1][2]); // Output: 6
console.log(numbers[2][0]); // Output: 7

Just think of it like coordinates on a map. The first number is the main list, and the second number gets you the specific item.

Nested Objects

Objects can get pretty deep too—like a box inside another box. Here’s an example:

javascript

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    specs: {
        engine: '1.8L',
        horsepower: 132
    }
};

// Accessing nested properties
console.log(car.specs.engine); // Output: 1.8L
console.log(car.specs.horsepower); // Output: 132

It’s like looking inside the specs drawer of the car toolbox to find out what’s under the hood.

Complex Structures

Let's take it up a notch with more intricate structures.

Taking It Up a Notch: Complex Structures

Arrays of Objects

In the real world, you'll often deal with arrays packed full of objects. Picture a class roster full of students:

javascript

let students = [
    {name: 'Alice', grade: 'A'},
    {name: 'Bob', grade: 'B'},
    {name: 'Charlie', grade: 'C'}
];

// Accessing elements in an array of objects
console.log(students[1].name); // Output: Bob
console.log(students[2].grade); // Output: C

Here, each student is an object, and they’re all in one big array. Just pick the student you want and grab their info!

Objects with Arrays

And it works the other way too—objects that have arrays inside. It’s great for keeping lists organized:

javascript

let library = {
    name: 'Central Library',
    books: ['JavaScript: The Good Parts', 'Eloquent JavaScript', 'You Don’t Know JS']
};

// Accessing array elements within an object
console.log(library.books[0]); // Output: JavaScript: The Good Parts
console.log(library.books[2]); // Output: You Don’t Know JS

Think of the library object as the building, and inside it, there’s a shelf full of books you can easily reference.

Wrapping Up

Getting comfortable with these complex structures is a game-changer for front-end development. When you know how to navigate through nested arrays and objects, you’re way better equipped to handle data like a pro. Just keep practicing, and soon enough, it’ll be second nature—like riding a bike, but for JavaScript!

Happy coding, and see you in the next guide!