React: Up & Running, 2ª Edición

Prefacio

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Es otra maravillosa y cálida noche californiana. La tenue brisa del océano sólo te ayuda a sentirte 100% "¡aaah!". El lugar: Los Ángeles; el año: 2000 y pico. Me estaba preparando para enviar por FTP mi nueva pequeña aplicación web llamada CSSsprites.com a mi servidor y lanzarla al mundo. Contemplé un problema en las últimas tardes que pasé trabajando en la aplicación: ¿por qué demonios me costó un 20% de esfuerzo envolver la "carne" de la aplicación y luego un 80% luchar con la interfaz de usuario? ¿Cuántas otras herramientas podría haber hecho si no tuviera que getElementById() todo el tiempo y preocuparme por el estado de la aplicación? (¿Ha terminado de cargar el usuario? ¿Qué, un error? ¿Sigue activo este diálogo?) ¿Por qué el desarrollo de la interfaz de usuario lleva tanto tiempo? ¿Y qué pasa con los distintos navegadores? Poco a poco, el "aaah" se fue convirtiendo en "aarrggh!".

Avanzamos rápidamente hasta marzo de 2015, en la conferencia F8 de Facebook. El equipo del que formo parte está listo para anunciar una reescritura completa de dos aplicaciones web: nuestra oferta de comentarios de terceros y una herramienta de moderación que la acompaña. En comparación con mi pequeña aplicación CSSsprites.com, se trata de aplicaciones web completas con montones de funciones, mucha más potencia y un tráfico demencial. Sin embargo, el desarrollo fue una gozada. Los compañeros de equipo nuevos en la aplicación (y algunos incluso nuevos en JavaScript y CSS) podían venir y contribuir con una función aquí y una mejora allá, cogiendo velocidad rápidamente y sin esfuerzo. Como dijo un miembro del equipo: "Ah-ha, ¡ahora veo por qué tanto amor!".

¿Qué ocurrió en el camino? Reacciona.

React es una biblioteca para construir IU: te ayuda a definir la IU de una vez por todas. Luego, cuando cambia el estado de la aplicación, la interfaz de usuario se reconstruye para reaccionar al cambio sin que tengas que hacer nada más. Al fin y al cabo, ya has definido la IU. ¿Definida? Más bien declarada. Utilizas componentes pequeños y manejables para construir una aplicación grande y potente. Se acabó el pasarse la mitad del cuerpo de tu función buscando nodos DOM; todo lo que tienes que hacer es mantener el estado de tu aplicación (con un objeto JavaScript normal y corriente) y el resto simplemente le sigue.

Aprender React es un dulce negocio: aprendes una biblioteca y la utilizas para crear todo lo siguiente:

• Aplicaciones web

• Aplicaciones nativas para iOS y Android

• Aplicaciones de TV

• Aplicaciones nativas de escritorio

Puedes crear aplicaciones nativas con rendimiento nativo y controles nativos( controles nativosde verdad, no copias con aspecto nativo) utilizando las mismas ideas de construcción de componentes e interfaces de usuario. No se trata de "escribir una vez, ejecutar en todas partes" (nuestra industria sigue fracasando en esto); se trata de "aprender una vez, usar en todas partes".

Resumiendo: aprende React, recupera el 80% de tu tiempo y céntrate en las cosas que importan (como la verdadera razón de ser de tu aplicación).

Acerca de este libro

Este libro se centra en el aprendizaje de React desde el punto de vista del desarrollo web. Durante los tres primeros capítulos, empiezas con nada más que un archivo HTML en blanco y vas construyendo a partir de ahí. Esto te permite centrarte en aprender React y no ninguna de las nuevas sintaxis o herramientas auxiliares.

El capítulo 5 se centra más en JSX, que es una tecnología independiente y opcional que suele utilizarse junto con React.

A partir de ahí, aprenderás lo que se necesita para desarrollar una aplicación de la vida real y las herramientas adicionales que pueden ayudarte en el camino. El libro utiliza create-react-app para despegar rápidamente y mantener al mínimo la discusión sobre tecnologías auxiliares. El objetivo es centrarse sobre todo en React.

Una decisión controvertida fue la inclusión de componentes de clase además de componentes de función. Los componentes de función son probablemente el camino a seguir; sin embargo, es probable que el lector se encuentre con código existente y tutoriales que sólo hablen de componentes de clase. Conocer ambas sintaxis duplica las posibilidades de leer y comprender código en la naturaleza.

Buena suerte en tu viaje hacia el aprendizaje de React, ¡que sea fluido y fructífero!

Convenciones utilizadas en este libro

En este libro se utilizan las siguientes convenciones tipográficas:

Cursiva

Indica nuevos términos, URL, direcciones de correo electrónico, nombres de archivo y extensiones de archivo.

Constant width

Se utiliza en los listados de programas, así como dentro de los párrafos para referirse a elementos del programa como nombres de variables o funciones, bases de datos, tipos de datos, variables de entorno, sentencias y palabras clave.

Constant width bold

Muestra comandos u otros textos que deben ser tecleados literalmente por el usuario.

Consejo

Este elemento significa un consejo o sugerencia.

Nota

Este elemento significa una nota general.

Utilizar ejemplos de código

El material complementario (ejemplos de código, ejercicios, etc.) se puede descargar en https://github.com/stoyan/reactbook2.

Si tienes una pregunta técnica o un problema al utilizar los ejemplos de código, envía un correo electrónico a [e-mail].

Este libro está aquí para ayudarte a hacer tu trabajo. En general, si se ofrece código de ejemplo con este libro, puedes utilizarlo en tus programas y documentación. No es necesario que te pongas en contacto con nosotros para pedirnos permiso, a menos que estés reproduciendo una parte importante del código. Por ejemplo, escribir un programa que utilice varios trozos de código de este libro no requiere permiso. Vender o distribuir ejemplos de los libros de O'Reilly sí requiere permiso. Responder a una pregunta citando este libro y el código de ejemplo no requiere permiso. Incorporar una cantidad significativa de código de ejemplo de este libro en la documentación de tu producto sí requiere permiso.

Agradecemos, pero no exigimos, la atribución. Una atribución suele incluir el título, el autor, la editorial y el ISBN. Por ejemplo: "React: Up & Running, 2ª edición, por Stoyan Stefanov (O'Reilly). Copyright 2022 Stoyan Stefanov, 978-1-492-05146-6".

Si crees que el uso que haces de los ejemplos de código no se ajusta al uso legítimo o al permiso concedido anteriormente, no dudes en ponerte en contacto con nosotros en [e-mail].

Aprendizaje en línea O'Reilly

Nota

Durante más de 40 años, O'Reilly Media ha proporcionado formación tecnológica y empresarial, conocimientos y perspectivas para ayudar a las empresas a alcanzar el éxito.

Nuestra red única de expertos e innovadores comparten sus conocimientos y experiencia a través de libros, artículos y nuestra plataforma de aprendizaje online. La plataforma de aprendizaje en línea de O'Reilly te ofrece acceso bajo demanda a cursos de formación en directo, rutas de aprendizaje en profundidad, entornos de codificación interactivos y una amplia colección de textos y vídeos de O'Reilly y de más de 200 editoriales. Para más información, visita https://oreilly.com.

Cómo contactar con nosotros

Dirige tus comentarios y preguntas sobre este libro a la editorial:

• O'Reilly Media, Inc.
• 1005 Gravenstein Highway Norte
• Sebastopol, CA 95472
• 800-998-9938 (en Estados Unidos o Canadá)
• 707-829-0515 (internacional o local)
• 707-829-0104 (fax)

Tenemos una página web para este libro, donde se enumeran erratas, ejemplos y cualquier información adicional. Puedes acceder a esta página en https://oreil.ly/reactUR_2e.

Envía un correo electrónico a [e-mail] para comentar o hacer preguntas técnicas sobre este libro.

Para noticias e información sobre nuestros libros y cursos, visita https://oreilly.com.

Encuéntranos en Facebook: https://facebook.com/oreilly

Síguenos en Twitter: https://twitter.com/oreillymedia

Míranos en YouTube: https://www.youtube.com/oreillymedia

Agradecimientos

Me gustaría dar las gracias a todos los que leyeron diferentes borradores de este libro y enviaron comentarios y correcciones.

Para la primera edición: Andreea Manole, Iliyan Peychev, Kostadin Ilov, Mark Duppenthaler, Stephan Alber y Asen Bozhilov. Para la segunda edición: Adam Rackis, Maximiliano Firtman, Chetan Karande, Kiril Christov y Scott Satoshi Iwako.

Gracias a toda la gente de Facebook que trabaja en (o con) React y responde a mis preguntas día tras día. También a la comunidad React ampliada que sigue produciendo herramientas, bibliotecas, artículos y patrones de uso geniales.

Muchas gracias a Jordan Walke.

Gracias a todas las personas de O'Reilly que han hecho posible este libro: Angela Rufino, Jennifer Pollock, Meg Foley, Kim Cofer, Justin Billing, Nicole Shelby, Kristen Brown y muchos otros.

Gracias a Javor Vatchkov, que diseñó la interfaz de usuario de la aplicación de ejemplo desarrollada en este libro (pruébala en whinepad.com).