Codo a Codo 2022

FULLSTACK
REACT GO
JavaScri
pt
JSX
Compone
ntes Rea
Firebase ct
Mongo
Go

Cursada

Profesora: Correo:
Flores Gisela [Link]@[Link]
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

SUGERENCIAS
Antes de empezar te recomendamos algunas instalaciones que te
servirán para trabajar mucho mejor con React.

INSTALACIONES NECESARIAS

Google Chrome
React Developer Tools
Redux Devtools
Visual Studio Code
Firebase
Mongo Compass
Git
Node

EXTENSIONES DE VSCODE

Activitus Bar
ES7 React/Redux
Simple React Snippets
Auto Close Tag

RECURSOS

Activitus Bar
ES7 React/Redux
Simple React Snippets
Auto Close Tag
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

¿QUÉ ES REACT?
REACT ES UNA LIBRERÍA QUE NOS PERMITE CREAR
APLICACIONES. ESTÁ HECHO PARA TRABAJAR CON TODO
TIPO DE APLICACIONES SENCILLAS, INTERMEDIAS O
COMPLEJAS, CON ALTO NIVEL DE INTERACTIVIDAD.

Esta librería, al ser declarativa, hace más fácil Con React, también se puede trabajar del lado del
seguir patrones de diseño y crear interfaces de servidor y hacer Aplicaciones con Node.
usuario interactivas. También podemos crear aplicaciones móviles con
Es increíblemente eficiente. React Native y también podemos crear
aplicaciones de escritorio utilizando Electron y
Los cambio impacta en el DOM, y se ven reflejados otras tecnologías, todos con el mismo tipo de
en el HTML, siendo renderizado por React solo en código.
aquellas partes deseadas sin necesidad de
recargar por completo la web, el cambio en ese
elemento se realiza en el instante sin afectar el REACT DOCUMENTACIÓN
resto.
LINK:
Otro punto fuerte de React es que trabaja de
manera predecible porque toda la información
HTTPS://[Link]/
fluye en un solo eje como javaScript.

A su vez con React podremos crear componentes,

que son pequeñas piezas de código encapsuladas
que pueden tener estado o no, y formar
estructuras bastantes complejas con pequeños
componentes o en pequeñas piezas sencillas y
fáciles de mantener.
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

¿CÓMO FUNCIONA
REACT?
REACT TIENE UNA ESTRUCTURA PARTICULAR PARA
TRABAJAR Y REQUIERE CIERTOS CUIDADOS A LA HORA DE
ESCRIBIR CÓDIGO, YA QUE NO ES HTML NI JAVASCRIPT
PURO, UTILIZA COMPONENTES Y JSX.

FUNCIONAMIENTO LÓGICO
FORMA DE COMPRENDER COMO TRABAJA
Para poder comprender como funciona REACT vamos a desarrollar un simple ejercicio que nos
permitirá ver como es su secuencia lógica de ejecución, para ello deberás cargar un archivo [Link]
en una carpeta y luego cargar los siguientes links que te permitirán importar REACT para nuestro
ejemplo. Recuerda que si presionas el atajo en VSC de ! + TAB, obtendrás un HTML básico.

CARGAR LOS SIGUIENTES SCRIPTS EN EL HTML

<SCRIPT CROSSORIGIN SRC="HTTPS://[Link]/REACT@18/UMD/[Link]"></SCRIPT>

<SCRIPT CROSSORIGIN SRC="HTTPS://[Link]/REACT-DOM@18/UMD/[Link]"></SCRIPT>

<SCRIPT SRC="HTTPS://[Link]/BABEL-STANDALONE@6/[Link]"></SCRIPT>

Asegurate de tener NODE JS instalado.

 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Cuando los cargues se verá asi:

A continuación vamos a crear un SCRIPT y asignaremos a una variable un TAG.

Pareciera código de JavaScript pero es JSX porque estamos mezclando lo que es XML (del HTML) con
código de JAVASCRIPT, pero a pesar de que tenemos importado React no hará nada, ya que para poder
ser comprendido vamos a tener que importar el uso BABEL al componente del script.
BABEL se va a encargar de hacer la traducción de un código moderno a lo que un código que sea
soportado por cualquier navegador web, es básicamente lo que hace Babel. Vemos como queda!!
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

A continuación vamos a crear un <div> en el HTML con un id="root" y lo llamaremos desde nuestro
SCRIPT, para que sea renderizado por lo que agreguemos allí.
Para ello usaremos un selector y el ReactDOM con el createRoot que serán los encargados de poder
tomar el objeto desde DOM.

Cuando vayamos a abrir la web desde un navegador veremos que el "hola mundo" ya esta a la vista,
pero para hacerlo más dinámico vamos a cargar otra variable con un saludo y haremos que lo muestre
utilizando el recurso de JS puro, veamoslo en la práctica:
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Ahora si!!! con estos pasos ya creaste tu primer archivo en React, y podrás ver reflejado en pantalla lo
que se cargo en el script, no es la única forma de trabajar con un archivo en React, a continuación lo
haremos cargando los comandos necesario desde el VSC e instalando el mismo junto a otras librerías
también. Y ahora si podemos decir que ya tuvimos nuestro tan esperado "HOLA MUNDO".

Proba realizar todos los pasos para crear tu primer archivo de REACT, podes agregarle más cosas para
que quede mejor, te lo dejamos como desafío.
Pero antes de menternos con la estructura sólida de REACT y la otra forma de abrir un archivo REACT
vamos a ver un poco que es BABEL y la función de NODE JS.

NODE JS
Node fue ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos
especialmente, además fue diseñado para crear aplicaciones network escalables. Permite compilar el
código y poder verlo en pantalla.
Node. js es un entorno de ejecución de un solo hilo, de código abierto y multiplataforma para crear
aplicaciones de red y del lado del servidor rápidas y escalables.

HTTPS://[Link]/ES/ABOUT/

BABEL
Babel es un compilador (o transpilador) para JavaScript. Básicamente permite transformar código
escrito con las últimas y novedosas características de JavaScript y transformarlo en un código que
sea entendido por navegadores más antiguos. Babel es de código abierto y se utiliza principalmente
para convertir el código ECMAScript de JS.

HTTPS://[Link]/DOCS/EN/
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

¿CÓMO ARRANCAMOS
CON REACT?
EN REACT VEREMOS DIFERENTES PARTES EN CUANTO A SU
SINTAXIS Y LA FORMA EN QUE FUNCIONA.
PARA COMPRENDER MEJOR PRIMERO VEREMOS COMO SE
INSTALA E INICIA.

INSTALACIÓN
Para comenzar a usar React es necesario tener instalados algunos recursos
previamente. Por lo tanto debemos comenzar con la instalación de NODE JS que
1 será la herramienta encargada de compilar lo que creemos desde React para ver los
cambios en tiempo real.
Siempre es recomendable utilizar la versión normalizada, pero la última versión
también servirá. Entonces primero con lo primero:

INSTALADOR NODE JS

LINK:
HTTPS://[Link]/ES/

Una vez ingresado al link seleccionar la opción y comenzar la instalación, el proceso

no genera ningún problema y solo se debe poner siguiente para completar los pasos.
Veremos el proceso de instalación:
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Descargará el paquete y luego pedirá los permisos de instalación, deberás poner que
si a todo y seleccionar donde instalar.
En caso que quieras verificar si lo tenes instalado de algún otro proyecto, puedes
abrir un cuadro CMD en windows y colocar el comando NODE --VERSION y de esa
forma verás la versión instalada:

Para comenzar abrir un proyecto en React lo que debemos hacer es tener en cuenta
que debemos primero abrir el VISUAL STUDIO CODE, que previamente debe estar
2 instalado (en la página 2 podrás ver las recomendaciones para el uso de React en
VSC), luego abriremos la terminal y comenzaremos con la mágia!! veamos los pasos:

INSTALADOR VISUAL STUDIO CODE

LINK:
HTTPS://[Link]/
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Luego de instalar o abrir el VSC debemos ir al menú de arriba y colocar en

TERMINAL, y del desplegable seleccionar NEW TERMINAL:

Cuando hagamos ese proceso nos saldrá en la parte de abajo la terminal para poder
comenzar con la linea de comandos:

Una vez habilitada la terminal, haremos los pasos necesarios para crear la carpeta o
movernos hasta donde está la carpeta que alojará nuestro proyecto, recuerda que el
comando para dicha gestione es:

CD PARA INGRESAR A LA CARPETAS

 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Una vez dentro de la carpeta destino comenzaremos con el proceso de instalación

de react para comenzar el proyecto, y para ello usaremos la linea de comando:

NPX CREATE-REACT-APP NOMBREDELPROYECTO

Luego de dar ENTER, comenzará el proceso de instalación de React, este puede

demorar unos minutos, podremos apreciar que está trabajando ya que en la consola
veremos lo siguiente:

Cuando todo esté completo nos mostrará los posibles comandos para comenzar a
trabajar:
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Es necesario ingresar a la carpeta que fue creada para el proyecto y luego realizar el
otro comando, también se puede ir al explorador de windows donde se creó la
carpeta y arrastrarla al VSC.

CD NOMBREDELPROYECTO
NPM START

Por DEFAULT react se abre en el puerto 3000, en caso de tener conflicto con el
puerto por alguna otra ejecución el mismo sistema de VSC nos informara
indicándonos si queremos cambiar de puerto.
En caso de querer hacer el cambio manualmente pueden consultar los pasos en la
guia sugerida de la página 2.
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

Listo!!! una vez completados todos los pasos, se nos abrirá en el navegador
predeterminado una pestaña con [Link] que nos mostrará que React
ya esta funcionando.

Ahora si !!! vamos a ver las partes que trae este proceso dentro de VSC.

Para comenzar a usar React es necesario entender las partes que trae la instalación
y como están divididas las mismas.
3 Para comenzar marcaremos cuales son y las iremos desarrollando paso a paso, ya
que son varias.
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

NODE_MODULE
Esta carpeta contiene todos los archivos que REACT necesita para poder funcionar,
la misma no debe ser modificada para evitar inconvenientes.

PUBLIC
En está carpeta se almacenan los archivos de uso común y el [Link] que da
inicio a react. En esta carpeta se deben guardar los ficheros de acceso público de
toda la app, como por ejemplo la carpeta img que contiene las imágenes del sitio,
carpetas de alguna template usada etc.

Dentro del [Link] podremos apreciar lo siguiente:

 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

No contiene ningún tipo de código cargado, lo único que presenta son las etiquetas
habituales de inicio de de HTML5 y un componente en el body que será el encargado
de recibir lo que desarrollemos del lado de REACT para ser mostrado.

<DIV ID="ROOT"> </DIV>

Para comprender mejor, REACT tomará ese contenedor y procederá a renderizar el

mismo y eso se debe a que esta siendo seleccionado por el archivo [Link] por
medio de los nodos del DOM.

Si miramos en detalle, podremos ver que el contenedor es seleccionado por su ID y

guardado en una variable ROOT, la cual es renderizada y a la cual se le aplica todo lo
que el componente <APP /> traiga del lado de REACT. Más adelante veremos con
detalle este proceso.
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

SRC
En está carpeta se almacenan los archivos del componente principal APP, a su vez
allí podremos cargar nuevas hojas de JS para trabajar con los diferentes
componentes de nuestro sitio.

Es importante destacar que el archivo [Link] es el principal componente que

almacena los cambios del sitio.
Al comenzar el proyecto este trae la presentación de REACT que vimos
anteriormente a la hora colocar el NPX START.
En el mismo se podrán apreciar el logo, los textos y el formato inicial. Para poder
comenzar a trabajar es necesario eliminarlos y dejar solamente el div principal.
 Profesora Flores Gisela comisión 202214
Codo a Codo P. 5
[Link]@[Link] Fullstack React Go

GITIGNORE
Son todos los archivos innecesarios a la hora de crear un repositorio del proyecto y
que al figurar ahí no serán subidos.

PACKAGE JSON
En este paquete se almacena la información necesaria JSON para que REACT
funcione, también sobre esta pestaña se puede configurar un puerto especifico en
caso de no querer o poder usar el PORT 3000 que viene por defecto. Para ello se
modifica la linea START por la siguiente:

"START": "SET PORT=3001 && REACT-SCRIPTS START",