Los componentes son fragmentos de código independientes y reutilizables. Tienen un propósito similar a las funciones de JavaScript. Sin embargo, el aislamiento funciona y devuelve HTML a través de una función de representación.
Un componente es uno de los componentes básicos de React. En otras palabras, podemos decir que cada aplicación que desarrollarás en React estará compuesta por piezas llamadas componentes. Los componentes facilitan mucho la tarea de crear interfaces de usuario. Puede ver una interfaz de usuario dividida en varias piezas individuales llamadas componentes y trabajar en ellas de forma independiente y fusionarlas todas en un componente principal que será su interfaz de usuario final.
Los componentes en React básicamente devuelven un fragmento de código JSX que indica qué se debe representar en la pantalla. En React, tenemos principalmente dos tipos de componentes:
- Componentes funcionales: los componentes funcionales son simplemente funciones de JavaScript. Podemos crear un componente funcional para React escribiendo una función de JavaScript. Estas funciones pueden o no recibir datos como parámetros, discutiremos esto más adelante en el tutorial. El siguiente ejemplo muestra un componente funcional válido en React:
Javascript
function Democomponent()
{
return <h1>Welcome Message!</h1>;
}
- Componentes de clase: los componentes de clase son un poco más complejos que los componentes funcionales. Los componentes funcionales no son conscientes de los otros componentes de su programa, mientras que los componentes de clase pueden trabajar entre sí. Podemos pasar datos de un componente de clase a otros componentes de clase. Podemos usar clases de JavaScript ES6 para crear componentes basados en clases en React.
El siguiente ejemplo muestra un componente válido basado en clases en React:
Javascript
class Democomponent extends React.Component
{
render(){
return <h1>Welcome Message!</h1>;
}
}
Referencia completa:
- ReactJS | Componentes
- ReactJS | Componentes – Juego 2
- Componentes puros de ReactJS
- ReactJS | Componentes funcionales
- ReactJS | Ciclo de vida de los componentes
- Diferencias entre componentes funcionales y componentes de clase en React
- Componentes de presentación vs contenedor
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA