¡Les damos la

bienvenida!
¿Comenzamos?
Esta clase va a ser
grabada
 Clase 02. REACT JS

Instalación y configuración
del entorno
Temario

01 02 03

Instalación y
Introducción a React JSX y Transpiling
Js configuración del
entorno
✓ ¿Qué es React? ✓ Funcionamiento de ✓ Sugar Syntax
React Js
✓ ¿Qué es un ✓ Polyfills y la
componente? ✓ ¿Qué es virtual DOM? retrocompatibilidad

✓ Código declarativo VS ✓ ¿Qué es NODE? ✓ Bundling con Webpack

Código imperativo
✓ NODE JS ¿Qué es NPM? ✓ Transpiling
✓ ¿Qué es una expresión?
✓ Crear una aplicación ✓ Jsx
✓ ¿Qué es una función? utilizando el CLI
Objetivos de la clase

Comprender el funcionamiento del virtual DOM

en React.

Instalar y configurar NodeJS

Crear una app utilizando el CLI.

CLASE N°1

Glosario
React JS: es una biblioteca para desarrollo web, DOCTYPE: no es una etiqueta, sino una
por lo cual debemos contar con conocimientos instrucción para indicar al navegador qué versión
mínimos sobre los lenguajes que el navegador de HTML vamos a utilizar.
web interpreta.
DOM (Document Object Model o modelo de
HTML: es un lenguaje de etiquetas, el cual dará la objetos del navegador): nos sirve para acceder a
estructura para nuestras páginas web. cualquiera de los componentes que hay dentro
de una página.
CLASE N°#1

Glosario
HTML 5: es una nueva versión de diversas CSS (cascading style sheets - hojas de estilo en
especificaciones, entre las que se encuentran: cascada): es un lenguaje de diseño gráfico con el
HTML 4-XHTML 1-CSS Nivel 2-DOM Nivel 2 (DOM cual podremos dar estilos (diseño, colores,
= Document Object Model). márgenes) a nuestras webs desarrolladas con
HTML.
Javascript: es el lenguaje de programación web .
por excelencia. Decimos que se trata de un
lenguaje de programación interpretado.
MAPA DE CONCEPTOS

Funcionamiento de React Js

Crear una
Virtual DOM Node aplicación
utilizando el CLI

¿Qué es? ¿Qué es?

Instalación NPM
RECAP: HTML, DOM, JS
Funcionamiento de
REACT JS
React

¿Cómo llega React a la performance que tanta fama le

trae?

Hablemos de tres conceptos:

Virtual DOM vs React Fiber y la Reconciliación.
React

Primera premisa

El acceso indiscriminado al DOM es caro, entonces se

requirió encontrar una manera de realizarlo de la manera
más óptima posible.
Primera premisa: Optimicemos los movimientos

Zona de
evento

Cambio
Fiber tree aislado

Estado original
React

En vez de aplicar uno a uno los cambios en los cinco

nodos, React procesa este resultado en una memoria.
Calcula el área de impacto y determina la menor
cantidad de movimientos de modo heurístico, por lo que
también sabe donde no pueden haber ocurrido cambios.
React

Segunda premisa: Flujo de datos unidireccional

Para establecer esa seguridad, requiere que los datos y

los cambios idealmente se provoquen de una manera
específica con dos características:

Unidireccionalidad / De arriba hacia abajo

Flujo de datos
Reacción Acción

Bajan los
datos

Ilustradora: Maggie Appleton @ Woman of React 2020

 Resumiendo:
¿Qué es virtual DOM?
Virtual DOM
Es un patrón de comportamiento, y React lo Esto es básicamente lo que React hace con el
implementa con una tecnología llamada Virtual DOM: una representación virtual de la
“Fiber”. UI que se mantiene en memoria y en sincronía
“reconciliado” con el DOM “real”.
En sí resulta ser todo lo que React sabe de tu
aplicación y cada nodo o fibra.
Virtual DOM

Resumiendo el proceso

✓ En primer lugar, React ejecuta un algoritmo de

“diffing” que identifica lo que ha cambiado.
✓ El segundo paso es la reconciliación, donde se
actualiza el DOM con los resultados de diff.

React se encarga de todo esto, nosotros solo

aprenderemos a ayudarlo
Virtual DOM
¿Preguntas?
¿Qué es NODE?
NODE
[Link] es un entorno de ejecución de JavaScript, que le
permite al código en js ser ejecutado en nuestra
computadora.

Podemos darle a node un archivo de js y éste puede

ejecutarlo, y darle acceso a recursos de nuestra
computadora (IO, Network, Etc).

El “Node” de java es conocido como la JVM

¡Coder news!
Recientemente ha nacido un nuevo entorno de ejecución
que no es node sino Deno (no-de = de-no)

Creado por uno de los padres de [Link] -Ryan Dahl-

también permite ejecución de código js y typescript
pero con una nueva perspectiva en seguridad.

[Link]
 NODE JS
¿Qué es NPM?
Node Packager Manager /
NPM
Cuando usamos [Link], rápidamente tenemos que
instalar módulos nuevos (librerías), ya que al ser un
sistema fuertemente modular viene prácticamente
“vacío”.
Por lo tanto, para utilizar una funcionalidad de alguna
librería publicada, deberemos instalar módulos
adicionales.
Esta operación se realiza de forma muy sencilla con la
herramienta npm
(Node Package Manager).
Esta herramienta funciona
de dos formas:
✓ Como un repositorio ampliamente utilizado para la
publicación de proyectos [Link] de código
abierto.

✓ Como una herramienta de línea de comandos. Esta

utilidad ayuda a instalar y desinstalar paquetes,
gestionar versiones y gestionar dependencias
necesarias para ejecutar un proyecto.
Instalación de NODE JS
Para poder instalar una aplicación de React JS desde el CLI, debemos previamente instalar [Link].

1 2 3
Ingresar a: Descargar la última Ejecutar el archivo
[Link] versión de [Link] descargado y
ejecutar los
siguientes pasos
Instalación de NODE JS
Instalación de NODE JS
Instalación de NODE JS
 ☕
Break
¡10 minutos y volvemos!
Crear una aplicación
utilizando el CLI
¿Qué es el CLI?
La interfaz de línea de comandos o interfaz de línea de órdenes, es
un método que permite a los usuarios dar instrucciones a algún
programa informático por medio de una línea de texto simple.

React tiene su propia CLI, pero actualmente solo admite la creación

de una aplicación (create-react-app).
 Ejemplo en vivo

Vamos al código.
 Abrir la consola

En Windows En Linux
Ubicarnos en un directorio específico

Con el comando cd
podemos ingresar al
directorio sobre el cual
vamos a crear nuestra
aplicación en react.
Con cd volvemos al
directorio anterior.
Instalar REACT JS

Debemos ejecutar el
comando npm install -g
create-react-app

Crear la aplicación

Debemos ejecutar
create-react-app my-app
 Coder “Pro Tips”

NPX - todo en un comando - eXecute

npx create-react-app nombre-de-app

cd coder-app
Ejecutar aplicación en el navegador

Para ejecutar una aplicación

y poder acceder desde el
navegador debemos
ejecutar (dentro del
directorio de la aplicación
creada) npm start
Ejecutar aplicación en el navegador

Ahora escribe la dirección

obtenida (Ej:localhost:3000)
en tu navegador y el
resultado obtenido será el
siguiente:
 Ejemplo en vivo

¡VAMOS A PRACTICAR LO VISTO!

Spread operator, métodos de array y
desestructuración

Duración: 10 minutos
 Crear la app utilizando
el CLI
Crea una aplicación utilizando el CLI con el nombre de tu
tienda.
Duración: 15 minutos
 ACTIVIDAD EN CLASE

Crear la app utilizando el CLI

Descripción de la actividad.

Crea una aplicación utilizando el CLI con el nombre de tu tienda, y ejecuta los
comandos necesarios para instalar React, configurarlo y visualizarlo en tu navegador.

Aspectos a incluir en el entregable:

✓ Link al repositorio de github
✓ Dentro del repositorio, deberían encontrarse las carpetas y los archivos src,
[Link] y [Link], entre otros
 ACTIVIDAD EN CLASE

Crear la app utilizando el CLI

Ejemplo:
¿Preguntas?
¿Quieres saber más?
Te dejamos material
ampliado de la clase
 MATERIAL AMPLIADO

Recursos multimedia
✓ Amler (2016). ReactJS by Example (1 ✓ [Link] |
ed.). EEUU, Packt. [Link]
✓ Stein, J. (2016). ReactJS Cookbook (1 ✓ [Link] |
ed.). EEUU, Packt. [Link]

✓ [Link]
eactjs/ | Carlos Villu

Disponible en nuestro repositorio.

 Resumen
de la clase hoy
✓ Virtual DOM
✓ Nodejs
✓ Creación de App con CLI
Opina y valora
esta clase
Muchas gracias.