¡Les Damos La Bienvenida!: ¿Comenzamos?

¡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
Node.js 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 node.js -Ryan Dahl-

también permite ejecución de código js y typescript
pero con una nueva perspectiva en seguridad.
https://deno.land/
NODE JS
¿Qué es NPM?
Node Packager Manager /
NPM
Cuando usamos Node.js, 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 Node.js 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 Node.js.
1 2 3
Ingresar a: Descargar la última Ejecutar el archivo
https://nodejs.org/en/ versión de Node.js descargado y
ejecutar los
siguientes pasos
☕
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,
README.md y package.json, 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 ✓ https://reactjs.org/tutorial/tutorial.html |
ed.). EEUU, Packt. Reactjs.org
✓ Stein, J. (2016). ReactJS Cookbook (1 ✓ https://reactjs.org/docs/hello-world.html |
ed.). EEUU, Packt. Reactjs.org
✓ https://carlosvillu.com/introduccion-a-r
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.

¡Les Damos La Bienvenida!: ¿Comenzamos?

Cargado por

Copyright:

Formatos disponibles

¡Les Damos La Bienvenida!: ¿Comenzamos?

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

¡Les Damos La Bienvenida!: ¿Comenzamos?

Cargado por

Copyright:

Formatos disponibles

¡Les damos la

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

Comprender el funcionamiento del virtual DOM

Instalar y conﬁgurar NodeJS

Crear una app utilizando el CLI.

¿Qué es? ¿Qué es?

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

Hablemos de tres conceptos:

El acceso indiscriminado al DOM es caro, entonces se

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

Segunda premisa: Flujo de datos unidireccional

Para establecer esa seguridad, requiere que los datos y

Unidireccionalidad / De arriba hacia abajo

Ilustradora: Maggie Appleton @ Woman of React 2020

✓ En primer lugar, React ejecuta un algoritmo de

React se encarga de todo esto, nosotros solo

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

El “Node” de java es conocido como la JVM

Creado por uno de los padres de node.js -Ryan Dahl-

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

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

NPX - todo en un comando - eXecute

npx create-react-app nombre-de-app

Para ejecutar una aplicación

Ahora escribe la dirección

¡VAMOS A PRACTICAR LO VISTO!

Crear la app utilizando el CLI

Aspectos a incluir en el entregable:

Crear la app utilizando el CLI

Disponible en nuestro repositorio.

También podría gustarte