REACT

Módulo 05. Desarrollo Front

End (Frameworks de
Desarrollo)
 Programacion
imperativa vs
Antes de React Que es React
programacion
declarativa

Anatomia de un
React CLI Virtual DOM
proyecto

AGENDA JSX
Que es un
componente
Componentes de
clases

Componentes Ciclo de vida de

Propiedades
funcionales un componente

Hooks React Router Workshop

IMPERATIVA – DECLARATIVA
PARADIGMA DE
PROGRAMACION
ANTES DE REACT
 React es una librería de JavaScript declarativa,
eficiente y flexible para construir interfaces de
usuario. Permite componer IUs complejas de
pequeñas y aisladas piezas de código llamadas
“componentes”.
QUE ES
REACT Principios

 Arquitectura basada en components.

 Flujo de datos unidireccional.
 Nunca modificar el estado manualmente.
 npx
npx create-react-app [nombreAplicacion]
npm>=5.2

REACT CLI npm

NODE >= npm init react-app [nombreAplicacion]

14.0.0 npm>=6

Yarn
yarn create react-app [nombreAplicacion]
yarn>=0.25
ANATOMIA
DE UN
PROYECTO
REACT
VIRTUAL
DOM
 Esta curiosa sintaxis de etiquetas no es ni un string ni
HTML.

JSX Se llama JSX, y es una extensión de la sintaxis de

JavaScript. Recomendamos usarlo con React para
describir cómo debería ser la interfaz de usuario. JSX
puede recordarte a un lenguaje de plantillas, pero
viene con todo el poder de JavaScript.
 QUE ES Los componentes de React son elementos autónomos
UN que puede reutilizar en una página. Al crear pequeñas
piezas de código centradas, las puede mover y
COMPONE reutilizar a medida que su aplicación se amplía. La
clave es que son autónomas y centradas, lo que le
NTE permite separar el código en piezas lógicas.
COMPONENT
ES DE CLASE
COMPONE
NTES
FUNCION
ALES
CICLO DE
VIDA DE
UN
COMPONE
NTE
PROPIEDA Las propiedades son la forma que tiene React para
DES pasar parámetros de un componente padre a los hijos.
 Hooks son una nueva característica en React 16.8.
Estos te permiten usar el estado y otras características
de React sin escribir una clase.

HOOKS useState
useEffect
useContext
 React Router es una colección de componentes de
REACT navegación la cual podemos usar como ya lo
mencione tanto en web o en móvil con React Native.
ROUTER Con esta librearía vamos a obtener un enrutamiento
dinámico gracias a los componentes, en otras palabras
tenemos unas rutas que renderizan un componente.