{"id":23127,"date":"2025-07-01T13:00:00","date_gmt":"2025-07-01T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=23127"},"modified":"2025-07-15T13:03:59","modified_gmt":"2025-07-15T11:03:59","slug":"y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/","title":{"rendered":"\u00bfY si no entiendo React? Aprende a crear componentes en React y entiende c\u00f3mo funcionan"},"content":{"rendered":"\n<p>En los art\u00edculos anteriores sobre React hablamos sobre los fundamentos de React y su arquitectura basada de componentes, adem\u00e1s de c\u00f3mo crear una aplicaci\u00f3n para empezar usando <em>Vite<\/em>. En este tercer art\u00edculo de esta serie de <em>React<\/em>, vamos a profundizar m\u00e1s para establecer unas bases de conocimiento s\u00f3lidas de las que partir para empezar a desarrollar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n a los m\u00f3dulos de JavaScript en React<\/h2>\n\n\n\n<p>Los <strong>m\u00f3dulos de <\/strong><em><strong>JavaScript<\/strong> <\/em>son piezas de c\u00f3digo reutilizables que permiten organizar y encapsular funcionalidades, son un poco la pieza clave de la programaci\u00f3n en componentes en la cual est\u00e1 basado el desarrollo de aplicaciones en React, de manera m\u00e1s detallada, se utilizan para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Modular el c\u00f3digo:<\/strong> separar la l\u00f3gica en archivos espec\u00edficos, facilitando la mantenibilidad y escalabilidad de las aplicaciones.<\/li>\n\n\n\n<li><strong>Reutilizaci\u00f3n:<\/strong> importar y exportar funciones, clases o variables entre diferentes archivos, haciendo posible la integraci\u00f3n de librer\u00edas de terceros (como las dependencias instaladas con <em>npm <\/em>o <em>yarn<\/em>) y la creaci\u00f3n de componentes independientes.<\/li>\n\n\n\n<li><strong>Soporte de <em>ES6<\/em>:<\/strong> la sintaxis de <em>ECMAScript <\/em>6 introduce <a href=\"https:\/\/carontestudio.com\/blog\/reactjs-conceptos-de-javascript\/#Import_y_Export\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>import\/export<\/em><\/a>. React aprovecha estos m\u00f3dulos para crear aplicaciones robustas y f\u00e1ciles de depurar.<\/li>\n<\/ul>\n\n\n\n<p>En entornos de desarrollo actuales, herramientas como <em>Vite <\/em>se encargan de la gesti\u00f3n y empaquetado de estos m\u00f3dulos, lo que optimiza la carga de los recursos y mejora el rendimiento de la aplicaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Por qu\u00e9 React se basa en componente y qu\u00e9 son<\/h2>\n\n\n\n<p>Los <strong>componentes<\/strong> son las piezas fundamentales en <em>React<\/em>. Estos se pueden considerar como bloques de construcci\u00f3n independientes con sus propias responsabilidades. Cada componente:<\/p>\n\n\n\n<p><strong>Renderiza parte de la interfaz:<\/strong> desde botones, formularios hasta contenedores o elementos m\u00e1s complejos.<\/p>\n\n\n\n<p><strong>Encapsula l\u00f3gica y estado:<\/strong> permite manejar datos desde un alcance m\u00e1s reducido mediante el uso de <em>state<\/em> y <em>props<\/em>, facilitando as\u00ed la reutilizaci\u00f3n y la separaci\u00f3n de responsabilidades.<\/p>\n\n\n\n<p><strong>Reutilizaci\u00f3n y Composici\u00f3n:<\/strong> puedes componer interfaces complejas combinando componentes m\u00e1s simples, lo que reduce la duplicaci\u00f3n de c\u00f3digo y facilita futuros cambios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n de un nuevo proyecto en React. Herramientas y primeros pasos<\/h2>\n\n\n\n<p>Para comenzar a trabajar con React, una de la opciones que a m\u00ed m\u00e1s me gusta es <em>Vite<\/em>, que automatiza la configuraci\u00f3n inicial del proyecto, en el post anterior explic\u00e1bamos <a href=\"https:\/\/carontestudio.com\/blog\/que-es-react-descubre-sus-caracteristicas-ventajas-y-como-empezar-a-usarlo\/#Instalacion_de_React_con_Vite_Guia_paso_a_paso\">c\u00f3mo crear un proyecto nuevo con Vite paso a paso<\/a><\/p>\n\n\n\n<p>Para el desarrollo de aplicaciones m\u00e1s avanzadas, se podr\u00eda considerar algo como Next.js, que permite renderizado del lado del servidor (SSR) y generaci\u00f3n de sitios est\u00e1ticos sin tener que montar tu propio servidor de <em>Node <\/em>con <em>Express <\/em>(u otro <em>framework<\/em>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><em>JSX <\/em>y los componentes de <em>React<\/em>: sintaxis y ventajas<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 es <em>JSX<\/em>?<\/h3>\n\n\n\n<p>Es una extensi\u00f3n de la sintaxis <em>JavaScript <\/em>creada para <em>React<\/em>. Est\u00e1 pensada para que tu herramienta de compilaci\u00f3n la convierta en <em>JavaScript <\/em>normal. Cada elemento <em>XML <\/em>se convierte en una llamada a una funci\u00f3n JavaScript normal. Por ejemplo este <em>JSX<\/em>: <br><br>import Button from &#8216;.\/button&#8217;<br>let button = &lt;Button&gt;Click me&lt;\/Button&gt;<br>render(button)<\/p>\n\n\n\n<p>ser\u00e1 convertido al siguiente JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Button from \".\/button\";\nlet button = React.createElement(Button, null, \"Haz click aqu\u00ed\");\nrender(button);<\/code><\/pre>\n\n\n\n<p>Lo cual nos da ciertas ventajas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Legibilidad<\/strong>: facilita comprender el c\u00f3digo, por mostrar la l\u00f3gica y la representaci\u00f3n en un mismo archivo.<\/li>\n\n\n\n<li><strong>Potencia y Flexibilidad<\/strong>: al poder escribir JavaScript dentro del HTML, permite escribir un c\u00f3digo din\u00e1mico de manera m\u00e1s sencilla.<\/li>\n\n\n\n<li><strong>Transformaci\u00f3n Autom\u00e1tica<\/strong>: herramientas como <em>Babel <\/em><strong>o <em>esbuild <\/em>(utilizado por <em>Vite<\/em>)<\/strong> convierten el <em>JSX<\/em> en llamadas que <em>React <\/em>puede interpretar.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo funciona en los componentes<\/h3>\n\n\n\n<p>Dentro de un componente, <em>JSX <\/em>se utiliza para describir qu\u00e9 debe renderizarse. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Saludo({ nombre }) {\n  return &lt;h1&gt;Saludos, {nombre}!&lt;\/h1&gt;;\n}<\/code><\/pre>\n\n\n\n<p>Esta sintaxis nos da, como dec\u00edamos antes, la posibilidad de intercalar variables dentro del texto escrito, haci\u00e9ndolo mucho m\u00e1s flexible a la hora de crear componentes din\u00e1micos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creaci\u00f3n y uso de tu primer componente<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Desarrollar un componente<\/h3>\n\n\n\n<p>En React, crear un componente no es m\u00e1s que definir una funci\u00f3n que devuelva JSX. Ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const MiPrimerComponente = () =&gt; {\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;\u00a1Hola, este es mi primer componente en React!&lt;\/h2&gt;\n      &lt;p&gt;Este es un ejemplo b\u00e1sico para entender c\u00f3mo se estructura un componente.&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default MiPrimerComponente;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Uso del componente<\/h3>\n\n\n\n<p>Para utilizar este componente en tu aplicaci\u00f3n, simplemente imp\u00f3rtalo en el archivo donde lo necesites:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport MiPrimerComponente from '.\/MiPrimerComponente';\n\nfunction App()(\n  return (\n    &lt;&gt;\n      &lt;MiPrimerComponente \/&gt;\n    &lt;\/&gt;\n  );\n);<\/code><\/pre>\n\n\n\n<p>Se puede ver lo sencillo que se vuelve crear componentes modulares con React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo React gestiona los componentes y el \u00e1rbol de componentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Estructura del \u00c1rbol de Componentes<\/h3>\n\n\n\n<p>React, al igual que muchas otras bibliotecas de <em>UI<\/em>, organiza la interfaz de usuario en una estructura jer\u00e1rquica conocida como \u00e1rbol de componentes.<\/p>\n\n\n\n<p>Los \u00e1rboles son un modelo com\u00fan para representar relaciones entre elementos. Por ejemplo, los navegadores utilizan estructuras en forma de \u00e1rbol para modelar el <em>HTML <\/em>en el <em>DOM<\/em>, donde cada nodo representa un elemento del documento.<\/p>\n\n\n\n<p>En React, cada componente puede contener componentes hijos, que a su vez pueden tener sus propios hijos, formando un \u00e1rbol de componentes. Esta estructura permite a React gestionar la interfaz de manera eficiente.<\/p>\n\n\n\n<p>Cuando se produce un cambio en el estado de un componente, React genera una nueva versi\u00f3n del <em>DOM <\/em>Virtual. Luego, compara esta nueva versi\u00f3n con la anterior (proceso conocido como <em>diffing<\/em>) y calcula los cambios m\u00ednimos necesarios para actualizar el <em>DOM <\/em>real. Este enfoque mejora significativamente el rendimiento frente a manipulaciones directas del <em>DOM<\/em>.<\/p>\n\n\n\n<p>Adem\u00e1s, cada componente puede mantener su propio estado interno y comunicarse con otros componentes mediante <em>props<\/em>. Esta comunicaci\u00f3n es unidireccional (de padre a hijo), pero tambi\u00e9n es posible propagar datos en sentido inverso con el uso de <em>callbacks<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"1024\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Estructura-arbol-componentes-682x1024.jpg\" alt=\"Aprende a crear componentes en React y entiende c\u00f3mo funcionan\" class=\"wp-image-23308\" style=\"width:508px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Estructura-arbol-componentes-682x1024.jpg 682w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Estructura-arbol-componentes-200x300.jpg 200w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Estructura-arbol-componentes.jpg 717w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Ciclo de Vida y Renderizado<\/h3>\n\n\n\n<p>Cada componente posee un ciclo de vida propio (por ejemplo, montaje, actualizaci\u00f3n y desmontaje). React proporciona m\u00e9todos (en componentes de clase) o los <em>hooks<\/em> (en componentes funcionales) como <code>useEffect<\/code> para controlar estas fases, que permiten ejecutar el c\u00f3digo en los momentos espec\u00edficos del ciclo de vida y optimizar el rendimiento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Impulsa tu UI con el uso de valores din\u00e1micos<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Reactividad y estados<\/h3>\n\n\n\n<p>El uso de valores din\u00e1micos es uno de los conceptos centrales en <em>React<\/em>. La \u00abreactividad\u00bb es la capacidad que tiene una interfaz para responder autom\u00e1ticamente a los cambios en los datos. Es decir, cuando los valores cambian (ya sea por acciones del usuario, respuestas de una <em>API <\/em>o cualquier otro evento) la interfaz se actualiza de forma autom\u00e1tica sin necesidad de recargar la p\u00e1gina. Esto se logra principalmente gracias el <em><strong>state<\/strong> <\/em>y las <strong><em>props<\/em><\/strong>, y de esta forma puedes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gestionar datos en tiempo real:<\/strong> actualizar la UI en funci\u00f3n de las interacciones del usuario.<\/li>\n\n\n\n<li><strong>Crear interfaces responsive:<\/strong> cambiar contenido y aplicar estilos din\u00e1micamente seg\u00fan los datos.<\/li>\n\n\n\n<li><strong>Renderizado condicional:<\/strong> decidir sobre qu\u00e9 mostrar en pantalla en funci\u00f3n del estado de la aplicaci\u00f3n o los datos que recibe.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ejemplo de actualizaci\u00f3n din\u00e1mica<\/h3>\n\n\n\n<p>Esto ser\u00eda un ejemplo con un incrementador b\u00e1sico, o contador, que cuenta los clicks sobre el bot\u00f3n:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"jEEvqLx\" data-pen-title=\"React Dynamic Update\" data-user=\"David-Boo\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/David-Boo\/pen\/jEEvqLx\">\n  React Dynamic Update<\/a> by David Boo (<a href=\"https:\/\/codepen.io\/David-Boo\">@David-Boo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p>Este ejemplo muestra como con la actualizaci\u00f3n del estado React actualiza la interfaz de manera autom\u00e1tica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Casos de uso: atributos din\u00e1micos para el HTML<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Uso de <em>props <\/em>para configuraci\u00f3n din\u00e1mica<\/h3>\n\n\n\n<p>En React, los atributos HTML se pueden definir de forma din\u00e1mica a trav\u00e9s de las <em>props<\/em>. Esto permite que los valores se establezcan o cambien en funci\u00f3n del estado de la aplicaci\u00f3n o de datos externos. Por ejemplo, este componente de un  bot\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const BotonPersonalizado = ({ color, texto }) =&gt; {\n  return &lt;button style={{ backgroundColor: color }}&gt;{texto}&lt;\/button&gt;;\n};<\/code><\/pre>\n\n\n\n<p>Aqu\u00ed, el color y el texto del bot\u00f3n se definen a trav\u00e9s de los valores que llegan en las <em>props <\/em>que le pasa el componente padre,  permitiendo reutilizaci\u00f3n y personalizaci\u00f3n del componente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Aplicando condiciones y estilos<\/h3>\n\n\n\n<p>Adem\u00e1s de atributos, React hace que la asignaci\u00f3n din\u00e1mica de clases y estilos mediante condicionales y expresiones sea sencilla:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import classNames from 'classnames';\n\nconst Alerta = ({ tipo, mensaje }) =&gt; {\n  const clases = classNames('alerta', {\n    'alerta-exito': tipo === 'exito',\n    'alerta-error': tipo === 'error'\n  });\n\n  return &lt;div className={clases}&gt;{mensaje}&lt;\/div&gt;;\n};<\/code><\/pre>\n\n\n\n<p>una vez aplicadas las clases, cada una puede tener sus estilos CSS diferentes, permiti\u00e9ndote as\u00ed dar distintos estilos a mismos componentes en distintos casos.<\/p>\n\n\n\n<p>Como hemos visto, React no es solo una librer\u00eda para construir interfaces, sino una forma de pensar el <a href=\"https:\/\/carontestudio.com\/web\/\">desarrollo web<\/a> basada en la composici\u00f3n, la reutilizaci\u00f3n y la adaptaci\u00f3n. Comprender c\u00f3mo funcionan los m\u00f3dulos, los componentes, el JSX y el flujo de datos te permitir\u00e1 construir interfaces m\u00e1s robustas, mantenibles y escalables. Estos fundamentos son el punto de partida ideal para empezar a desarrollar con confianza en React. En art\u00edculos anteriores hemos explorado otros temas que puedes consultar aqu\u00ed:<\/p>\n\n\n\n<p><a href=\"https:\/\/carontestudio.com\/blog\/reactjs-conceptos-de-javascript\/\" target=\"_blank\">ReactJS: Conceptos de JavaScript a repasar antes de empezar con React<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/carontestudio.com\/blog\/que-es-react-descubre-sus-caracteristicas-ventajas-y-como-empezar-a-usarlo\/\" target=\"_blank\">\u00bfQu\u00e9 es React? Descubre sus caracter\u00edsticas, ventajas y c\u00f3mo empezar a usarlo<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfNuevo en React? Descubre c\u00f3mo crear tu primer componente con JSX, entender el uso de props y state, y c\u00f3mo React gestiona los cambios din\u00e1micamente. Esta gu\u00eda te explica de forma clara lo que necesitas para dar tus primeros pasos.<\/p>\n","protected":false},"author":18,"featured_media":23305,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-23127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Entiende y aprende a crear componentes en React - Desarrollo web<\/title>\n<meta name=\"description\" content=\"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.\" \/>\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\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Entiende y aprende a crear componentes en React - Desarrollo web\" \/>\n<meta property=\"og:description\" content=\"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/\" \/>\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-01T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-15T11:03:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-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=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/\"},\"author\":{\"name\":\"David Boo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\"},\"headline\":\"\u00bfY si no entiendo React? Aprende a crear componentes en React y entiende c\u00f3mo funcionan\",\"datePublished\":\"2025-07-01T11:00:00+00:00\",\"dateModified\":\"2025-07-15T11:03:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/\"},\"wordCount\":1454,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/\",\"name\":\"Entiende y aprende a crear componentes en React - Desarrollo web\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg\",\"datePublished\":\"2025-07-01T11:00:00+00:00\",\"dateModified\":\"2025-07-15T11:03:59+00:00\",\"description\":\"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg\",\"width\":1250,\"height\":737,\"caption\":\"\u00bfY si no entiendo React? Aprende a crear componentes en React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfY si no entiendo React? Aprende a crear componentes en React y entiende c\u00f3mo funcionan\"}]},{\"@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":"Entiende y aprende a crear componentes en React - Desarrollo web","description":"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.","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\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/","og_locale":"es_ES","og_type":"article","og_title":"Entiende y aprende a crear componentes en React - Desarrollo web","og_description":"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.","og_url":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2025-07-01T11:00:00+00:00","article_modified_time":"2025-07-15T11:03:59+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg","type":"image\/jpeg"}],"author":"David Boo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"David Boo","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/"},"author":{"name":"David Boo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52"},"headline":"\u00bfY si no entiendo React? Aprende a crear componentes en React y entiende c\u00f3mo funcionan","datePublished":"2025-07-01T11:00:00+00:00","dateModified":"2025-07-15T11:03:59+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/"},"wordCount":1454,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/","url":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/","name":"Entiende y aprende a crear componentes en React - Desarrollo web","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg","datePublished":"2025-07-01T11:00:00+00:00","dateModified":"2025-07-15T11:03:59+00:00","description":"Aprende React desde cero creando tu primer componente paso a paso y entiende c\u00f3mo funciona el modelo basado en componentes.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/05\/Y-si-no-entiendo-React-Aprende-a-crear-componentes-en-React.jpg","width":1250,"height":737,"caption":"\u00bfY si no entiendo React? Aprende a crear componentes en React"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/y-si-no-entiendo-react-aprende-a-crear-componentes-en-react-y-entiende-como-funcionan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfY si no entiendo React? Aprende a crear componentes en React y entiende c\u00f3mo funcionan"}]},{"@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\/23127","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=23127"}],"version-history":[{"count":29,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/23127\/revisions"}],"predecessor-version":[{"id":23969,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/23127\/revisions\/23969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/23305"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=23127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=23127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=23127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}