Componentes de React

Una breve introducción a los componentes de React

Un componente es una pieza aislada de la interfaz. Por ejemplo, en una página de inicio de blog típica, puede encontrar el componente Sidebar y el componente Blog Posts List. A su vez, están compuestos de componentes, por lo que puede tener una lista de componentes de Blog post, cada uno para cada publicación del blog, y cada uno con sus propias propiedades peculiares.

React lo hace muy simple: todo es un componente.

Incluso las etiquetas HTML simples son un componente en sí mismas y se agregan de forma predeterminada.

Las siguientes 2 líneas son equivalentes, hacen lo mismo. Una con JSX y otra sin él, inyectando h1Hello World!/h1en un elemento con id app.

import React from 'react'import ReactDOM from 'react-dom'ReactDOM.render(h1Hello World!/h1, document.getElementById('app'))ReactDOM.render( React.createElement('h1', null, 'Hello World!'), document.getElementById('app'))

Mira, React.createElementnos expuso una API para crear el h1componente. Cambiando el primer parámetro de ese método te permite crear diferentes etiquetas. El segundo parámetro es un objeto de props, en este caso no necesitamos ninguno, así que pasamos null.

Así es como podemos usar React para trabajar con los componentes HTML integrados, pero pronto se nos quedarán pequeños. En lo que destaca React es en permitirnos componer una interfaz de usuario mediante la creación de componentes personalizados.

Componentes personalizados

Hay dos formas de definir un componente en React.

Un componente de función:

const BlogPostExcerpt = () = { return ( div h1Title/h1 pDescription/p /div )}

Un componente de clase:Te recomendamos Blog sobre seguros de auto

import React, { Component } from 'react'class BlogPostExcerpt extends Component { render() { return ( div h1Title/h1 pDescription/p /div ) }}

Hasta hace poco, los componentes de clase eran la única forma de definir un componente que tenía su propio estado y podía acceder a los métodos del ciclo de vida para poder hacer cosas cuando el componente se representaba, actualizaba o eliminaba por primera vez.

React Hooks cambió esto, por lo que nuestros componentes de función ahora son mucho más poderosos que nunca y creo que veremos cada vez menos componentes de clase en el futuro, aunque seguirá siendo una forma perfectamente válida de crear componentes.

También hay una tercera sintaxis que utiliza la ES5sintaxis, sin las clases:

import React from 'react'React.createClass({ render() { return ( div h1Title/h1 pDescription/p /div ) }})

Rara vez verás esto en ES6bases de código modernas.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Componentes de React

Un componente es una pieza aislada de la interfaz. Por ejemplo, en una página de inicio de blog típica, puede encontrar el componente Sidebar y el componente

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente