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.