Principiantereact
Componentes Funcionales
Aprende a crear componentes funcionales en React, la unidad basica de la interfaz de usuario.
Que es un componente
Un componente es una funcion de JavaScript que retorna JSX (una extension de HTML). Cada componente representa una pieza reutilizable de la interfaz. React construye toda la UI a partir de la composicion de componentes.
Crear un componente basico
Los componentes funcionales son simplemente funciones que retornan JSX. Reciben datos a traves de props (propiedades).
jsx
1function Saludo({ nombre, rol }) {
2 return (
3 <div className="card">
4 <h2>Hola, {nombre}</h2>
5 <p>Tu rol es: {rol}</p>
6 </div>
7 );
8}
9
10// Uso
11<Saludo nombre="Ana" rol="Developer" />Composicion de componentes
Los componentes se combinan para crear interfaces complejas. Cada componente tiene una responsabilidad clara.
jsx
1function ListaUsuarios({ usuarios }) {
2 return (
3 <ul>
4 {usuarios.map(user => (
5 <UsuarioCard key={user.id} usuario={user} />
6 ))}
7 </ul>
8 );
9}
10
11function UsuarioCard({ usuario }) {
12 return (
13 <li className="card">
14 <strong>{usuario.nombre}</strong>
15 <span>{usuario.email}</span>
16 </li>
17 );
18}