Scribd
Cargar
2 vistas1 página

Tutorial React

React es una biblioteca de JavaScript de Facebook para construir interfaces de usuario, centrada en componentes reutilizables que pueden recibir datos externos llamados props. Para comenzar a desarrollar, se necesita Node.js y se puede crear un proyecto con Create React App, utilizando componentes funcionales y hooks como useState y useEffect para gestionar el estado y efectos secundarios. El flujo de datos es unidireccional y para proyectos grandes se recomienda un sistema de gestión de estado global como Redux o Context API, mientras que el enrutamiento se maneja comúnmente con React Router para crear aplicaciones de una sola página.

Cargado por

razehu
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 TXT, PDF, TXT o lee en línea desde Scribd
2 vistas1 página

Tutorial React

React es una biblioteca de JavaScript de Facebook para construir interfaces de usuario, centrada en componentes reutilizables que pueden recibir datos externos llamados props. Para comenzar a desarrollar, se necesita Node.js y se puede crear un proyecto con Create React App, utilizando componentes funcionales y hooks como useState y useEffect para gestionar el estado y efectos secundarios. El flujo de datos es unidireccional y para proyectos grandes se recomienda un sistema de gestión de estado global como Redux o Context API, mientras que el enrutamiento se maneja comúnmente con React Router para crear aplicaciones de una sola página.

Cargado por

razehu
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 TXT, PDF, TXT o lee en línea desde Scribd

Aprendiendo React desde Cero

React es una biblioteca de JavaScript creada por Facebook para construir interfaces
de usuario de forma declarativa y eficiente. Se ha convertido en una de las
tecnologias mas demandadas en el desarrollo web frontend y aprenderla abre muchas
puertas profesionales en empresas de todos los tamanos.

El concepto central de React son los componentes. Un componente es como una pieza
de LEGO que puedes reutilizar en diferentes partes de tu aplicacion. Puede ser algo
tan simple como un boton estilizado o tan complejo como un formulario de registro
completo con validacion. Cada componente tiene su propia logica encapsulada y puede
recibir datos externos llamados props que personalizan su comportamiento.

Para empezar a desarrollar necesitas [Link] instalado en tu ordenador. Luego


puedes crear un proyecto nuevo con Create React App ejecutando npx create-react-app
mi-proyecto en la terminal. Esto genera automaticamente toda la estructura de
carpetas, la configuracion de Webpack, Babel, y todo lo necesario para empezar a
trabajar inmediatamente sin preocuparte por la configuracion.

Los componentes pueden escribirse como funciones o como clases, aunque hoy en dia
se prefieren ampliamente las funciones con hooks por su simplicidad y legibilidad.
Un componente funcional basico es simplemente una funcion de JavaScript que
devuelve JSX, que es una sintaxis que parece HTML pero en realidad es JavaScript
transformado. Por ejemplo, puedes crear un componente Saludo que reciba un nombre
por props y muestre un mensaje personalizado.

El estado es otro concepto fundamental que diferencia React de HTML estatico.


Mientras que las props son datos que vienen de fuera y no deben modificarse
directamente, el estado son datos internos del componente que pueden cambiar en
respuesta a acciones del usuario. Para manejar estado en componentes funcionales
usamos el hook useState. Este hook devuelve un array con dos elementos: el valor
actual del estado y una funcion para actualizarlo de forma segura.

El hook useEffect se usa para efectos secundarios como llamadas a APIs externas,
suscripciones a eventos, manipulacion directa del DOM o temporizadores. Se ejecuta
despues de cada renderizado por defecto, pero puedes controlar exactamente cuando
se ejecuta pasando un array de dependencias como segundo argumento. Si el array
esta vacio, solo se ejecuta una vez al montar el componente.

El flujo de datos en React es unidireccional, siempre de padres a hijos a traves de


props. Si un componente hijo necesita modificar datos que viven en el padre, el
padre debe pasar una funcion como prop que el hijo pueda llamar. Esto hace que el
codigo sea mas predecible y facil de debuggear porque siempre sabes de donde vienen
los datos.

Para proyectos grandes necesitaras un sistema de gestion de estado global como


Redux, Zustand o Context API. Redux es mas complejo pero muy potente para
aplicaciones con mucho estado compartido entre componentes distantes. Context API
viene incluido en React y es suficiente para muchos casos sin anadir dependencias
externas.

El enrutamiento se maneja tipicamente con React Router, que te permite crear


aplicaciones de una sola pagina con diferentes URLs. Defines las rutas y que
componente debe renderizarse en cada una. La navegacion ocurre sin recargar la
pagina completa, lo que hace la experiencia de usuario mucho mas fluida y rapida.

También podría gustarte