Componentes de React
Componentes de React
Un componente en React es una única unidad independiente de una interfaz de usuario. Lo que escriba dentro de un componente determinará lo que debería aparecer en la pantalla del navegador en un momento dado. Cada componente de React debe devolver al menos un elemento de la interfaz de usuario para poder ejecutarse correctamente. Puede crear un componente React utilizando tanto la sintaxis de clase como de función de JavaScript.
Así es como se declara un componente de clase en React:
import React from 'react';
class MainComponent extends React.Component {
render(){
return <h1> Hello World </h1>
}
}
Un componente de clase siempre debe contener una función render() con una declaración de retorno o generará un error.
Y así es como se declara un componente de función:
import React from 'react';
function MainComponent(){
return <h1> Hello World </h1>
}
Al igual que un componente de clase, un componente de función siempre debe tener una declaración de retorno, pero no es necesario crear una función render() con él.
Cuando desee que un componente no represente nada, puede devolver un valor nulo o falso en lugar de un elemento.
import React from 'react';
function MainComponent(){
return null
}
//or
class MainComponent extends React.Component {
render(){
return false
}
}
Dado que React es una biblioteca de JavaScript, todo el código de los componentes de React tiene la extensión de archivo .js. Es posible que encuentre que algunos códigos públicos usan la extensión .jsx, pero la mayoría de los compiladores los tratan como iguales, por lo que es mejor usar la extensión .js porque es el formato de código JavaScript universal.
Renderizado a la pantalla
Un componente de React debe representarse en la pantalla usando la función ReactDOM.render() que toma dos argumentos: el componente que desea renderizar y el elemento HTML que contiene el componente en el que renderizarse. Esto significa que necesita tener un archivo HTML en su proyecto React, o React no sabrá dónde representar el componente. Por lo general, un documento HTML muy básico con un div es suficiente.
<div id="root"></div>
A continuación, renderiza el componente en el div. Observe cómo se importa ReactDOM desde el paquete react-dom en el siguiente ejemplo:
import React from "react";
import ReactDOM from "react-dom";
class MainComponent extends React.Component {
render(){
return <h1>Hello World</h1>
}
}
ReactDOM.render(
<MainComponent />,
document.querySelector("#root")
)
El primer argumento es <MainComponent> y el segundo argumento es el elemento <div> con ID «root».
Si deseas poner en práctica los códigos de ejemplos de los componentes puedes utilizar la herramienta de Code Sandbox que permite simular en el navegador un proyecto de React.
Recomendaciones
- Organiza la estructura de directorios: No hay un patrón particular para organizar la estructura de carpetas en React, pero es importante mantener una estructura coherente y fácil de navegar.
- Mantén tus componentes compactos: Los componentes de React deben ser simples y fáciles de entender. Si un componente se vuelve demasiado grande o complejo, divídelo en componentes más pequeños y manejables.
- Nombra los componentes sabiamente: Los nombres de los componentes deben ser descriptivos y coherentes con su función. Utiliza nombres que sean fáciles de entender y recordar.
- No te repitas: Si tienes código repetitivo en tus componentes, considera crear un componente de orden superior que contenga el código repetitivo y lo reutilice en otros componentes.
- Organiza tu estado: El estado de tu aplicación debe ser fácil de entender y mantener. Utiliza una biblioteca de administración de estado como Redux para mantener tu estado organizado y escalable.
