{"id":14740,"date":"2024-02-13T12:06:50","date_gmt":"2024-02-13T08:36:50","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=14740"},"modified":"2024-02-17T10:35:48","modified_gmt":"2024-02-17T07:05:48","slug":"what-is-react-js","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/what-is-react-js\/","title":{"rendered":"\u00bfQu\u00e9 es React.js?"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Introducci\u00f3n<\/h2>\n<p>Hoy en d\u00eda, los frameworks y bibliotecas front-end se est\u00e1n convirtiendo en una parte esencial del desarrollo web moderno. React.js es una biblioteca front-end que se ha convertido gradualmente en el framework de referencia para el desarrollo web moderno en la comunidad JavaScript.<\/p>\n<h2 id=\"react-js-%da%86%db%8c%d8%b3%d8%aa%d8%9f\">\u00bfQu\u00e9 es React.js?<\/h2>\n<p>React.js es una biblioteca JavaScript de c\u00f3digo abierto, cuidadosamente dise\u00f1ada por Facebook, que busca simplificar el complejo proceso de creaci\u00f3n de interfaces de usuario interactivas. Imagine una interfaz de usuario creada con React como un conjunto de componentes, cada uno responsable de generar un peque\u00f1o fragmento de c\u00f3digo HTML reutilizable.<\/p>\n<p>En React, desarrollas tus aplicaciones creando componentes reutilizables, que puedes considerar como piezas de Lego independientes. Estos componentes son piezas individuales de una interfaz final que, al ensamblarse, forman la interfaz de usuario completa de tu aplicaci\u00f3n.<\/p>\n<p>La funci\u00f3n principal de React en una aplicaci\u00f3n es gestionar la capa de vista de la misma, proporcionando la mejor y m\u00e1s eficiente implementaci\u00f3n de renderizado, similar a la V del patr\u00f3n Modelo-Vista-Controlador (MVC). En lugar de abordar toda la interfaz de usuario como una sola unidad, React.js anima a los desarrolladores a descomponer estas complejas interfaces en componentes individuales reutilizables que conforman los componentes b\u00e1sicos de toda la interfaz. De este modo, el framework ReactJS combina la velocidad y la eficiencia de JavaScript con una forma m\u00e1s eficiente de manipular el DOM para renderizar p\u00e1ginas web m\u00e1s r\u00e1pido y crear aplicaciones web altamente din\u00e1micas y responsivas.<\/p>\n<h2 id=\"%d8%aa%d8%a7%d8%b1%db%8c%d8%ae%da%86%d9%87-%d9%85%d8%ae%d8%aa%d8%b5%d8%b1%db%8c-%d8%a7%d8%b2-react-js\">Una breve historia de React.js<\/h2>\n<p>En 2011, Facebook contaba con una gran base de usuarios y se enfrentaba a un reto: quer\u00eda ofrecer una experiencia de usuario m\u00e1s completa mediante la creaci\u00f3n de una interfaz m\u00e1s din\u00e1mica y responsiva, m\u00e1s r\u00e1pida y eficiente.<\/p>\n<p>Jordan Walk, ingeniero de software de Facebook, cre\u00f3 React precisamente para eso. React simplific\u00f3 el proceso de desarrollo al proporcionar una forma m\u00e1s organizada y estructurada de crear interfaces de usuario din\u00e1micas e interactivas con componentes reutilizables.<\/p>\n<p>El canal de noticias de Facebook fue el primero en utilizarlo. Con su enfoque revolucionario en la manipulaci\u00f3n del DOM y las interfaces de usuario, React cambi\u00f3 radicalmente el enfoque de Facebook hacia el desarrollo web y r\u00e1pidamente se populariz\u00f3 en el ecosistema JavaScript tras su lanzamiento a la comunidad de c\u00f3digo abierto.<\/p>\n<h2 id=\"react-js-%da%86%d9%87-%da%a9%d8%a7%d8%b1%db%8c-%d8%a7%d9%86%d8%ac%d8%a7%d9%85-%d9%85%db%8c-%d8%af%d9%87%d8%af%d8%9f\">\u00bfQu\u00e9 hace React.js?<\/h2>\n<p>Normalmente, se solicita una p\u00e1gina web escribiendo su URL en el navegador. Este env\u00eda una solicitud para esa p\u00e1gina, que es procesada por el navegador. Si se hace clic en un enlace de esa p\u00e1gina para ir a otra, se env\u00eda una nueva solicitud al servidor para obtener esa nueva p\u00e1gina.<\/p>\n<p>Este patr\u00f3n de carga continua entre el navegador (cliente) y el servidor con cada nueva p\u00e1gina o recurso al que se accede en un sitio web. Este m\u00e9todo habitual para cargar sitios web funciona bien, pero considere un sitio web con un consumo de datos muy elevado. Recargar la p\u00e1gina completa una y otra vez ser\u00eda redundante y generar\u00eda una mala experiencia de usuario.<\/p>\n<p>Adem\u00e1s, cuando los datos cambian en una aplicaci\u00f3n JavaScript tradicional, se requiere la manipulaci\u00f3n manual del DOM para reflejar dichos cambios. Es necesario identificar qu\u00e9 datos han cambiado y actualizar el DOM para reflejarlos, lo que provoca una recarga de la p\u00e1gina.<\/p>\n<p>React adopta un enfoque diferente al permitir crear lo que se conoce como una aplicaci\u00f3n de p\u00e1gina \u00fanica (SPA). Una aplicaci\u00f3n de p\u00e1gina \u00fanica carga un solo documento HTML en la primera solicitud. Luego, actualiza la secci\u00f3n, el contenido o el cuerpo espec\u00edfico de la p\u00e1gina web que necesita actualizarse mediante JavaScript.<\/p>\n<p>Este patr\u00f3n se conoce como enrutamiento del lado del cliente, ya que el cliente no tiene que recargar toda la p\u00e1gina web cada vez que el usuario realiza una nueva solicitud para obtener una nueva p\u00e1gina. En su lugar, React desglosa la solicitud y recupera solo las partes que deben cambiar, realizando los cambios sin tener que recargar toda la p\u00e1gina. Este enfoque se traduce en un mejor rendimiento y una experiencia de usuario m\u00e1s din\u00e1mica.<\/p>\n<p>React se basa en un DOM virtual, que es una copia del DOM real. Este DOM virtual se recarga inmediatamente para reflejar el nuevo cambio cada vez que se produce un cambio en el estado de los datos. React compara el DOM virtual con el real para determinar exactamente qu\u00e9 ha cambiado.<\/p>\n<p>React encuentra entonces la manera m\u00e1s econ\u00f3mica de aplicar esa actualizaci\u00f3n al DOM sin renderizarlo. Como resultado, los componentes y las interfaces de usuario de React reflejan los cambios r\u00e1pidamente, ya que no es necesario recargar la p\u00e1gina completa cada vez que se actualiza algo.<\/p>\n<h2 id=\"%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-react-js\">C\u00f3mo usar React.js<\/h2>\n<p>A diferencia de otros frameworks como Angular, React no impone reglas estrictas sobre las convenciones de c\u00f3digo ni la organizaci\u00f3n de archivos. Esto significa que los desarrolladores y equipos tienen la libertad de establecer las convenciones que mejor les funcionen e implementar React como mejor les parezca. Con React, puedes usar tanto o tan poco como necesites gracias a su flexibilidad.<\/p>\n<p>Con React, puedes crear un bot\u00f3n, algunas partes de una interfaz o la interfaz completa de tu aplicaci\u00f3n. Puedes adoptarlo e integrarlo gradualmente en una aplicaci\u00f3n existente con cierta interactividad, o mejor a\u00fan, usarlo para crear potentes aplicaciones React desde cero, seg\u00fan tus necesidades.<\/p>\n<h2 id=\"%d8%a7%d8%af%d8%ba%d8%a7%d9%85-react-%d8%af%d8%b1-%db%8c%da%a9-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%88%d8%ac%d9%88%d8%af\">Integraci\u00f3n de React en un sitio web existente<\/h2>\n<p>Si buscas a\u00f1adir interactividad din\u00e1mica a tu sitio web, React es una excelente opci\u00f3n. Al integrar React, puedes crear componentes interactivos reutilizables que se pueden colocar en cualquier lugar de tu sitio, como barras laterales o widgets. Aqu\u00ed tienes un sencillo desglose de los pasos para lograrlo.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-1-%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%87%d8%a7%db%8c-cdn-%d8%a8%d9%87-html\">Paso 1: Agregar scripts de CDN a HTML<\/h2>\n<ul>\n<li>Comience agregando la API de la biblioteca principal de React desde la CDN al archivo de \u00edndice HTML de su sitio web.<\/li>\n<li>Luego, importe el DOM de React desde la CDN. Esto es necesario para renderizar los componentes en el Modelo de Objetos del Documento (DOM).<\/li>\n<li>A continuaci\u00f3n, a\u00f1ade Babel desde la CDN, que traduce el c\u00f3digo de React para garantizar la compatibilidad entre navegadores. No olvides subir el archivo de tu componente de React.<\/li>\n<\/ul>\n<p>El primer paso es agregar dos scripts principales de CDN al archivo de \u00edndice HTML de tu sitio web. Necesitar\u00e1s estos scripts para cargar React en tu aplicaci\u00f3n a trav\u00e9s del servicio CDN.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;script src=\"https:\/\/unpkg.com\/react@17\/umd\/react.development.js\" crossorigin&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js\" crossorigin&gt;&lt;\/script&gt;\r\n&lt;script src='https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.js'&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/babel\" src=\"like_widget.js\"&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-2-%d8%b9%d9%84%d8%a7%d9%85%d8%aa-%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d9%85%da%a9%d8%a7%d9%86-%d8%b1%d9%86%d8%af%d8%b1-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa\">Paso 2: Marque la ubicaci\u00f3n de renderizado en su sitio web<\/h2>\n<p>Determine la ubicaci&oacute;n en su HTML donde se renderizar&aacute; el componente React. Esto se puede hacer a&ntilde;adiendo un elemento. &lt;div&gt; Lo hizo con un identificador &uacute;nico, al que haremos referencia en nuestro c&oacute;digo React.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- ... Your existing HTML markup ... --&gt;\r\n&lt;div id=\"like_widget_container\"&gt;&lt;\/div&gt;\r\n&lt;!-- ... Your existing HTML markup ... --&gt;\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-3-%d8%b3%d8%a7%d8%ae%d8%aa-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa-react\">Paso 3: Construir el componente React<\/h2>\n<ul>\n<li>Crea un componente React, en este caso llamado like_widget.js.<\/li>\n<li>Este componente tendr\u00e1 una funci\u00f3n simple que devuelve una declaraci\u00f3n JSX que representa el mensaje &quot;Hola mundo&quot;.<\/li>\n<li>Con la ayuda de ReactDOM, luego representamos este componente en el DOM, apuntando al ID \u00fanico que configuramos anteriormente en nuestro HTML.<\/li>\n<\/ul>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ Custom React component function that returns a JSX syntax\r\nconst ActualWidget = () =&gt; Hello World;\r\n\/\/ Select the container\r\nconst container = document.getElementById(\"like_widget_container\");\r\n\/\/ Render the component to the DOM\r\nReactDOM.render(, container);\r\n<\/code><\/pre>\n<\/div>\n<p>Si ejecuta el programa, mostrar\u00e1 \u201cHola mundo\u201d en el navegador en el lugar exacto que marc\u00f3 en la imagen a continuaci\u00f3n.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"624\"  height=\"60\"  class=\"aligncenter wp-image-14741 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 624px) 100vw, 624px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_.webp\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_.webp 624w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-300x29.webp 300w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-110x11.webp 110w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-200x19.webp 200w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-380x37.webp 380w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-255x25.webp 255w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-550x53.webp 550w\" ><br \/>\nQuiz\u00e1s hayas notado una sintaxis extra\u00f1a llamada JavaScript XML (JSX) devuelta por la funci\u00f3n ActualWidget. JSX se usa con React para combinar f\u00e1cilmente HTML y JavaScript. Facebook desarroll\u00f3 JSX como una extensi\u00f3n de sintaxis para JavaScript para ampliar la funcionalidad de HTML integr\u00e1ndolo directamente en el c\u00f3digo JavaScript. Con JSX, no es necesario separar el c\u00f3digo HTML del JS, ya que React permite escribir HTML declarativo directamente en el c\u00f3digo JavaScript.<\/p>\n<h2 id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-react-app-%d8%aa%d9%85%d8%a7%d9%85-%d8%b9%db%8c%d8%a7%d8%b1\">Creaci\u00f3n de una aplicaci\u00f3n React completa<\/h2>\n<p>Si bien es f\u00e1cil integrar React en una aplicaci\u00f3n web existente para crear peque\u00f1as partes de una interfaz, es m\u00e1s pr\u00e1ctico usar React para crear aplicaciones web completas. Sin embargo, React requiere una configuraci\u00f3n de herramientas compleja que suele ser abrumadora y tediosa al crear nuevas aplicaciones.<\/p>\n<p>Afortunadamente, no necesitas aprender estas configuraciones de compilaci\u00f3n ni configurar las herramientas t\u00fa mismo. Facebook ha creado una herramienta de l\u00ednea de comandos de Node llamada cre-react-app para ayudarte a crear una aplicaci\u00f3n React. Este paquete te ayuda a crear aplicaciones React de forma inmediata y proporciona una estructura consistente para aplicaciones React que reconocer\u00e1s al cambiar de proyecto.<\/p>\n<p>Crear un nuevo proyecto React es tan simple como ejecutar los siguientes comandos en tu terminal:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>npx create-react-app my-new-app\r\ncd my-new-app\r\nnpm start\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%ab%d8%a7%d9%84-%d9%87%d8%a7%db%8c-react-js\"><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"624\"  height=\"422\"  class=\"aligncenter wp-image-14742 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 624px) 100vw, 624px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2.webp\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2.webp 624w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-300x203.webp 300w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-110x74.webp 110w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-200x135.webp 200w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-380x257.webp 380w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-255x172.webp 255w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-550x372.webp 550w\" ><br \/>\nEjemplos de React.js<\/h2>\n<h5 id=\"%d9%81%db%8c%d8%b3%d8%a8%d9%88%da%a9\">Facebook<\/h5>\n<p>Como g\u00e9nesis de React.js, Facebook es un ejemplo de la destreza de la biblioteca. React simplifica las funciones en tiempo real de la plataforma, como los &quot;me gusta&quot;, los comentarios y las actualizaciones de estado, garantizando una experiencia de usuario fluida y din\u00e1mica. La naturaleza modular de React facilita la interfaz de Facebook en constante evoluci\u00f3n y se adapta a las necesidades de sus m\u00e1s de 2.800 millones de usuarios activos mensuales.<\/p>\n<h5 id=\"%d8%a7%db%8c%d9%86%d8%b3%d8%aa%d8%a7%da%af%d8%b1%d8%a7%d9%85\">Instagram<\/h5>\n<p>Instagram Web es un lienzo de elementos interactivos, todos impulsados por React.js. Cada imagen, al igual que la vista de la historia y el mensaje directo, enfatiza la capacidad de React para gestionar r\u00e1pidamente interacciones complejas del usuario. La atractiva e intuitiva interfaz de la plataforma demuestra la capacidad de React para ofrecer interacciones de alto rendimiento.<\/p>\n<h5 id=\"%d9%86%d8%aa-%d9%81%d9%84%db%8c%da%a9%d8%b3\">Netflix<\/h5>\n<p>Airbnb demuestra c\u00f3mo React.js puede transformar datos complejos en una experiencia de usuario intuitiva. Cada anuncio de propiedad, mapa interactivo y reserva en tiempo real son una sinfon\u00eda de componentes de React que trabajan en armon\u00eda para crear una experiencia de usuario fluida, desde la navegaci\u00f3n hasta la reserva.<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n Hoy en d\u00eda, los frameworks y bibliotecas front-end se est\u00e1n convirtiendo en una parte esencial de la pila de desarrollo web\u2026","protected":false},"author":1,"featured_media":14749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"Recat.js \u0686\u06cc\u0633\u062a","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,266,363],"tags":[384,400],"class_list":{"0":"post-14740","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-news","9":"category-programming","10":"tag-java-script","11":"tag-react-js"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/what-is-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0627\u0645\u0631\u0648\u0632\u0647\u060c \u0641\u0631\u06cc\u0645\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0628\u062e\u0634 Front \u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u0628\u062e\u0634\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u067e\u0634\u062a\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/what-is-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-13T08:36:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-17T07:05:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"React.js \u0686\u06cc\u0633\u062a\u061f\",\"datePublished\":\"2024-02-13T08:36:50+00:00\",\"dateModified\":\"2024-02-17T07:05:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"},\"wordCount\":137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"keywords\":[\"Java Script\",\"React.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0627\u062e\u0628\u0627\u0631\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\",\"name\":\"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"datePublished\":\"2024-02-13T08:36:50+00:00\",\"dateModified\":\"2024-02-17T07:05:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React.js \u0686\u06cc\u0633\u062a\u061f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es React.js? - Blog de ITPiran","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:\/\/www.itpiran.net\/blog\/es\/tutorials\/what-is-react-js\/","og_locale":"es_ES","og_type":"article","og_title":"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0627\u0645\u0631\u0648\u0632\u0647\u060c \u0641\u0631\u06cc\u0645\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0628\u062e\u0634 Front \u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u0628\u062e\u0634\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u067e\u0634\u062a\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/what-is-react-js\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-02-13T08:36:50+00:00","article_modified_time":"2024-02-17T07:05:48+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"React.js \u0686\u06cc\u0633\u062a\u061f","datePublished":"2024-02-13T08:36:50+00:00","dateModified":"2024-02-17T07:05:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"},"wordCount":137,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","keywords":["Java Script","React.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0627\u062e\u0628\u0627\u0631","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/","name":"\u00bfQu\u00e9 es React.js? - Blog de ITPiran","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","datePublished":"2024-02-13T08:36:50+00:00","dateModified":"2024-02-17T07:05:48+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"React.js \u0686\u06cc\u0633\u062a\u061f"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=14740"}],"version-history":[{"count":4,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14740\/revisions"}],"predecessor-version":[{"id":14752,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14740\/revisions\/14752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/14749"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=14740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=14740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=14740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}