Scribd
Cargar
49 vistas16 páginas

Ciclo de Vida de Componentes en React

Este documento presenta los conceptos fundamentales de React, incluyendo que es una librería JavaScript declarativa y flexible para construir interfaces de usuario mediante componentes. Explica cómo crear un proyecto React usando React CLI, el concepto de Virtual DOM, y características clave como JSX, componentes, ciclo de vida, propiedades, hooks y React Router.

Cargado por

danier camacho Camacho
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
49 vistas16 páginas

Ciclo de Vida de Componentes en React

Este documento presenta los conceptos fundamentales de React, incluyendo que es una librería JavaScript declarativa y flexible para construir interfaces de usuario mediante componentes. Explica cómo crear un proyecto React usando React CLI, el concepto de Virtual DOM, y características clave como JSX, componentes, ciclo de vida, propiedades, hooks y React Router.

Cargado por

danier camacho Camacho
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd

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.

También podría gustarte