Scribd
Cargar
113 vistas

React Part 1

Este documento presenta una introducción a React JS, incluyendo sus objetivos de enseñar qué es React JS, cómo usar JSX y crear componentes. Explica conceptos clave como componentes de clase vs funcionales, creación de componentes y el uso de create-react-app.

Cargado por

Mariano Iturrieta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
113 vistas

React Part 1

Este documento presenta una introducción a React JS, incluyendo sus objetivos de enseñar qué es React JS, cómo usar JSX y crear componentes. Explica conceptos clave como componentes de clase vs funcionales, creación de componentes y el uso de create-react-app.

Cargado por

Mariano Iturrieta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 15

Diplomatura en

programación web full


stack con React JS
Módulo 4:

Introducción Reactjs y Nodejs

Unidad 1:

React (parte 1)
Presentación

En esta unidad comenzamos a conocer ReactJs, una librería enfocada en el


desarrollo de interfaces.
Objetivos
Que los participantes logren…

● Saber què es y para què sirve ReactJs.

● Entender y utilizar el lenguaje JSX.

● Crear y utilizar nuestros propios componentes..


Bloques temáticos
1. Introducción.
2. JSX.
3. create-react-app.
4. Componentes.
1. Introducción
ReactJS es una librería JavaScript de código abierto enfocada a la visualización que
nos permite el desarrollo de interfaces de usuario de forma sencilla mediante
componentes interactivos y reutilizables.

React está basado en un paradigma llamado programación orientada a


componentes en el que cada componente es una pieza con la que el usuario puede
interactuar. Estas piezas se crean usando una sintaxis llamada JSX permitiendo
escribir HTML (y opcionalmente CSS) dentro de objetos JavaScript.

Estos componentes son reutilizables y se combinan para crear componentes


mayores hasta configurar una web completa.

Esta es la forma de tener HTML con toda la funcionalidad de JavaScript y el estilo


gráfico de CSS centralizado y listo para ser abstraído y usado en cualquier otro
proyecto.
2. JSX

JSX es una extensión de sintaxis de Javascript, que como podremos observar se


parece a HTML.

Uno de sus beneficios es mejorar la legibilidad del código, mejorar la experiencia


del desarrollador, y reducir la cantidad de errores de sintaxis, ya que no es necesario
repetir tantas veces el mismo código. Otro beneficio es el de poder integrar a otros
miembros de tu equipo que no sean programadores en el desarrollo. Es “fácil” leer
el código si ellos están acostumbrados a leer HTML.

React no requiere usar JSX, pero la mayoría de la gente lo encuentra útil como
ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript.
Esto también permite que React muestre mensajes de error o advertencia más
útiles.

Insertando expresiones en JSX

En el ejemplo declaramos una variable llamada name y luego la usamos dentro del
JSX envolviendola dentro de llaves
En el ejemplo insertamos el resultado de llamar la función de JavaScript,
formatName(user), dentro de un elemento <h1>.

Especificando atributos con JSX


Podemos utilizar comillas para especificar strings literales como atributos:
También puedes usar llaves para insertar una expresión JavaScript en un atributo:

Podemos usar comillas rodeando llaves cuando insertes una expresión JavaScript
en un atributo. Debemos utilizar comillas (para los valores de los strings) o llaves
(para las expresiones), pero no ambas en el mismo atributo.

Advertencia:

Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la
convención de nomenclatura camelCase en vez de nombres de atributos HTML.

Por ejemplo, class se vuelve className en JSX, y tabindex se vuelve tabIndex.


3. create-react-app
create-react-app es un ambiente cómodo para aprender React, y es la mejor
manera de comenzar a construir una nueva aplicación de página única usando
React.

create-react-app configura tu ambiente de desarrollo de forma que puedas usar las


últimas características de Javascript, brindando una buena experiencia de
desarrollo, y optimizando tu aplicación para producción. Necesitarás tener Node
mayor o igual a la versión 10.16 y npm mayor o igual a la versión 5.6 instalados en tu
máquina.

Para crear un proyecto ejecuta:

create-react-app nombredemiproyecto

cd nombredemiproyecto

npm start

create-react-app no se encarga de la lógica de backend o de bases de datos; tan


solo crea un flujo de construcción para frontend, de manera que lo puedes usar con
cualquier backend

git config --global color.ui auto


4. Componentes

Componentes de clase vs. componentes de función

Los componentes de React pueden definirse de dos formas distintas: como


funciones o como clases.

Ejemplo de componente de clase

Ejemplo de componente de función

Ambos componentes son equivalentes, sin embargo la forma más sencilla, y la más
utilizada en las últimas actualizaciones es de función.
El ejemplo de función es un componente de React válido porque acepta un solo
argumento de objeto “props” (que proviene de propiedades) con datos y devuelve
un elemento de React. Llamamos a dichos componentes “funcionales” porque
literalmente son funciones JavaScript.

Creación de componentes

Como vimos anteriormente podemos definir un componente usando una simple


función, y su valor de retorno será el contenido HTML que se muestre. Así mismo
podemos incluir todos los componentes que necesitemos dentro del valor de
retorno de otros componentes. Este concepto se llama composición.

Por lo general, las aplicaciones de React nuevas tienen un único componente App
en lo más alto. Sin embargo, si se integra React en una aplicación existente, se
podría empezar de abajo hacia arriba con un pequeño componente como Button y
poco a poco trabajar el camino a la cima de la jerarquía de la vista.
Es importante que en cada archivo en el que vayamos a definir un componente (ya
sea de clase o funcional recordemos importar React al principio de nuestro archivo
js y exportarlo al final.

Asumiendo que este componente se encuentre en la carpeta componentes, dentro


del archivo MiniComponente.js podríamos importarlo dentro de otro componente en
la misma carpeta de la siguiente forma:
En caso de ser archivos locales usamos siempre la ruta relativa desde el archivo en
el que estamos escribiendo. No es necesario agregar la extensión a los archivos js al
importarlos.
Bibliografía utilizada y sugerida

Artículos de revista en formato electrónico:


MDN Web Docs. Disponible desde la URL: https://developer.mozilla.org/

React.Disponible desde la URL: https://es.reactjs.org/

Libros y otros manuscritos:


Alex Banks & Eve Porcello. Learning React: desarrollo web funcional con React y
Redux. 2017.

También podría gustarte