{"id":23319,"date":"2025-07-31T13:00:00","date_gmt":"2025-07-31T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=23319"},"modified":"2025-08-25T11:22:24","modified_gmt":"2025-08-25T09:22:24","slug":"como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/","title":{"rendered":"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto"},"content":{"rendered":"\n

Una de las principales caracter\u00edsticas de React <\/em>es la capacidad de crear componentes reutilizables<\/strong>. Esto permite desarrollar aplicaciones m\u00e1s organizadas, mantenibles y escalables. Sin embargo, para aprovechar completamente esta ventaja, es esencial comprender c\u00f3mo manejar correctamente las props<\/em><\/strong>. Adem\u00e1s, la estructura del proyecto, aplicar estilos de forma modular y controlar los eventos (similares a los del DOM<\/em>) de manera eficiente har\u00e1 que estos componentes sean mucho m\u00e1s accesibles y flexibles a la hora de volver a utilizarlos.<\/p>\n\n\n\n

A continuaci\u00f3n, vamos a explorar estos aspectos en profundidad para ayudarte a escribir mejores componentes en tus aplicaciones React.<\/p>\n\n\n\n

Reutilizaci\u00f3n de componentes con props<\/h2>\n\n\n\n

En React<\/em>, las props<\/strong> <\/em>son el mecanismo principal para pasar datos de un componente padre a un hijo. Es lo que hace los componentes reutilizables de manera din\u00e1mica y sencilla. La manera que mostramos a continuaci\u00f3n es con componentes funcionales, en los componentes basados en funci\u00f3n (a partir de React 16.8<\/em>, la sintaxis var\u00edas ligeramente).<\/p>\n\n\n\n

Destructuring <\/em>o no<\/h3>\n\n\n\n

Cuando recibimos props <\/em>dentro de un componente, tenemos dos formas de acceder a ellas:<\/p>\n\n\n\n

Sin destructuring<\/em>:<\/h4>\n\n\n\n
function Card(props) {\n  return <h2>{props.titulo}<\/h2>;\n}<\/code><\/pre>\n\n\n\n
Con destructuring<\/em>:<\/h4>\n\n\n\n
function Card({ titulo}) {\n  return <h2>{titulo}<\/h2>;\n}\n<\/code><\/pre>\n\n\n\n
Usar destructuring <\/em>mejora la legibilidad del c\u00f3digo repetitivo. Es especialmente \u00fatil cuando un componente recibe m\u00faltiples props<\/em>.<\/p>\n\n\n\n
Estructura de archivos y organizaci\u00f3n de componentes<\/h2>\n\n\n\n
A medida que tu aplicaci\u00f3n crece, tener una estructura de proyecto clara se vuelve crucial.<\/p>\n\n\n\n
Una buena manera de tenerlo organizado es almacenar todos los componentes en una carpeta components<\/code>, donde cada componente tenga su propio archivo con el mismo nombre, ejemplo<\/p>\n\n\n\n
\/src\n  \/components\n    Header.jsx\n    Card.jsx\n    Button.jsx<\/code><\/pre>\n\n\n\n
Incluso, para mejorar a\u00fan m\u00e1s la organizaci\u00f3n, puedes crear una carpeta por componente si incluye archivos adicionales, como archivo de estilos:<\/p>\n\n\n\n
\/components\n  \/Header\n    Header.jsx\n    Header.css<\/code><\/pre>\n\n\n\n
De esta manera, los archivos que guardan cierta relaci\u00f3n est\u00e1n agrupados y es m\u00e1s sencillo dar con ellos, lo cual facilita el mantenimiento y las modificaciones en proyectos largos cuando tienes que volver a tocar el c\u00f3digo que hab\u00eda escrito tiempo atr\u00e1s.<\/p>\n\n\n\n
Estilos: CSS modular por componente<\/h2>\n\n\n\n
En React, al trabajar con componentes, se vuelve interesante asociar un archivo CSS al componente que lo usa, nombrando al CSS de la misma manera que el componente:<\/p>\n\n\n\n
\/\/ Header.jsx\nimport '.\/Header.css';\n\nfunction Header() {\n  return <h1 className=\"title\">Bienvenido a bordo<\/h1>;\n}<\/code><\/pre>\n\n\n\n
No obstante, tenemos que tener en cuenta, que este estilo no est\u00e1 limitado al componente que lo importa<\/strong>.<\/p>\n\n\n\n
Como los estilos de CSS afectan al documento de forma global cuando est\u00e1n presentes, si otro componente utiliza una clase con el mismo nombre, por ejemplo \u00ab.titulo\u00bb cualquier objeto que est\u00e9 en el documento se ver\u00e1 afectado. En otro art\u00edculo veremos c\u00f3mo hacer usando m\u00f3dulos de CSS, estos s\u00ed encapsulan los estilos por componente autom\u00e1ticamente.<\/p>\n\n\n\n
Otra opci\u00f3n para evitar estos problemas es usar CSS dentro del JS con librer\u00edas como styled-components<\/em> que directamente escribe el CSS dentro de tu componente de React.<\/p>\n\n\n\n
La prop children<\/code>: contenido din\u00e1mico dentro de componentes<\/h2>\n\n\n\n
React tiene una prop <\/em>propia del mismo, llamada children<\/em>, que representa todo lo que est\u00e1 dentro de las etiquetas de apertura y cierre del componente.<\/strong><\/p>\n\n\n\n
Ejemplo:<\/p>\n\n\n\n
function MiComponente(props) {\n  return <li><button>{props.children}<\/button><\/li>;\n}\n\n<MiComponente>\u00a1Haz click!<\/MiComponente><\/code><\/pre>\n\n\n\n
Aqu\u00ed, \"\u00a1Haz click!\"<\/code> se pasa como contenido al componente, y se renderiza dentro del bot\u00f3n.<\/p>\n\n\n\n
Al igual que con las props <\/em>se puede extraer usando destructuring<\/em>.<\/p>\n\n\n\n
Este patr\u00f3n es \u00fatil a la hora de crear tarjetas, secciones, barras de navegaci\u00f3n, etc.<\/p>\n\n\n\n
Reaccionando a eventos en React<\/h2>\n\n\n\n
En el JavaScript de toda la vida, hemos usado para manejar el DOM <\/em>addEventListener<\/code> con selectores tipo querySelector<\/code>. En React esto no funciona de la misma manera.<\/p>\n\n\n\n
En lugar de manipular directamente el DOM<\/em>, en React <\/em>se pasan funciones directamente como props<\/em> de los elementos, usando nombres como onClick<\/em><\/code>, onChange<\/em><\/code>, etc.<\/p>\n\n\n\n
function handleClick() {\nalert('\u00a1Has hecho clic!');\n}\n\n<button onClick={handleClick}>Click aqu\u00ed<\/button><\/code><\/pre>\n\n\n\n
Ojo, es importante no ejecutar la funci\u00f3n directamente<\/strong> al pasarla como prop<\/em>. Es decir, no pongas par\u00e9ntesis<\/strong>:<\/p>\n\n\n\n
\/\/ Incorrecto: se ejecuta inmediatamente, seg\u00fan se renderiza\n<button onClick={handleClick()}><\/button><\/s>\n\n\/\/ Cuando haces clic es cuando se ejecuta\n<button onClick={handleClick}><\/button><\/code><\/pre>\n\n\n\n
Pasar funciones como props<\/h2>\n\n\n\n
Otra caracter\u00edstica de React, es que podemos pasar funciones a los componentes hijos a trav\u00e9s de props <\/em>y accionarlas desde estos,<\/p>\n\n\n\n
function Padre() {\n  function handleSelect() {\n    console.log('Elemento seleccionado');\n  }\n\n  return <Hijo onSelect={handleSelect} \/>;\n}\n\nfunction Hijo({ onSelect }) {\n  return <button onClick={onSelect}>Seleccionar<\/button>;\n}<\/code><\/pre>\n\n\n\n
De esta forma, desde el hijo la ejecutamos cuando el evento ocurre.<\/p>\n\n\n\n
Custom arguments a funciones de eventos<\/h2>\n\n\n\n
En ocasiones necesitamos que la funci\u00f3n handler <\/em>conozca datos espec\u00edficos del elemento que ha disparado el evento \u2014por ejemplo, su ID \u2014.
Si pasamos la referencia de la funci\u00f3n directamente:<\/p>\n\n\n\n
onSelect={handleSelect}<\/code><\/pre>\n\n\n\n
handleSelect<\/code> no<\/strong> recibir\u00e1 informaci\u00f3n sobre el elemento desde el que se hizo clic, salvo el propio objeto event<\/code>.<\/p>\n\n\n\n
Para enviarle argumentos personalizados basta con envolver la llamada en una funci\u00f3n an\u00f3nima (normal o arrow):<\/p>\n\n\n\n
onSelect={() => handleSelect()}<\/code><\/pre>\n\n\n\n
De este modo, la funci\u00f3n se ejecutar\u00e1 solamente cuando ocurra el evento y con los par\u00e1metros que le especifiquemos. Este patr\u00f3n resulta especialmente \u00fatil, por ejemplo, cuando recorremos listas y queremos que cada elemento pase su\u202fID a la funci\u00f3n, como por ejemplo para eliminar un elemento de una lista.<\/p>\n\n\n\n
filteredClients.map((client) => (\n    <button onClick={() => handleDeleteClient(cliente.id)}>Eliminar<\/button>\n));<\/code><\/pre>\n\n\n\n
Donde filteredClients <\/code>puede contener en este caso un array<\/em> con los diferentes clientes de una lista filtrados.<\/p>\n\n\n\n
Para terminar y a modo resumen<\/h2>\n\n\n\n
En resumen, React <\/em>es una herramienta poderosa que ayuda a los desarrolladores a construir aplicaciones web de manera m\u00e1s ordenada y eficiente. Permite crear componentes reutilizables que simplifican el trabajo y hacen que el c\u00f3digo sea m\u00e1s f\u00e1cil de manejar. Tambi\u00e9n facilita que estos componentes se comuniquen entre s\u00ed de forma clara, lo que mejora la flexibilidad del proyecto.<\/p>\n\n\n\n
Adem\u00e1s, React<\/em> fomenta una estructura organizada y un enfoque pr\u00e1ctico para manejar el dise\u00f1o y las interacciones del usuario, evitando complicaciones comunes. Esto resulta en aplicaciones que no solo funcionan bien, sino que tambi\u00e9n son m\u00e1s sencillas de actualizar o expandir con el tiempo.<\/p>\n\n\n\n
\n
\n
\"\u00bfY<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\u00bfQu\u00e9<\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Descubre c\u00f3mo aprovechar al m\u00e1ximo React creando componentes reutilizables. Este art\u00edculo cubre el uso de props para la comunicaci\u00f3n entre componentes, la importancia de una estructura de archivos organizada, t\u00e9cnicas para estilos modulares, y c\u00f3mo manejar eventos de manera eficiente. Aprende a escribir c\u00f3digo m\u00e1s limpio y escalable.<\/p>\n","protected":false},"author":18,"featured_media":24215,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-23319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"\nGu\u00eda Completa para Crear Componentes Reutilizables en React<\/title>\n<meta name=\"description\" content=\"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda Completa para Crear Componentes Reutilizables en React\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-31T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-25T09:22:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David Boo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"David Boo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/\"},\"author\":{\"name\":\"David Boo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\"},\"headline\":\"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto\",\"datePublished\":\"2025-07-31T11:00:00+00:00\",\"dateModified\":\"2025-08-25T09:22:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/\"},\"wordCount\":933,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/como-crear-componentes-reutilizables-en-react.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/\",\"name\":\"Gu\u00eda Completa para Crear Componentes Reutilizables en React\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/como-crear-componentes-reutilizables-en-react.jpg\",\"datePublished\":\"2025-07-31T11:00:00+00:00\",\"dateModified\":\"2025-08-25T09:22:24+00:00\",\"description\":\"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/como-crear-componentes-reutilizables-en-react.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/como-crear-componentes-reutilizables-en-react.jpg\",\"width\":1250,\"height\":737,\"caption\":\"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\",\"name\":\"David Boo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"caption\":\"David Boo\"},\"sameAs\":[\"http:\\\/\\\/carontestudio.com\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/david-boo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gu\u00eda Completa para Crear Componentes Reutilizables en React","description":"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda Completa para Crear Componentes Reutilizables en React","og_description":"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!","og_url":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2025-07-31T11:00:00+00:00","article_modified_time":"2025-08-25T09:22:24+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg","type":"image\/jpeg"}],"author":"David Boo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"David Boo","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/"},"author":{"name":"David Boo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52"},"headline":"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto","datePublished":"2025-07-31T11:00:00+00:00","dateModified":"2025-08-25T09:22:24+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/"},"wordCount":933,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/","url":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/","name":"Gu\u00eda Completa para Crear Componentes Reutilizables en React","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg","datePublished":"2025-07-31T11:00:00+00:00","dateModified":"2025-08-25T09:22:24+00:00","description":"Aprende a crear componentes reutilizables en React con props, estructura de archivos, estilos modulares y manejo de eventos \u00a1Aprende React!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/07\/como-crear-componentes-reutilizables-en-react.jpg","width":1250,"height":737,"caption":"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/como-crear-componentes-reutilizables-en-react-que-son-las-props-y-estructura-de-proyecto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear componentes reutilizables en React: qu\u00e9 son las props y estructura del proyecto"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52","name":"David Boo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","caption":"David Boo"},"sameAs":["http:\/\/carontestudio.com"],"url":"https:\/\/carontestudio.com\/blog\/author\/david-boo\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/23319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=23319"}],"version-history":[{"count":29,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/23319\/revisions"}],"predecessor-version":[{"id":24299,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/23319\/revisions\/24299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/24215"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=23319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=23319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=23319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}