Inicio rápido

¡Bienvenido a la documentación de React! Esta página te dará una introducción al 80% de los conceptos de React que usarás a diario.

Crear y anidar componentes

Las aplicaciones de React están hechas decomponentes. Un componente es una parte de la interfaz de usuario (UI) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón o tan grande como una página completa.

Los componentes de React son funciones de JavaScript que devuelven marcado:

Ahora que has declaradoMyButton, puedes anidarlo en otro componente:

Observa que<MyButton />comienza con una letra mayúscula. Así es como sabes que es un componente de React. Los nombres de los componentes de React siempre deben comenzar con una letra mayúscula, mientras que las etiquetas HTML deben estar en minúsculas.

Echa un vistazo al resultado:

Las palabras claveexport defaultespecifican el componente principal en el archivo. Si no estás familiarizado con alguna sintaxis de JavaScript,MDN y javascript.infotienen excelentes referencias.

Escribir marcado con JSX

La sintaxis de marcado que has visto arriba se llamaJSX. Es opcional, pero la mayoría de los proyectos de React usan JSX por su conveniencia. Todas lasherramientas que recomendamos para el desarrollo localadmiten JSX de forma predeterminada.

JSX es más estricto que HTML. Tienes que cerrar etiquetas como<br />. Tu componente tampoco puede devolver múltiples etiquetas JSX. Tienes que envolverlas en un elemento padre compartido, como un<div>...</div>o un envoltorio vacío<>...</>:

Si tienes mucho HTML que convertir a JSX, puedes usar unconvertidor en línea.

Agregar estilos

En React, especificas una clase CSS conclassName. Funciona de la misma manera que el atributo HTMLclass:

Luego escribes las reglas CSS para ella en un archivo CSS separado:

React no prescribe cómo agregas archivos CSS. En el caso más simple, agregarás una etiqueta<link>a tu HTML. Si usas una herramienta de compilación o un framework, consulta su documentación para aprender cómo agregar un archivo CSS a tu proyecto.

Mostrar datos

JSX te permite poner marcado en JavaScript. Las llaves te permiten "escapar de vuelta" a JavaScript para que puedas incrustar alguna variable de tu código y mostrársela al usuario. Por ejemplo, esto mostraráuser.name:

También puedes "escapar a JavaScript" desde los atributos JSX, pero debes usar llavesen lugar decomillas. Por ejemplo,className="avatar"pasa la cadena"avatar"como la clase CSS, perosrc={user.imageUrl}lee el valor de la variable JavaScriptuser.imageUrl,

También puedes poner expresiones más complejas dentro de las llaves JSX, por ejemplo,concatenación de cadenas:

En el ejemplo anterior,style={{}}no es una sintaxis especial, sino un objeto{}normal dentro de las llaves JSXstyle={ }. Puedes usar el atributostylecuando tus estilos dependen de variables de JavaScript.

Renderizado condicional

En React, no hay una sintaxis especial para escribir condiciones. En su lugar, usarás las mismas técnicas que usas al escribir código JavaScript normal. Por ejemplo, puedes usar una sentenciaifpara incluir JSX condicionalmente:

Si prefieres un código más compacto, puedes usar eloperador condicional ?.A diferencia deif, funciona dentro de JSX:

Cuando no necesitas la ramaelse, también puedes usar unasintaxis lógica && más corta:

Todos estos enfoques también funcionan para especificar atributos condicionalmente. Si no estás familiarizado con alguna de estas sintaxis de JavaScript, puedes empezar usando siempreif...else.

Renderizado de listas

Dependerás de características de JavaScript como elbucle fory lafunción map() de arrayspara renderizar listas de componentes.

Por ejemplo, supongamos que tienes un array de productos:

Dentro de tu componente, usa la funciónmap()para transformar un array de productos en un array de elementos<li>:

Observa cómo<li>tiene un atributokey. Para cada elemento de una lista, debes pasar una cadena o un número que identifique de forma única a ese elemento entre sus hermanos. Normalmente, una clave debe provenir de tus datos, como un ID de base de datos. React usa tus claves para saber qué ha ocurrido si luego insertas, eliminas o reordenas los elementos.

Responder a eventos

Puedes responder a eventos declarando funcionesmanejadoras de eventosdentro de tus componentes:

Observa cómoonClick={handleClick}no tiene paréntesis al final. Nollamesa la función manejadora del evento: solo necesitaspasarla. React llamará a tu manejador de eventos cuando el usuario haga clic en el botón.

Actualizar la pantalla

A menudo, querrás que tu componente "recuerde" cierta información y la muestre. Por ejemplo, quizás quieras contar el número de veces que se hace clic en un botón. Para hacer esto, añadeestadoa tu componente.

Ahora puedes declarar unavariable de estadodentro de tu componente:

Obtendrás dos cosas deuseState: el estado actual (count), y la función que te permite actualizarlo (setCount). Puedes darles cualquier nombre, pero la convención es escribir[algo, setAlgo].

La primera vez que se muestre el botón,countserá0porque pasaste0 a useState(). Cuando quieras cambiar el estado, llama asetCount()y pásale el nuevo valor. Al hacer clic en este botón se incrementará el contador:

React llamará a tu función de componente de nuevo. Esta vez,countserá1. Luego será2. Y así sucesivamente.

Si renderizas el mismo componente varias veces, cada uno obtendrá su propio estado. Haz clic en cada botón por separado:

Observa cómo cada botón "recuerda" su propio estadocounty no afecta a los otros botones.

Usando Hooks

Las funciones que comienzan conusese llamanHooks.useStatees un Hook incorporado proporcionado por React. Puedes encontrar otros Hooks incorporados en lareferencia de la API.También puedes escribir tus propios Hooks combinando los existentes.

Los Hooks son más restrictivos que otras funciones. Solo puedes llamar a los Hooksen la parte superiorde tus componentes (u otros Hooks). Si quieres usaruseStateen una condición o un bucle, extrae un nuevo componente y colócalo allí.

Compartiendo datos entre componentes

En el ejemplo anterior, cadaMyButtontenía su propiocountindependiente, y cuando se hacía clic en cada botón, solo cambiaba elcountdel botón en el que se hizo clic:

Inicialmente, el estadocountde cadaMyButton es 0

El primerMyButtonactualiza sucount a 1

Sin embargo, a menudo necesitarás que los componentescompartan datos y se actualicen siempre juntos.

Para que ambos componentesMyButtonmuestren el mismocounty se actualicen juntos, necesitas mover el estado de los botones individuales "hacia arriba" al componente más cercano que los contenga a todos.

En este ejemplo, esMyApp:

Inicialmente, el estadocountdeMyApp es 0y se pasa a ambos hijos.

Al hacer clic,MyAppactualiza su estadocount a 1y lo pasa a ambos hijos.

Ahora, cuando hagas clic en cualquiera de los botones, elcountenMyAppcambiará, lo que cambiará ambos recuentos enMyButton. Así es como puedes expresar esto en código.

Primero,mueve el estado hacia arribadesdeMyButtonhaciaMyApp:

Luego,pasa el estado hacia abajodesdeMyAppa cadaMyButton, junto con el manejador de clics compartido. Puedes pasar información aMyButtonusando las llaves de JSX, tal como lo hiciste anteriormente con etiquetas integradas como<img>:

La información que pasas hacia abajo de esta manera se llamaprops. Ahora el componenteMyAppcontiene el estadocounty el manejador de eventoshandleClick, y pasa ambos como propsa cada uno de los botones.

Finalmente, cambiaMyButtonparaleerlas props que le has pasado desde su componente padre:

Cuando haces clic en el botón, se activa el manejadoronClick. La proponClickde cada botón se estableció en la funciónhandleClickdentro deMyApp, por lo que se ejecuta el código dentro de ella. Ese código llama asetCount(count + 1), incrementando la variable de estadocount. El nuevo valor decountse pasa como prop a cada botón, por lo que todos muestran el nuevo valor. Esto se llama "elevar el estado". Al mover el estado hacia arriba, lo has compartido entre componentes.

Próximos pasos

¡Hasta ahora, conoces los conceptos básicos de cómo escribir código en React!

Consulta elTutorialpara ponerlos en práctica y construir tu primera mini-aplicación con React.