React Components

(JavaScript/TypeScript with JSX)

Component Definition

React components are typically defined as JavaScript (or TypeScript) functions that return JSX (JavaScript XML), which is a syntax extension allowing you to write HTML-like structures directly within your JavaScript code. React 19 introduces a new "Component Syntax" for function components, making them look a bit more like class components but still returning JSX.

// MyComponent.js (Functional Component with JSX)
import React, { useState } from 'react';

function MyComponent() {
  const [title, setTitle] = useState('React 19 Component');

  const handleClick = () => {
    setTitle('Title Changed!');
  };

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default MyComponent;

// MyComponent.js (New Component Syntax in React 19 - conceptual)
// Note: This is a simplified representation of the conceptual syntax in React 19,
// which aims to optimize compilation. The core way of writing components
// still revolves around functions returning JSX.
// This syntax is more about internal compiler optimizations and may not be
// a direct replacement for existing function components in user code.

import { component } from 'react';

component MyComponent(props) {
  const [title, setTitle] = useState('React 19 Component');

  const handleClick = () => {
    setTitle('Title Changed!');
  };

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}
export default MyComponent;

2. Data Binding

Angular 20: Angular offers several types of data binding with distinct syntaxes:

Interpolation ({{ }}): Displays component property values in the template.
```
<p>{{ userName }}</p>
```
Property Binding ([property]="expression"): Binds a component property to an HTML element's property.
```
<img [src]="imageUrl" />
<button [disabled]="isButtonDisabled">Click Me</button>
```
Event Binding ((event)="handler()"): Listens for DOM events and executes component methods.
```
<button (click)="saveData()">Save</button>
```
Two-Way Data Binding ([(ngModel)]="property"): Synchronizes data between the component and the template (primarily used in forms with ngModel).
```
<input [(ngModel)]="searchText">
```
Structural Directives (e.g., *ngIf, *ngFor): Manipulate the DOM structure. Angular 20 introduces new built-in control flow syntax.
- Old:

<div *ngIf="isVisible">Content</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

New (Angular 20 stable control flow):

@if (isVisible) {
  <div>Content</div>
}

@for (item of items; track item.id) {
  <li>{{ item }}</li>
} @empty {
  <p>No items found.</p>
}

React 19: React uses JSX for data binding, which is essentially JavaScript expressions embedded within HTML-like syntax.

Displaying Data ({ }):
```
<p>{userName}</p>
```

Setting Attributes/Props (attribute={expression}):

<img src={imageUrl} / />
<button disabled={isButtonDisabled}>Click Me</button>

Event Handling (onEvent={handler}):

<button onClick={saveData}>Save</button>

Two-Way Binding (Controlled Components): Achieved by combining a value prop with an onChange event handler.
```
<input type="text" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
```

Conditional Rendering and List Rendering: Achieved using JavaScript logic within JSX.

{isVisible && <div>Content</div>}

<ul>
  {items.map(item => (
    <li key={item.id}>{item}</li>
  ))}
</ul>

Component Definition​

2. Data Binding​

Component Definition

2. Data Binding