En este tutorial, hablaremos de React \u2014 la biblioteca de JavaScript basada en componentes m\u00e1s popular<\/a> utilizada para crear interfaces de usuario. Aunque este tutorial ser\u00e1 totalmente apto para principiantes, tambi\u00e9n puede servir como gu\u00eda de referencia para los desarrolladores experimentados de React.<\/p>\n\n Hablaremos de las caracter\u00edsticas de React, los pros y los contras, por qu\u00e9 deber\u00edas usarlo y c\u00f3mo instalar y usar React. Tambi\u00e9n veremos algunas de las funcionalidades principales de React utilizando ejemplos pr\u00e1cticos de c\u00f3digo.<\/p>\n Al final de este tutorial, deber\u00edas entender qu\u00e9 es React y c\u00f3mo funciona, y ser capaz de utilizarlo en la construcci\u00f3n de proyectos incre\u00edbles. React.js, com\u00fanmente llamado simplemente React, es una biblioteca de JavaScript<\/a> que se utiliza para construir interfaces de usuario. Toda aplicaci\u00f3n web React se compone de componentes reutilizables que conforman partes de la interfaz de usuario \u2014 podemos tener un componente distinto para nuestra barra de navegaci\u00f3n, otro para el pie de p\u00e1gina, otro para el contenido principal, etc. Entender\u00e1s mejor esto cuando lleguemos a la secci\u00f3n en la que tenemos que trabajar con componentes.<\/p>\n Tener estos componentes reutilizables facilita el desarrollo porque no tenemos que repetir el c\u00f3digo reiterativo. S\u00f3lo tendr\u00edamos que crear su l\u00f3gica e importar el componente en cualquier parte del c\u00f3digo donde se necesite.<\/p>\n React tambi\u00e9n es una aplicaci\u00f3n de una sola p\u00e1gina. Por tanto, en lugar de enviar una petici\u00f3n al servidor cada vez que hay que renderizar una nueva p\u00e1gina, el contenido de la p\u00e1gina se carga directamente desde los componentes de React. Esto conduce a una renderizaci\u00f3n m\u00e1s r\u00e1pida sin recargas de la p\u00e1gina.<\/p>\n En la mayor\u00eda de los casos, la sintaxis utilizada para construir aplicaciones React se llama JSX (JavaScript XML), que es una extensi\u00f3n de la sintaxis de JavaScript<\/a>. Esto nos permite combinar la l\u00f3gica de JavaScript y la l\u00f3gica de la interfaz de usuario de una manera \u00fanica. Con JSX, eliminamos la necesidad de interactuar con el DOM utilizando m\u00e9todos como Aunque el uso de JSX no es obligatorio, facilita el desarrollo de aplicaciones React.<\/p>\n Aqu\u00ed tienes un ejemplo de c\u00f3mo podemos utilizar JSX en React:<\/p>\n En el c\u00f3digo anterior, utilizamos un componente funcional de React para mostrar un texto en el navegador. El nombre del componente es A continuaci\u00f3n, pasamos esta variable al marcado utilizando llaves. Esto no es HTML, sino la sintaxis para escribir c\u00f3digo utilizando JSX.<\/p>\n En la siguiente secci\u00f3n, repasaremos algunas de las razones por las que deber\u00edas utilizar React.<\/p>\n Muchos desarrolladores<\/a> y organizaciones han elegido React en lugar de otras bibliotecas\/frameworks; veamos el motivo a continuaci\u00f3n:<\/p>\n React ha sido utilizado por muchos ingenieros de front-end tanto en startups como en empresas establecidas como Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times, y m\u00e1s.<\/p>\n Aunque todas las empresas mencionadas no construyeron todo su producto con React, algunas de sus p\u00e1ginas se construyeron con React. Esto se debe al alto rendimiento, la facilidad de uso y la escalabilidad de React.<\/p>\n React se utiliza generalmente para construir la interfaz de usuario (frontend) de las aplicaciones web. Ofrece una r\u00e1pida renderizaci\u00f3n de las p\u00e1ginas y un mayor rendimiento. React puede utilizarse para construir cualquier producto que se ejecute en la web.<\/p>\n \u00c9stas son algunas de las cosas para las que se suele utilizar React:<\/p>\n React tiene una pl\u00e9tora de caracter\u00edsticas incre\u00edbles que siguen haciendo que sea una opci\u00f3n muy popular para los desarrolladores.<\/p>\n Estas son algunas de las caracter\u00edsticas principales de React:<\/p>\n Puede que React sea una herramienta muy popular para construir nuestra interfaz de usuario, pero todav\u00eda hay razones por las que algunos desarrolladores o principiantes deciden no utilizarla.<\/p>\n En esta secci\u00f3n, hablaremos de las ventajas y desventajas de React.<\/p>\n Estos son los pros de usar React:<\/p>\n Estos son algunos de los contras de usar React:<\/p>\n En esta secci\u00f3n, hablaremos primero de los requisitos previos para usar React y luego nos sumergiremos en la configuraci\u00f3n de una aplicaci\u00f3n React, la creaci\u00f3n de componentes, el manejo de eventos y el trabajo con estados, hooks<\/a> y accesorios en React.<\/p>\n Antes de utilizar React, debes tener una buena comprensi\u00f3n y experiencia de JavaScript<\/a>. Estos son algunos de los temas de JavaScript que recomendamos repasar antes de usar React:<\/p>\n La mayor\u00eda de estos temas est\u00e1n incluidos en ES6. Tambi\u00e9n deber\u00edas tener experiencia usando HTML<\/a>, ya que el marcado forma parte de la sintaxis de JSX.<\/p>\n Antes de instalar React, aseg\u00farate de que tienes Node.js instalado en tu ordenador<\/a>.<\/p>\n Una vez que lo hayas instalado correctamente, ejecuta el siguiente comando en tu terminal:<\/p>\n Si todo ha ido bien, el comando anterior deber\u00eda decirte qu\u00e9 versi\u00f3n de Node.js est\u00e1 instalada actualmente en tu ordenador.<\/p>\n A continuaci\u00f3n, vamos a ejecutar otro comando para empezar a instalar React.<\/p>\n En primer lugar, crea una carpeta o navega hasta la ubicaci\u00f3n en la que quieres que se instale la aplicaci\u00f3n React, y luego ejecuta el siguiente comando en tu terminal:<\/p>\n El comando anterior va a instalar React en una carpeta llamada react-kit<\/strong>.<\/p>\n Una vez completada la instalaci\u00f3n, abre la carpeta de React reci\u00e9n instalada en el editor de c\u00f3digo<\/a> de tu elecci\u00f3n. En este tutorial utilizaremos Visual Studio Code. Visual Studio Code viene con un terminal integrado. Si vas a utilizar un terminal diferente, como Git Bash o CMD, s\u00f3lo tienes que ir al directorio de tu aplicaci\u00f3n React y ejecutar el siguiente comando:<\/p>\n Este comando pone en marcha tu servidor de desarrollo. Al cabo de un rato, deber\u00edas tener esta p\u00e1gina de abajo renderiz\u00e1ndose en localhost:3000<\/strong> en tu navegador:<\/p>\n Si has llegado hasta este punto, entonces has instalado con \u00e9xito tu primera aplicaci\u00f3n React. \u00a1Enhorabuena!<\/p>\n Cuando eches un vistazo a tu estructura de carpetas, ver\u00e1s una carpeta llamada public<\/strong>. Esta carpeta tiene un archivo index.html<\/strong> donde se inyectar\u00e1 nuestro c\u00f3digo y se servir\u00e1 al navegador.<\/p>\n La carpeta src<\/strong> es donde vivir\u00e1 toda nuestra l\u00f3gica, estilo y marcado; es nuestra carpeta de desarrollo con el archivo App.js<\/strong> que act\u00faa como componente ra\u00edz. El c\u00f3digo de este archivo es el que tenemos en la imagen anterior.<\/p>\n Abre el archivo App.js<\/strong> y haz algunos cambios en el archivo, luego guarda para ver que se refleja autom\u00e1ticamente en el navegador.<\/p>\n \u00bfTodo listo? \u00a1Ahora vamos a escribir algo de c\u00f3digo!<\/p>\n Hay dos tipos principales de componentes en React: componentes de clase y componentes funcionales. Actualmente se est\u00e1 reescribiendo la documentaci\u00f3n de React utilizando Hooks, que es una caracter\u00edstica que se encuentra en los componentes funcionales. En este tutorial tambi\u00e9n utilizaremos componentes funcionales, ya que se han convertido en los componentes m\u00e1s utilizados en las aplicaciones React.<\/p>\n En la mayor\u00eda de los casos, los componentes devuelven algo de c\u00f3digo HTML<\/a> con una mezcla de valores din\u00e1micos creados mediante JavaScript. Los componentes se crean como funciones en JavaScript.<\/p>\n Veamos un ejemplo de componente de clase en React.<\/p>\n Todo componente de clase debe incluir la declaraci\u00f3n En el componente anterior, hemos creado una variable de estado llamada Cuando esto se renderice en el navegador, veremos \u00abEstoy aprendiendo JavaScript\u00bb renderizado en la p\u00e1gina.<\/p>\n En esta secci\u00f3n, recrearemos el ejemplo de la \u00faltima secci\u00f3n utilizando un componente funcional.<\/p>\n A\u00f1ade esta funci\u00f3n a tu archivo:<\/p>\n El nombre de nuestro componente es el mismo: Este componente tambi\u00e9n tiene una variable Los eventos utilizados en React son totalmente similares a los que utilizamos en HTML<\/a>. La \u00fanica diferencia es que los eventos de React se escriben en sintaxis camelCase. As\u00ed, \u00abonclick\u00bb ser\u00eda \u00abonClick\u00bb en React, \u00abonchange\u00bb ser\u00eda \u00abonChange\u00bb, etc.<\/p>\n Al pasar un evento como atributo en una etiqueta HTML, utilizamos las llaves: Aqu\u00ed tienes un ejemplo (en el archivo App.js<\/strong>):<\/p>\n En el c\u00f3digo anterior, hemos creado una funci\u00f3n que avisa de un mensaje en el navegador. Tambi\u00e9n hemos creado un bot\u00f3n que llama a esta funci\u00f3n cuando se hace clic. El manejador de eventos utilizado aqu\u00ed es el manejador de eventos Te habr\u00e1s dado cuenta de que el nombre de la funci\u00f3n est\u00e1 entre corchetes y no entre comillas. As\u00ed es como se pasan los valores din\u00e1micos, como los nombres de las variables y las funciones, en el marcado cuando se utiliza JSX.<\/p>\n Adem\u00e1s, en lugar de usar \u00abclass\u00bb como har\u00edamos al usar HTML, estamos usando \u00abclassName\u00bb. Esto se debe a que \u00abclass\u00bb es una palabra reservada en JavaScript.<\/p>\n Exportamos nuestro componente en la \u00faltima l\u00ednea. Esto nos permite importarlos en otros componentes.<\/p>\n Para gestionar el estado de nuestra aplicaci\u00f3n en React, utilizamos un hook llamado Con los Hooks, podemos gestionar el estado de nuestro componente, e incluso realizar ciertos efectos cuando nuestras variables de estado se renderizan por primera vez o se modifican.<\/p>\n Sin el hook Veamos un ejemplo.<\/p>\n Ahora, echemos un vistazo a lo que acabamos de hacer.<\/p>\n Primero importamos el hook A continuaci\u00f3n, creamos una funci\u00f3n llamada changeName<\/strong>, que utiliza la funci\u00f3n setName<\/strong> para actualizar el valor de la variable name<\/strong>.<\/p>\n En nuestro marcado, una vez que se hace clic en el bot\u00f3n, \u00abJohn\u00bb se cambia por \u00abJames\u00bb.<\/p>\n En la siguiente secci\u00f3n, veremos c\u00f3mo utilizar otro hook en React.<\/p>\n En la \u00faltima secci\u00f3n, vimos c\u00f3mo gestionar el estado de nuestra aplicaci\u00f3n utilizando el hook El Hook Veamos algunos ejemplos:<\/p>\n Lo primero que hicimos aqu\u00ed fue importar el Hook Cada vez que hacemos clic en el bot\u00f3n, la variable name<\/strong> se incrementa en uno, este cambio en el valor de name<\/strong> hace que el Hook En la siguiente secci\u00f3n, hablaremos de los Props y del flujo de datos entre componentes.<\/p>\n Los Props nos permiten pasar datos de un componente a otro. Esto hace que el flujo de datos en nuestra aplicaci\u00f3n sea din\u00e1mico y mantenible. Props es la abreviatura de propiedades.<\/p>\n Veamos un ejemplo de c\u00f3mo podemos utilizar Props.<\/p>\n Este es el aspecto de nuestro archivo App.js<\/strong>:<\/p>\n Creamos otro componente llamado Bio.js<\/strong> que tiene el siguiente aspecto:<\/p>\n A continuaci\u00f3n, importaremos el componente Bio<\/strong> a nuestro componente App<\/strong> de la siguiente manera<\/p>\n En la primera l\u00ednea importamos el componente Bio<\/strong>. A continuaci\u00f3n, colocamos el componente entre las etiquetas Ahora entiendes c\u00f3mo el c\u00f3digo puede ser reutilizable en React. Pero este c\u00f3digo es est\u00e1tico; ser\u00e1 el mismo en cualquier componente en el que se utilice. Esto no ser\u00e1 eficiente en los casos en los que queramos utilizar el mismo componente pero con diferente informaci\u00f3n.<\/p>\n Arreglemos eso usando Props.<\/p>\n En el componente Bio.js<\/strong>, haz lo siguiente<\/p>\n Primero desestructuramos y pasamos Exportamos el componente en la \u00faltima l\u00ednea de c\u00f3digo: Por el momento, no podemos ver ning\u00fan valor que se muestre. Lo haremos en el componente App<\/strong>; he aqu\u00ed c\u00f3mo:<\/p>\n Hemos a\u00f1adido atributos a nuestra etiqueta Bio<\/strong> que se corresponden con los props que hemos creado antes. Cualquier valor que pasemos en esos atributos se mostrar\u00e1 en el navegador. Esto es importante para los componentes que se utilizar\u00e1n en varios componentes pero que requieren sus propios datos diferentes.<\/p>\n Este tutorial te ha dado los conocimientos fundamentales necesarios para empezar a construir aplicaciones web con React, pero no es todo lo que hay que saber sobre React. Todav\u00eda hay otras funcionalidades necesarias para construir una aplicaci\u00f3n eficiente con React, como el enrutamiento en aplicaciones que tienen m\u00e1s de una p\u00e1gina y la gesti\u00f3n de estado \u00fanico utilizando herramientas como Redux.<\/p>\n El mejor lugar para empezar a explorar m\u00e1s sobre React es la documentaci\u00f3n de React<\/a>. Tambi\u00e9n puedes consultar la documentaci\u00f3n de la beta<\/a> que se est\u00e1 reescribiendo con Hooks. React como librer\u00eda frontend ha seguido creciendo masivamente en comparaci\u00f3n con otras librer\u00edas\/frameworks<\/a> en la comunidad de desarrolladores y no muestra signos de detenerse. Puedes encontrar React en la hoja de ruta de cualquier desarrollador web moderno.<\/p>\n Con la adopci\u00f3n actual de la tecnolog\u00eda web3 por parte de cada vez m\u00e1s desarrolladores, React ha seguido siendo la herramienta favorita para construir el frontend de las aplicaciones descentralizadas (DApps).<\/p>\n Puedes construir una gran variedad de aplicaciones con React, desde simples aplicaciones web de listas de tareas hasta mercados, paneles de control, etc.<\/p>\n React puede utilizarse con muchas tecnolog\u00edas como Bootstrap, Tailwind CSS<\/a>, Axios, Redux, Firebase, y muchas m\u00e1s. Tambi\u00e9n podemos utilizar React con Node.js y otros lenguajes<\/a> de backend para construir aplicaciones full-stack<\/a> y aplicaciones web que se ejecuten a la velocidad del rayo.<\/p>\n","protected":false},"excerpt":{"rendered":" La industria del desarrollo web ha experimentado un crecimiento constante en los \u00faltimos a\u00f1os; y a medida que este crecimiento contin\u00faa, surgen constantemente nuevas tecnolog\u00edas para …<\/p>\n","protected":false},"author":240,"featured_media":56183,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[1042,867,805,1043,910],"topic":[1296,1321],"class_list":["post-53864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-libraries","tag-react","tag-react-js","topic-frameworks-javascript","topic-react"],"yoast_head":"\n
\n\u00bfQu\u00e9 es React?<\/h2>\n
document.getElementById<\/code>, querySelector<\/code>, y otros m\u00e9todos de manipulaci\u00f3n del DOM.<\/p>\nfunction App() {\n const greetings = \"Hello World\";\n return (\n <div className=\"App\">\n <h1> {greetings} <\/h1>\n <\/div>\n );\n }\n}<\/code><\/pre>\nApp<\/code>. Hemos creado una variable antes de la funci\u00f3n render()<\/code>.<\/p>\n\u00bfPor qu\u00e9 React?<\/h2>\n
\n
\n
\n
\n
\u00bfQui\u00e9n utiliza React?<\/h2>\n
Casos de uso de React<\/h2>\n
\n
Caracter\u00edsticas de React<\/h2>\n
\n
\n
\n
Pros y Contras de React<\/h2>\n
\n
\n
C\u00f3mo Empezar con React<\/h2>\n
Requisitos Previos para Usar React<\/h3>\n
\n
let<\/code> y const<\/code><\/li>\n<\/ul>\nC\u00f3mo Instalar React<\/h3>\n
node -v<\/code><\/pre>\nnpx create-react-app react-kit<\/code><\/pre>\nnpm run start<\/code><\/pre>\n![\"Servidor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/react-npm-start.png\")
Componentes en React<\/h3>\n
Creaci\u00f3n de un Componente de Clase React<\/h3>\n
React.Component<\/code> y el render() subclass.<\/code><\/p>\nclass Student extends React.Component {\n constructor() {\n super();\n this.state = {language: \"JavaScript\"};\n }\n render() {\n return <p>I am learning {this.state.language} <\/p>;\n }\n}<\/code><\/pre>\nlanguage<\/code> con un valor de cadena \u00abJavaScript\u00bb. A continuaci\u00f3n, utilizamos esta variable en nuestro marcado. Este ejemplo muestra c\u00f3mo podemos mezclar JavaScript y HTML sin hacer referencia a ning\u00fan m\u00e9todo del DOM.<\/p>\nCreaci\u00f3n de un Componente Funcional React<\/h3>\n
function Student() {\n const language = \"JavaScript\";\n return (\n <div>\n <p>I am learning { language } <\/p>\n <\/div>\n );\n}<\/code><\/pre>\nStudent<\/code>. Empieza siempre el nombre de tus componentes con una letra may\u00fascula. Esta variable tambi\u00e9n se pas\u00f3 al marcado, como hicimos en la \u00faltima secci\u00f3n, sin manipular el DOM mediante los m\u00e9todos DOM de JavaScript.<\/p>\nStudent<\/code> que se renderiz\u00f3, pero a medida que avancemos en el tutorial, utilizaremos un hook llamado useState<\/code> Hook para crear nuestras variables de estado.<\/p>\nManejo de Eventos en React<\/h3>\n
onClick={changeName}<\/code> en lugar de las comillas onClick=\u201dchangeName\u201d<\/code><\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nonClick<\/code>.<\/p>\nTrabajar con Estados en React<\/h3>\n
useState<\/code> Hook. Los ganchos nos permiten acceder a funciones adicionales de React sin tener que escribir una clase.<\/p>\nuseState<\/code> en un componente funcional, cualquier cambio realizado en nuestras variables de estado no se reflejar\u00e1 en el DOM, por lo que el estado permanecer\u00e1 sin cambios.<\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseState<\/code> de React. A continuaci\u00f3n, creamos una variable de estado llamada name<\/strong> y una funci\u00f3n \u2014 setName<\/strong>\u00a0\u2014 que se utilizar\u00e1 para actualizar el valor de la variable name<\/strong>. El valor inicial de la variable name se almacena en el Hook useState<\/code> como \u00abJohn\u00bb.<\/p>\nTrabajar con Hooks en React<\/h3>\n
useStatet<\/code>. En esta secci\u00f3n, veremos c\u00f3mo utilizar el hook useEffect<\/code>.<\/p>\nuseEffect<\/code> realiza un efecto cada vez que se produce un cambio en un estado. Por defecto, este Hook se ejecuta en la primera renderizaci\u00f3n y cada vez que se actualiza el estado, pero podemos configurar y adjuntar un efecto a una variable de estado respectiva.<\/p>\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [day, setDay] = useState(1);\n useEffect(() => {\n console.log(`You are in day ${day} of the year`);\n });\n return (\n <div>\n <button onClick={() => setDay(day + 1)}>Click to increase day<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseEffect<\/code>.<\/p>\nuseEffect<\/code> registre un mensaje en la consola \u2014 esto ocurre cada vez que la variable name<\/strong> cambia.<\/p>\nTrabajar con Props en React<\/h3>\n
function App() {\n return (\n <div>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nfunction Bio() {\n return (\n <div>\n <p>My name is John<\/p>\n <p>I am a JavaScript developer<\/p>\n <\/div>\n );\n}\nexport default Bio;<\/code><\/pre>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\ndiv<\/code> en nuestro componente App<\/strong>. Cuando veas esto en el navegador, ver\u00e1s el c\u00f3digo que hemos creado en el componente Bio<\/strong> que se est\u00e1 mostrando.<\/p>\nfunction Bio({name, language}) {\n return (\n <div>\n <p>My name is { name }<\/p>\n <p>I am a { language } developer<\/p>\n <\/div>\n );\n\n}\nexport default Bio;<\/code><\/pre>\nname<\/code> y language<\/code> como par\u00e1metros. A continuaci\u00f3n, utilizamos estos par\u00e1metros de forma din\u00e1mica en nuestro marcado.<\/p>\n export default Bio;<\/code> para poder importarlo en cualquier otro componente que requiera su l\u00f3gica.<\/p>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio name=\"James\" language=\"Python\"\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nD\u00f3nde Aprender M\u00e1s<\/h2>\n
\n<\/p>\nResumen<\/h2>\n