Mi viaje en React Día 2: Crear componente y usar expresiones en la plantilla

Hola a todos, este es mi segundo día en mi viaje con React Day 2. Hoy vamos a crear un componente tanto en Angular como en React y veremos cómo interpolar una expresión una variable dentro de la plantilla.

Aplicación Angular 19

En Angular podemos generar un componente con Angular CLI:

ng g c shopping-cart/shoppingCart --flat

Después, elimina los archivos shopping-cart.component.html, shopping-cart.component.scss y shopping-cart.component.spec.ts para trabajar con plantilla inline. Añadiremos dos piezas clave:

1 ChangeDetectionStrategy.OnPush

Es una optimización de rendimiento. Por defecto, Angular verifica cada componente cuando algo cambia. Con OnPush, solo verifica cuando cambia una entrada input o se dispara un evento dentro del componente. Así se reducen comprobaciones innecesarias y se acelera una app grande.

2 header = signal Shopping List App - Angular

Las signals son el nuevo modelo de reactividad de Angular. Una signal mantiene un valor y notifica a Angular cuando cambia. Cualquier plantilla enlazada a esa signal se actualizará automáticamente.

Ejemplo de componente con plantilla inline y OnPush:

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

}

Para montarlo en el componente raíz:

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

Con esto, la app muestra el encabezado dentro de una etiqueta h1.

React

A diferencia de Angular, React no usa decoradores ni genera archivos HTML o CSS por separado. En React con TypeScript, cada componente es una función TypeScript que devuelve JSX. La extensión del archivo es .tsx para combinar lógica y plantilla en un único lugar.

Paso 1 Crear el componente

Dentro de src crea la carpeta components y dentro el archivo ShoppingCartComponent.tsx. Código del componente:

export function ShoppingCart() {

const header = "Shopping Cart";

return (

<>

<h1>{header}</h1>

</>

);

}

Notas para desarrolladores de Angular

const header es una variable normal de TypeScript. No hace falta signal ni decoradores. La interpolación en JSX con {header} es el equivalente a {{ header() }} de Angular. JSX parece HTML, pero es TypeScript que se compila a llamadas de función de React.

Paso 2 Usar el componente en la raíz

En App.tsx importa el componente y rindeízalo en el árbol:

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

function App() {

return (

<>

<ShoppingCart />

</>

);

}

export default App;

Analogía Angular React

App.tsx equivale al AppComponent de Angular. La etiqueta <ShoppingCart /> es similar a <app-shopping-cart />. No hay imports array ni NgModule, solo importas la función y la usas como una etiqueta JSX.

Resumen

En Angular creamos un componente con signals y ChangeDetectionStrategy.OnPush y lo montamos en la aplicación raíz. En React TypeScript construimos un componente funcional .tsx que devuelve JSX e interpolamos valores con llaves. Finalmente, importamos el componente y lo renderizamos en App.

Sobre Q2BSTUDIO

En Q2BSTUDIO ayudamos a empresas a crear productos digitales robustos, escalables y seguros, combinando desarrollo de software a medida y aplicaciones a medida con prácticas modernas de arquitectura, pruebas y despliegue continuo. Integramos inteligencia artificial en procesos reales ia para empresas mediante agentes IA, chatbots, RAG y analítica avanzada, y reforzamos tu estrategia de datos con servicios inteligencia de negocio y power bi para acelerar decisiones basadas en datos. Además, cubrimos de extremo a extremo la capa de seguridad y operaciones con ciberseguridad, pentesting, observabilidad y servicios cloud aws y azure, para que tus soluciones sean resilientes desde el día uno.

Si estás modernizando tu stack con Angular o React, podemos acompañarte con auditorías de rendimiento OnPush y signals, patrones de estado, testing y accesibilidad, y con automatización de procesos CI CD que reduzca tiempos de entrega. Y si buscas un salto diferencial, incorporamos inteligencia artificial aplicada a tus flujos críticos para mejorar conversión, soporte y eficiencia operativa.

Palabras clave recomendadas para tu estrategia de posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.