{"id":16223,"date":"2024-10-21T16:03:31","date_gmt":"2024-10-21T12:33:31","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=16223"},"modified":"2024-10-21T16:03:31","modified_gmt":"2024-10-21T12:33:31","slug":"prerequisites-for-react-js","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/prerequisites-for-react-js\/","title":{"rendered":"Requisitos previos para aprender ReactJS"},"content":{"rendered":"

Introducci\u00f3n<\/h2>\n

React JS es una biblioteca front-end de c\u00f3digo abierto. Su objetivo principal es crear interfaces de usuario r\u00e1pidas y atractivas para aplicaciones web y m\u00f3viles.<\/p>\n

Desarrollado por Facebook, ReactJS hace que los sitios web sean atractivos y atrae a la mayor\u00eda de los desarrolladores. Sin embargo, muchos cometen el error de empezar directamente con ReactJS (o cualquier otra biblioteca o framework) sin comprender sus prerrequisitos. Pasar directamente a ReactJS puede causar muchos problemas durante el aprendizaje de la biblioteca y en las entrevistas.<\/p>\n

Requisitos previos esenciales para aprender ReactJS<\/h2>\n

HTML y CSS<\/h5>\n

Los componentes b\u00e1sicos de la web son HTML y CSS. El lenguaje utilizado para describir cada componente de un sitio web en tu navegador se llama HTML (lenguaje de marcado de hipertexto). Como resultado, puedes especificar encabezados, p\u00e1rrafos, enlaces, incrustaciones y m\u00e1s usando HTML, lo que ayuda a tu navegador a comprender c\u00f3mo organizar la p\u00e1gina web que est\u00e1s viendo.<\/p>\n

El lenguaje conocido como CSS, u Hojas de Estilo en Cascada, es lo que da a las p\u00e1ginas web su apariencia y dise\u00f1o. En otras palabras, CSS se utiliza para crear sitios web atractivos con fuentes atractivas, colores vibrantes, fondos impactantes e incluso transiciones y efectos 3D espectaculares.<\/p>\n

Todo desarrollador front-end empieza con HTML y CSS. Por lo tanto, cuando aprendas a usar React, deber\u00edas dominar la programaci\u00f3n en HTML y CSS.<\/p>\n

El primer requisito para aprender Reactjs es empezar a aprender HTML y CSS. Necesitas saber c\u00f3mo crear etiquetas HTML sem\u00e1nticas, escribir selectores CSS, usar clases, sobrescribir CSS, implementar el modelo de caja y cambiar a border-box y flexbox, adem\u00e1s de HTML y CSS para aplicaciones front-end y aplicaciones web responsivas. .<\/p>\n

Conceptos b\u00e1sicos de JavaScript y ES6<\/h5>\n

La pr\u00f3xima versi\u00f3n de JavaScript, ECMAScript 6 o ES6, trae muchos cambios y nuevas funciones. Tu c\u00f3digo ser\u00e1 m\u00e1s moderno y legible gracias a las incre\u00edbles nuevas funciones y la nueva sintaxis JavaScript de ES6. Podr\u00e1s hacer m\u00e1s con menos c\u00f3digo. Aprenderemos sobre algunas de las incre\u00edbles novedades de ES6, como m\u00f3dulos, cadenas de plantilla, destructores de clases y funciones flash.<\/p>\n

Antes de aprender React, deber\u00edas dominar ES6, ya que los hooks han reemplazado a los componentes basados en clases. Notar\u00e1s que los hooks hacen un uso extensivo de las caracter\u00edsticas de ES6.<\/p>\n

Te resultar\u00e1 dif\u00edcil usar React si no te sientes c\u00f3modo escribiendo funciones de flecha porque varios ganchos requieren que anides funciones de flecha dentro de otros, lo que puede resultar confuso.<\/p>\n

Dado que React JS es totalmente compatible con ES6, aprender y comprender ES6 mejorar\u00e1 tu vida como desarrollador de React JS y Javascript porque hace que leer y escribir c\u00f3digo React JS sea mucho m\u00e1s f\u00e1cil.<\/p>\n

Git y CLI (interfaz de l\u00ednea de comandos)<\/h5>\n

Cuando se trata del proceso de desarrollo de software, Git es una herramienta muy importante y efectiva.<\/p>\n

Git es esencialmente un sistema de control de versiones distribuido para el seguimiento de los cambios en el c\u00f3digo fuente durante el desarrollo de aplicaciones. Git permite supervisar el progreso en cualquier sistema de archivos, incluso si se cre\u00f3 para facilitar la colaboraci\u00f3n entre desarrolladores.<\/p>\n

\"\"<\/p>\n

Aprenda a usar todos los comandos como push, pull, append, commit, etc., ya que los necesitar\u00e1 para controlar la versi\u00f3n de sus archivos. Adem\u00e1s, aprenda a fusionar, ramificar y gestionar conflictos de fusi\u00f3n.<\/p>\n

La CLI (Interfaz de L\u00ednea de Comandos) te ayudar\u00e1 a realizar todas las acciones en React. Debes familiarizarte con ella, ya que puede usarse para diversas tareas, como instalar paquetes, usar NPM, compilar y ejecutar aplicaciones React, entre otras.<\/p>\n

Administrador de paquetes (Node + Npm)<\/h5>\n

Al usar ReactJS, es fundamental instalar varios paquetes de software m\u00e1s peque\u00f1os. Los paquetes de Node son bibliotecas de JavaScript que contienen todos los archivos necesarios. Los m\u00f3dulos son bibliotecas de JavaScript que se incluyen en los proyectos de Node. Los paquetes contienen dos elementos: archivos .js y archivos package.json. Necesita un buen instalador para instalar estos paquetes, ya que facilita la descarga y configuraci\u00f3n de la aplicaci\u00f3n sin preocuparse por las dependencias.<\/p>\n

Aqu\u00ed es donde entra en juego el Gestor de Paquetes de Node (NPM), que te ayuda a instalar y administrar aplicaciones JavaScript. Puedes instalar NPM instalando primero Node.js. NPM se configura autom\u00e1ticamente al instalar Node.js.<\/p>\n

Puedes descargar Nodejs desde el sitio oficial. Haz clic aqu\u00ed.<\/p>\n

La mejor manera de comenzar a crear una nueva aplicaci\u00f3n de una sola p\u00e1gina en React es usar Create React App, que es un entorno conveniente para aprender React.<\/p>\n

Los siguientes comandos crear\u00e1n un proyecto de ejemplo. Puedes seguir estos pasos para empezar:<\/p>\n

\n
npx create-react-app my-app\r\ncd my-app\r\nnpm start<\/code><\/pre>\n<\/div>\n
As\u00ed que, antes de empezar a usar React, deber\u00edas familiarizarte con el registro de NPM (Gestor de Paquetes de Nodo) y las t\u00e9cnicas de instalaci\u00f3n de paquetes. En resumen, el registro de NPM es el lugar donde los desarrolladores acceden para obtener el software que necesitan para desarrollar.<\/p>\n
Variables ES6 \u2013 Let y Const<\/h5>\n
Antes de ES6, los desarrolladores declaraban variables con o sin la palabra clave var. \u00a1Sin embargo, todo ha cambiado!<\/p>\n
JavaScript entr\u00f3 en la era moderna con ES6, que a\u00f1adi\u00f3 dos nuevas palabras clave para definir variables: let y const. Se diferencian en su \u00e1mbito, que determina si una variable puede usarse y d\u00f3nde. Las variables pueden encontrarse dentro de una funci\u00f3n, dentro de un bloque o fuera de una funci\u00f3n y un bloque.<\/p>\n
var: Nivel de alcance de la funci\u00f3n: esta palabra clave no permite el acceso a las variables declaradas dentro de las funciones desde el exterior.<\/p>\n
let: Nivel de alcance del bloque: la palabra clave let hace que las variables sean accesibles fuera del alcance de la declaraci\u00f3n.<\/p>\n
const: \u00c1mbito a nivel de bloque. La palabra clave const es similar a las variables declaradas con la palabra clave let. El valor de una constante no se puede modificar mediante redeclaraci\u00f3n ni reasignaci\u00f3n.<\/p>\n
Funciones de flecha<\/h5>\n
Las funciones de flecha son una nueva caracter\u00edstica de la versi\u00f3n ES6 de JavaScript. En comparaci\u00f3n con las funciones normales, permiten escribir funciones de forma m\u00e1s sencilla.<\/p>\n
    \n
  • Simplifica el c\u00f3digo y lo hace m\u00e1s f\u00e1cil de leer.<\/li>\n
  • El mayor beneficio del "this" contextual es que elimina la necesidad de "vincular" funciones.<\/li>\n
  • Las funciones de flecha son compatibles en su mayor\u00eda con todos los navegadores actuales.<\/li>\n<\/ul>\n
    \n
    let x = (x, y) => x * y;<\/code><\/pre>\n<\/div>\n
    Exportaciones e importaciones<\/h5>\n
    Podemos crear m\u00f3dulos en JavaScript usando ES6. Un m\u00f3dulo puede contener clases, funciones, variables y objetos. Con los m\u00f3dulos JavaScript, puedes dividir tu c\u00f3digo en diferentes archivos. Como resultado, el c\u00f3digo base se mantiene f\u00e1cilmente.<\/p>\n
    Podemos usar los comandos de exportaci\u00f3n e importaci\u00f3n para que todos est\u00e9n disponibles en otro archivo. La exportaci\u00f3n e importaci\u00f3n de miembros en un m\u00f3dulo se realiza mediante las palabras clave export e import.<\/p>\n
    Operador de descanso y expansi\u00f3n<\/h5>\n
    Los operadores de propagaci\u00f3n y resto en JavaScript se representan con tres puntos (\u2026). Sin embargo, estos dos operadores no son exactamente iguales. La principal diferencia entre ambos radica en que, al usar el operador resto, un array de JavaScript se llena con el resto de un conjunto espec\u00edfico de valores proporcionados por el usuario. Sin embargo, una sintaxis expandida expande un iterable a sus elementos.<\/p>\n
    Desestructuraci\u00f3n de la estructura de objetos y matrices<\/h5>\n
    La desestructuraci\u00f3n es el proceso de descomprimir los componentes individuales de un objeto o matriz. Permite modificar e intercambiar elementos despu\u00e9s de descomprimirlos, seg\u00fan la acci\u00f3n deseada.<\/p>\n
    JavaScript utiliza corchetes [] para destruir matrices, lo que nos permite almacenar el nombre de una variable asignada al nombre de la matriz que contiene el elemento.<\/p>\n
    Al destruir un objeto, usamos llaves con el nombre exacto del objeto que contiene. En el caso de los objetos, a diferencia de los arrays, donde podemos usar cualquier nombre de variable, solo podemos usar el nombre de los datos almacenados para abrir el elemento.<\/p>\n
    Literales de plantilla<\/h5>\n
    En ES6, Template Literal introduce nuevas funciones que permiten generar cadenas con mayor flexibilidad que las cadenas din\u00e1micas. Generalmente, una cadena se genera con comillas simples (') o dobles (\u2018).<\/p>\n
    El formato literal es una cadena literal que permite incrustar expresiones mediante comillas invertidas ( ). Permite la interpolaci\u00f3n de cadenas y la creaci\u00f3n de cadenas multil\u00ednea. Anteriormente, esta cadena se conoc\u00eda como cadena de patr\u00f3n.<\/p>\n
    Filtro y reducci\u00f3n de mapas<\/h5>\n
    Existen tres funciones de matriz en JavaScript: map, reduce y filter. Cada una realiza una transformaci\u00f3n u operaci\u00f3n en una matriz durante la iteraci\u00f3n. Cada una genera una nueva matriz en respuesta a la salida de la funci\u00f3n.<\/p>\n
    Utilizando el m\u00e9todo map(), se crea una matriz aplicando una funci\u00f3n a cada elemento de la matriz anterior.<\/p>\n
    El m\u00e9todo filter() aplica una sentencia condicional a cada elemento del array. Si la condici\u00f3n devuelve verdadero, inserta un elemento en el array de salida. Si la condici\u00f3n devuelve falso, los elementos no se insertan en el array de salida.<\/p>\n
    Las matrices de valores se reducen a un solo n\u00famero mediante el m\u00e9todo reduce(). Cada elemento de la matriz se ejecuta mediante una funci\u00f3n reductora para generar el valor de salida.<\/p>\n
    Clases<\/h5>\n
    JavaScript ES6 introduce las clases como una nueva caracter\u00edstica. Los objetos se dise\u00f1an mediante clases y se pueden crear a partir de ellas.<\/p>\n
    Esta clase se puede comparar con un prototipo b\u00e1sico de casa. Contiene toda la informaci\u00f3n sobre las habitaciones, entradas, etc. Se construye la casa usando esta descripci\u00f3n como gu\u00eda. El objeto es la casa. Podemos generar varios objetos de la misma clase, ya que se pueden construir varias casas con las mismas especificaciones.<\/p>\n
    \n
    \/\/ creation of a class\r\nclass Home {\r\nconstructor(area) {\r\nthis.area = area;\r\n}\r\n}\r\n\/\/ creation of an object\r\nconst home1 = New Home(100);<\/code><\/pre>\n<\/div>\n
    Empieza por estudiar los componentes funcionales. Los hooks de React son m\u00e1s f\u00e1ciles de usar y requieren menos l\u00edneas de c\u00f3digo para lograr los mismos objetivos que sus equivalentes basados en clases.<\/p>\n
    Aunque no todos reescriben sus aplicaciones con componentes funcionales, tambi\u00e9n conviene tener en cuenta los componentes de clase. Esto se debe a que la mayor\u00eda de las aplicaciones se desarrollan con componentes de clase.<\/p>\n
    En comparaci\u00f3n con los componentes funcionales, crear componentes de clase en React JS es m\u00e1s complejo. Como parte de una clase de React JS, encontrar\u00e1s constructores, m\u00e9todos de ciclo de vida, funciones de renderizado e incluso gesti\u00f3n de estados para gestionar tus datos.<\/p>\n
    Esto en el navegador<\/h5>\n
    En JavaScript, la palabra clave THIS de una funci\u00f3n funciona de forma ligeramente diferente a otros lenguajes. Tambi\u00e9n distingue entre casos estrictos y no estrictos.<\/p>\n
    El valor de THIS suele determinarse seg\u00fan c\u00f3mo se llama a una funci\u00f3n (ejecuci\u00f3n en tiempo de ejecuci\u00f3n). Al llamar a la funci\u00f3n, puede tener un valor diferente cada vez, ya que no se puede establecer mediante asignaci\u00f3n durante la ejecuci\u00f3n. Esta funci\u00f3n se puede establecer independientemente de c\u00f3mo se llame mediante el m\u00e9todo bind().<\/p>\n
    Promesas y espera asincr\u00f3nica<\/h5>\n
    En JavaScript o Node.js, existen diferentes maneras de gestionar operaciones. Diferentes operaciones operan simult\u00e1neamente durante la ejecuci\u00f3n asincr\u00f3nica, y la salida de cada operaci\u00f3n se procesa en cuanto se accede a ella.<\/p>\n
    Una promesa en NodeJS es similar a una promesa en el mundo real. Garantiza que una acci\u00f3n se realizar\u00e1. Una promesa controla lo que sucede despu\u00e9s de un evento asincr\u00f3nico y registra si el evento se ha realizado o no.<\/p>\n
    Las promesas se gestionan mediante m\u00e9todos asincr\u00f3nicos que utilizan Async\/Await. El c\u00f3digo se ha refactorizado recientemente para facilitar su lectura y uso. Esto simplifica la programaci\u00f3n asincr\u00f3nica, haci\u00e9ndola m\u00e1s similar al c\u00f3digo sincr\u00f3nico.<\/p>\n
    \u00bfPor qu\u00e9 las empresas prefieren Reactjs?<\/h2>\n
      \n
    1. Los componentes se escriben de forma m\u00e1s fluida: la eficiencia del c\u00f3digo JavaScript se puede aumentar con JSX.<\/li>\n
    2. Adem\u00e1s de aumentar la eficiencia, simplifica el mantenimiento en el futuro.<\/li>\n
    3. Con \u00e9l la renderizaci\u00f3n se realiza m\u00e1s r\u00e1pidamente.<\/li>\n
    4. Se incluyen herramientas \u00fatiles para desarrolladores.<\/li>\n
    5. Solicitud de una sola p\u00e1gina (SPA)<\/li>\n
    6. La conexi\u00f3n de datos es unidireccional, similar a un flujo de datos unidireccional.<\/li>\n
    7. Optimizado para SEO<\/li>\n<\/ol>\n
      Resultado<\/h2>\n
      React JS es una biblioteca front-end de c\u00f3digo abierto. Su objetivo principal es dise\u00f1ar interfaces de usuario para aplicaciones web y m\u00f3viles que sean r\u00e1pidas y atractivas. Los requisitos esenciales para ReactJS son HTML y CSS, conocimientos b\u00e1sicos de JavaScript y ES6, Git y CLI (Interfaz de L\u00ednea de Comandos) y el Gestor de Paquetes (Node + Npm). Solo necesitas saber sobre variables ES6, funciones de flecha, exportaciones e importaciones, operadores Rest y spread, destructores de objetos, arrays y la palabra clave "this" en JavaScript. Un alfabeto de patrones es un literal de cadena que permite incrustar expresiones mediante comillas invertidas. Existen tres funciones de array en JavaScript: map, reduce y filter, que realizan operaciones al iterar sobre un array.<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n: React JS es una biblioteca front-end de c\u00f3digo abierto. Su prop\u00f3sito principal es crear interfaces de usuario\u2026","protected":false},"author":1,"featured_media":16224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","_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,363],"tags":[384,435,400],"class_list":{"0":"post-16223","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script","10":"tag-programming","11":"tag-react-js"},"yoast_head":"\n\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \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\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T12:33:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.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\\\/prerequisites-for-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"wordCount\":185,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"keywords\":[\"Java Script\",\"programming\",\"React.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\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\\\/prerequisites-for-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"name\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-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\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\"}]},{\"@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":"Requisitos previos para aprender ReactJS - 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\/prerequisites-for-react-js\/","og_locale":"es_ES","og_type":"article","og_title":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc…","og_url":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/prerequisites-for-react-js\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-10-21T12:33:31+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.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\/prerequisites-for-react-js\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","datePublished":"2024-10-21T12:33:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"wordCount":185,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","keywords":["Java Script","programming","React.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\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\/prerequisites-for-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","name":"Requisitos previos para aprender ReactJS - Blog de ITPiran","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","datePublished":"2024-10-21T12:33:31+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-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":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS"}]},{"@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\/16223","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=16223"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/16223\/revisions"}],"predecessor-version":[{"id":16227,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/16223\/revisions\/16227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/16224"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=16223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=16223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=16223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}