Conceptos de React by Estefania Garcia

Bundles en React

tefa261105 — 2022-10-04 21:16:46 UTC

Create-react-app: Es un paquete que se puede instalar en todo el mundo para crear aplicaciones propias directamente dentro de la librería de JS. Al hacer esto tendremos un entorno de desarrollo previamente configurado con unos comandos predeterminados. Este esta preparado para que podamos ejecutar todo tipo de acciones e insertar todo tipo de elementos. Además, facilita la interacción entre JSX y Babel, y que de esta forma pueda soportar las última actucalizaciones de JS.
Vite: Es una herramienta de frontend que ayuda en el proceso de creación de proyectos, donde se puede usar libremente los framework. Además, su desarrollo y construcción final sea lo más sencillo y cómodo posible.

DOM

tefa261105 — 2022-10-04 21:30:16 UTC

Qué es el DOM: Es la abreviatura de Document Object Model, se podría traducir como Modelo de Objeto de Documento. Es la estructura de objetos que genera el navegador en memoria para cada uno de los elementos de la página. Habitualmente es llamado con el nombre de jerarquía de objetos del navegador, porque es una estructura jerárquica donde existen varios objetos y unos dependen de otros.
Qué es el Virtual DOM: Es una representación del DOM guardada en memoria, que actúa de intermediario entre los estados de la aplicacion y los estados del DOM. Cuando ocurre un cambio en la aplicación web, el virtual DOM interpreta dichos cambios y calcula la manera más eficiente de actualizar el DOM para que renderice la menor cantidad de cambios posibles.
- Cambio de Estado: Se produce un cambio en el estado de algún nodo o elemento, lo que genera un Virtual DOM.
- Cómputo de Cambios: React compara la diferencia entre el estado del Virtual DOM y el DOM del navegador y detecta los cambios producidos.
- Re-render: Se definen los cambios en el DOM y la interfaz es actualizada.

Estructura de archivos y diferencias entre los bundles CRA y Vite

tefa261105 — 2022-10-04 21:50:22 UTC

Tipos de estructura de archivos:
- Agrupación por funcionalidades o rutas: Una forma común de estructurar proyectos es ubicar CSS, JS Y tests juntos dentro de carpetas agrupadas por funcionalidad o ruta.
- Agrupando por tipo de archivo: Separar los componentes en diferentes carpetas dependiendo de su función en la aplicación.
Diferencias entre CRA y Vite:
-Importaciones absolutas: Al contrario de CRA, Vite no tiene una src ruta incorporada. Entonces, cuando en React se hace de esta forma:

importar tarjetas desde "componentes/tarjetas" ;

En Vite se hace así:

 importar Tarjetas desde “/ src / components / cards . jsx ”

- Variable de entorno: Cambian la conevnción de nomenclatura de variable de entorno. Si se usa REACT_APP_ en el proyecto, este se deberá cambiar por el prefijo de VITE_

//En lugar de esto 
REACT_APP_ API_KEY = 1234567890. . //Utilice este 
VITE_API_KEY = 1234567890. .

JSX

tefa261105 — 2022-10-04 21:57:09 UTC

Es una extensión de sintaxis de JS que nos permite mezclar JS y HTML, de ahí su nombre JavaScript XML. Esta nos facilita la vida pues nos permite escribir un código más limpio, sin tantas repeticiones y con muy poco factores o condiciones a tener en cuenta.

const element = Hello, world!
;

Componentes y Props

tefa261105 — 2022-10-04 22:02:09 UTC

Componentes: Son elementos autónomos que pueden reutilizar en una página. Al crear piezas de código centradas, las puede mover y reutilizar a medida que su aplicación se amplía. La clave es que son autónomos y crentrados, los que les permite separar el código en piezas lógicas.
Props: Se refiere a las propiedades las cuales cumplen un rol importante en el proceso de desarrollo de una aplicación o web. Son la colección de datos que un componente recibe del contenedor padre, y que pueden usarse para definir los elementos de React que retornará el componente. Si uno de estos necesita recibir inforación para funcionar, la recibe vía props.

¿Qué son los Hooks en React?

tefa261105 — 2022-10-04 22:02:42 UTC

Los Hooks son funciones que te permiten "enganchar" el estado de React y el ciclo de vida, desde componentes de función. Los Hooks no funcionan dentro de las clases, te permiten usar React sin clases. Un ejemplos es useState; también te permite crear tus propios Hooks para reutilizar el comportamiento con estado entre diferentes componentes.

¿Para qué sirve el Hook useState?

tefa261105 — 2022-10-04 22:02:48 UTC

Con este se podrá añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos, para usar este Hook primero debemos importarlo desde la librería de React.

import React, { useState } from 'react'

useState es una función que crea internamente una variable donde podremos almacenar el estado de nuestro componente.Este acepta un valor inicial para esa variable y devuelve un array con 2 elementos, el valor de la variable y la función para modificarla.

¿Para qué sirve el Hook useEffect?

tefa261105 — 2022-10-04 22:02:52 UTC

Es un efecto que nos permite ejecutar tareas secundarias dentro de nuestros componentes funcionales, por ejemplo, podemos emular los métodos de ciclo de vida sin la necesidad de utilizar componentes de clase.

//Declaración
 useEffect(()=>{},[]);

Podemos emular:
- ComponentDidMount: se ejecuta cuando el componente es montado.
- ComponentDidUpdate: se ejecuta cuando el componente sufre un cambio en su state o props.
- ComponentWillUnmount: se ejecuta cuando el componente es desmontado.

Al utilizar este Hook lo que hacemos es decirle a React que nuestro componente debe llevar a cabo algo después de rendirizarse, ejecutando los efectos anteriores.

Manejo de estilos con CSS en React

tefa261105 — 2022-10-04 22:14:51 UTC

Existen varias formas de utilizar estilos en React, ya que existen diferentes maneras y herramientas que podemos usar para ello, podemos hacer cosas desde utilizar un json para definir los estilos e importarlo en cada etiqueta jsx como una prop ´´ style o colocar un archivo .css, .scss o .sass e importarlo en el RootComponent o tu mainjs. También se puede ser uso de librerías como styled components.

Styled Components

tefa261105 — 2022-10-04 22:14:55 UTC

Es uno de las muchas formas en las que podemos insertar estilos a una aplicación creada con esta librería en Javascript. A diferencia de otros métodos, esta herramienta nos permite unir por completo el poder del Código CSS con el de Javascript. Nos permite darle Estilo a los componentes manteniendo la modularidad de React. Se pueden usar funcionalidades adicionales a las que trae CSS en formato de template literal o de objeto, y no se debe preocupar por añadir prefijos de buscadores.
Es muy recomendado, ya que nos permite estilizar nuestros componentes de React y nos permite crear un componente, y al mismo tiempo que definimos sus estilos, podemos también condicionar los a las propiedades que queramos.

¿Qué es un evento en javascript y cómo se maneja en React?

tefa261105 — 2022-10-04 22:30:40 UTC

Los eventos son acciones que ocurren cuando interactuamos con una web, por ejemplo, cuando hacemos clic en un botón, escribimos en un input text, entre otros. Son la forma que tiene de interactuar el html y el javascript.
Para definir un evento tenemos que indicar 2 cosas, primero el tipo de evento que queremos implementar y luego el método que hará las veces de manejador de evento. Un manejador de eventos no es más que la función que se encarga de definir la funcionalidad que tiene que ejecutarse cuando se dispara un evento.
Manejar los eventos en realidad es muy similar a manejar eventos con elementos del DOM, algunas diferencias de sintaxis:
- los eventos de React se nombran usando camelCase en vez de minúsculas.
- Con JSX pasas, una función con el manejador del evento en vez de un string.
Por ejemplo, el HTML:

En React es algo diferente:

¿Qué es formik?

tefa261105 — 2022-10-04 22:30:58 UTC

¿Qué es formik y cómo se implementa en React?

tefa261105 — 2022-10-04 22:31:06 UTC

Es una librería declarativa, intuitiva y adaptable, desarrollada por Jered Palmer Palmer. Eso nos va a permitir crear formularios en React de forma sencilla y limpia.
Debido a esta, al momento de desarrollar los formularios se puede obtener:
- Los valores dentro y fuera del este formulario.
- Validación y mensajes de error.
- Control de envío.
En React los elementos de formularios funcionan un poco diferentes a otros elemenetos del DOM en React, debido a que los elementos de formularios conservan naturalmente algún estado interno.

React Router V6 y diferencias con sus versiones anteriores

tefa261105 — 2022-10-04 23:13:32 UTC

Es una biblioteca de enrutamiento del lado del servidor y del cliente con todas las funciones para React. Se ejecuta en cualquier lugar donde se ejecute React en la web, en el servidor can node, javascript y en el React Native. Es una de las más usadas en front-end de las aplicaciones web. Con ella se puede desarrollar fácilmente sitios web SPA en los que la navegación a través de los diferentes apartados del sitio se realiza dentro de una sola página llamado comúnmente layout.
Esta versión presenta cambios en el switch, ya que reemplaza los Routes.

import {BrowserRouter as Router,Routes,Route} from "react-router-dom";const App = () => (

Cómo se consume API’s con Fetching y Axios

tefa261105 — 2022-10-04 23:28:33 UTC

La API Fetch proporciona una interfaz JavaScript para getionar peticiones y respuestas HTTP. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.
Axios es una popular librería Open Source para Javascript que nos permite realizar operaciones como cliente HTTP, basado en el modelo de promesas. Axios destaca por su sencillez y ligereza, lo cual lo hace indicado para proyectos incluso en procesadores de baja potencia como el ESP8266 o el ESP32.