{"id":22571,"date":"2025-04-08T13:00:00","date_gmt":"2025-04-08T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=22571"},"modified":"2025-05-19T15:33:46","modified_gmt":"2025-05-19T13:33:46","slug":"reactjs-conceptos-de-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/reactjs-conceptos-de-javascript\/","title":{"rendered":"ReactJS: Conceptos de JavaScript a repasar antes de empezar con React"},"content":{"rendered":"\n
Para empezar con ReactJS es fundamental tener una base s\u00f3lida de JavaScript, as\u00ed que antes de embarcarte en dicha aventura, te recomendamos que hayas dedicado tiempo a tener problemas desarrollando proyectos con JavaScript sin ayuda de otras librer\u00edas.<\/p>\n\n\n\n
En este post no vas a aprender JavaScript, si no repasaremos algunos de los conceptos clave de JavaScript para React<\/strong> que debes dominar antes de comenzar.<\/p>\n\n\n\n
Import y Export<\/h2>\n\n\n\n
React divide el c\u00f3digo en m\u00faltiples archivos y m\u00f3dulos, lo que hace indispensable conocer c\u00f3mo importar y exportar funciones, objetos o componentes. Y se puede exportar las funciones y las variables por nombre o por defecto, donde por nombre permite exportar todas las que quieras por m\u00f3dulo, mientras por defecto solo una vez.<\/p>\n\n\n\n
\/\/ Exports con nombre<\/strong>\nexport const planeta = \"Marte\";\nexport function calcularGravedad(masa, radio) {\n return (6.674 * Math.pow(10, -11) * masa) \/ Math.pow(radio, 2);\n}\n\n\/\/ Imports con nombre<\/strong>\nimport { planeta, calcularGravedad } from \".\/espacio\";<\/code><\/pre>\n\n\n\n
\/\/ Exports por defecto<\/strong>\nexport default function velocidadEscape(masa, radio) {\n return Math.sqrt((2 * 6.674 * Math.pow(10, -11) * masa) \/ radio);\n}\n\n\/\/ Imports por defecto<\/strong>\nimport velocidadEscape from \".\/espacio\";<\/code><\/pre>\n\n\n\n
Por lo general, al iniciar un proyecto con React podremos usar m\u00f3dulos directamente, pero en JavaScript tendremos que importar el script como type=\"module<\/code>\u00bb en el HTML. De hecho, React en el archivo index.html<\/code> lo importa as\u00ed:<\/p>\n\n\n\n
Los arrays <\/em>en React <\/em>son fundamentales, ya que se utilizan para renderizar listas de elementos de manera din\u00e1mica. Estos son los m\u00e9todos que m\u00e1s se van a usar en React. Recalcar el uso de map <\/code>en vez de forEach<\/code>, porque, map<\/code> no muta el array<\/em>, sino que devuelve un resultado. Los siguientes m\u00e9todos no mutan el array <\/em>principal:<\/p>\n\n\n\n
\n
map<\/code><\/strong>: Transforma cada elemento del array <\/em>y devuelve un nuevo array<\/em>.<\/li>\n\n\n\n
filter<\/code><\/strong>: Filtra los elementos seg\u00fan una condici\u00f3n.<\/li>\n\n\n\n
reduce<\/code><\/strong>: Reduce un array a un solo valor acumulado.<\/li>\n<\/ul>\n\n\n\n
podr\u00edamos pensar en hacerlo as\u00ed para juntar dos arrays<\/em>, pero nos dar\u00eda el siguiente resultado:<\/p>\n\n\n\n
const flotaEspacial = [navesExploradoras, nuevasNaves];\n\/\/ Esto genera: [[\"X-Wing\", \"TIE Fighter\"], [\"Halc\u00f3n Milenario\"]] (un array dentro de otro)<\/code><\/pre>\n\n\n\n
Usando el operador spread,<\/em> en cambio:<\/p>\n\n\n\n
const flotaUnificada = [...navesExploradoras, ...nuevasNaves];\n\/\/ Esto genera: [\"X-Wing\", \"TIE Fighter\", \"Halc\u00f3n Milenario\"] (fusiona los arrays en uno solo)<\/code><\/pre>\n\n\n\n
Desestructuraci\u00f3n de Objetos y Arrays<\/em><\/h2>\n\n\n\n
La desestructuraci\u00f3n hace que el c\u00f3digo sea m\u00e1s limpio y f\u00e1cil de leer, especialmente en los props <\/em>de React. No es m\u00e1s que extraer los elementos o los paros de los objetos y arrays<\/em><\/p>\n\n\n\n
\n\/\/ Con arrays\nconst galaxias = [\"V\u00eda L\u00e1ctea\", \"Andr\u00f3meda\"];\n\nconst [primeraGalaxia, segundaGalaxia] = galaxias;\nconsole.log(`Las galaxias son ${primeraGalaxia} y ${segundaGalaxia}.`);\n\n\/\/ Con objetos\nconst satelite = { nombre: \"Luna\", planeta: \"Tierra\" };\n\nconst { nombre, planeta } = satelite;\nconsole.log(`${nombre} orbita alrededor de ${planeta}`);<\/code><\/pre>\n\n\n\n
Pasar Funciones como Propiedades<\/h2>\n\n\n\n
En React, los componentes pueden recibir funciones como propiedades (props<\/em>) para manejar eventos o actualizar el estado de los componentes. Esto permite que un componente hijo pueda ejecutar funciones definidas en su componente padre, lo que facilita la comunicaci\u00f3n entre ellos. Es especialmente \u00fatil para manejar eventos, actualizar el estado o modificar datos en la aplicaci\u00f3n.<\/p>\n\n\n\n
Las funciones arrow <\/em>(=><\/code>) permiten escribir funciones m\u00e1s concisas y son geniales para callbacks <\/em>y m\u00e9todos de array <\/em>como map<\/code>, filter<\/code> y reduce<\/code>, ya que simplifican la sintaxis y hacen el c\u00f3digo m\u00e1s ordenado y f\u00e1cil de leer.<\/p>\n\n\n\n
const orbitar = planeta => `El planeta ${planeta} est\u00e1 en \u00f3rbita.`;\nconsole.log(orbitar(\"Saturno\"));\n\nconst calcularDistancia = (velocidad, tiempo) => velocidad * tiempo;\nconsole.log(calcularDistancia(30000, 5)); \/\/ 150000 km<\/code><\/pre>\n\n\n\n
Template Literals<\/h2>\n\n\n\n
Los template literal<\/em>s permiten escribir cadenas de texto de manera m\u00e1s c\u00f3moda, integrando las variables de JavaScript dentro, sin tener que estar partiendo la cadena y uni\u00e9ndola con \u00ab+\u00bb. Se hacen utilizando los backtick <\/em>` `<\/code>, en vez de las comillas simples ' '<\/code> o dobles \u00bb \u00ab. Y para insertar el JavaScript en l\u00ednea ${miVariable}<\/code>. Adem\u00e1s, hacen una interpretaci\u00f3n literal, de espacios y saltos de l\u00ednea.<\/p>\n\n\n\n
const estrella = \"Sol\";\nconsole.log(`Nuestra estrella principal es el ${estrella}.`);<\/code><\/pre>\n\n\n\n
Operador Ternario<\/h2>\n\n\n\n
El operador ternario no es otra cosa que un condicional (el if<\/code>) de toda la vida que va a permitir condicionar el renderizado de JSX en React, pero que ser\u00eda algo as\u00ed como condicionar la salida de las cadenas de texto, vamos con un ejemplo:<\/p>\n\n\n\n
const esHabitable = true;\nconst mensaje = esHabitable ? \"Este planeta es habitable.\" : \"Este planeta no es habitable.\";\nconsole.log(mensaje);<\/code><\/pre>\n\n\n\n
Promesas y async\/await<\/code><\/h2>\n\n\n\n
React maneja datos as\u00edncronos (por ejemplo, llamadas a API<\/em>), por lo que recordar sobre todo fetch<\/code> y async\/await<\/code> es clave.<\/p>\n\n\n\n
Async\/await<\/code><\/strong> simplifica el uso de promesas, le a\u00f1ade una capa mucho m\u00e1s c\u00f3moda en comparaci\u00f3n a hacerlo con callbacks <\/em>o con las promesas (.then<\/em>) en s\u00ed, lo que se llama syntactic sugar<\/em>. <\/p>\n\n\n\n
Su uso: async <\/code>declara funciones que devuelven promesas, y await<\/code> pausa la ejecuci\u00f3n hasta resolverlas. Los posibles se gestionan con try\/catch<\/code>. Conseguimos as\u00ed un c\u00f3digo m\u00e1s legible y control estructurado, adem\u00e1s que es mucho m\u00e1s f\u00e1cil identificar funciones as\u00edncronas.<\/p>\n\n\n\n
Dominar estos conceptos de JavaScript para React<\/strong> te prepara para entender la l\u00f3gica detr\u00e1s del JSX <\/em>y los componentes, escribir c\u00f3digo m\u00e1s limpio y mantenible y evitar errores comunes al manejar props <\/em>y estados<\/p>\n\n\n\n
![\"ReactJS:](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/03\/ReactJS-Conceptos-de-JavaScript-a-repasar-antes-de-empezar-con-React-2.jpg\")
<\/figure>\n<\/div>\n\n\n