TUTORIAL REACT JS desde cero
En este tutorial aprenderás a crear una aplicación paso a paso utilizando React JS, React Query, Zustand y Wouter. Estas son herramientas modernas que te ayudarán a construir aplicaciones web eficientes y escalables.
Paso 1: Configuración del entorno
Lo primero que debes hacer es configurar tu entorno de desarrollo. Necesitarás tener Node.js y npm instalados en tu computadora. Luego, puedes crear un nuevo proyecto de React utilizando Create React App.
npx create-react-app my-app
cd my-app
npm start
Paso 2: Creación de componentes
Una vez que tengas configurado tu entorno de desarrollo, puedes comenzar a crear los componentes de tu aplicación. Puedes utilizar React Hooks para manejar el estado y las operaciones asincrónicas en tu aplicación.
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
You clicked {count} times
);
}
Paso 3: Integración de React Query
React Query es una biblioteca que te permite manejar de manera eficiente las solicitudes de datos y las operaciones CRUD en tu aplicación. Puedes utilizarla para manejar la caché, la paginación y la invalidación de datos de forma sencilla.
import { useQuery } from 'react-query';
function App() {
const { isLoading, error, data } = useQuery('repoData', () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
res.json()
)
);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return (
);
}
Paso 4: Estado global con Zustand
Zustand es una biblioteca de gestión del estado global que te permite compartir el estado entre componentes de forma sencilla. Puedes utilizarla para manejar el estado de autenticación, el carrito de compras o cualquier otro estado que necesites compartir en tu aplicación.
import { create } from 'zustand';
const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
}));
function Counter() {
const count = useStore(state => state.count);
const increment = useStore(state => state.increment);
const decrement = useStore(state => state.decrement);
return (
Count: {count}
);
}
Paso 5: Enrutamiento con Wouter
Wouter es una pequeña biblioteca de enrutamiento que te permite crear rutas en tu aplicación de forma sencilla. Puedes utilizarla para manejar la navegación entre distintos componentes y vistas en tu aplicación.
import { Link, Route, Switch } from 'wouter';
function App() {
return (
Home
About
);
}
Conclusión
En este tutorial, has aprendido a crear una aplicación web utilizando React JS, React Query, Zustand y Wouter. Estas herramientas te permitirán construir aplicaciones web modernas y eficientes de manera sencilla. Esperamos que este tutorial te haya sido de utilidad y te inspire a seguir explorando el maravilloso mundo de React JS.
📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta!
https://amzn.to/3r83cjL
Excelente video! 👌🏻 una pregunta, alguien sabe cual es el nombre del tema y la fuente?😱
jajaja buen nombre tiene tu equipo 😆
Muy buen video! voy a empezar a subir tmb contenido de programación, aun que por el momento yo tiro más por Vue! te dejo mi sub y mi like! =)
Puedes enseñarnos como podemos hacer puebas o test, en esa app react?
Gran aporte gracias
excelente video!!!! muchas gracias
gran video gracias! …tenia un error => TypeError: Cannot read properties of undefined (reading 'map') ….olvide instalar esto ===>>> npm install -g json-server
Carlos una duda mas bien de JS.
Cual es la finalidad de regresar un error cuando en una petición http no obtengamos un ok. Que puede pasar si no regresamos ese error?
Tienes el código del proyecto en este repositorio ⭐ (déjale una estrellita)
https://github.com/carlosazaustre/hotel-reservation-app
Donde esta el repo, me salta un error extraño:
Uncaught TypeError: (intermediate value)(…) is not iterable
señala esto como el problema const [ match , params] = useRouter("/hotel/:id");
Excelente Carlos 😀 Muchas gracias.
buenísimo y muy claro como siempre Carlos! 👏
Hola Carlos cómo estás?, pregunta, por qué no usas redux?
Gracias por el video Carlos , me gusta el material que subes así en videos de 40 mn se agradece 😊
El profe como siemrpe dando catedra gracias por el contenido y exitos
Estas librerias son actuales o es actual para producción en proyectos reales? escuché de react router y no wouter, mas que todo en tema de usabilidad es viable lo nuevo?
Excelente Video, cual es el tema y la fuente que usas ?
Saludos desde PERÚ
estaria chevere que hagas un video de un CRUD de react y supabase
Aza cuando sacas video dedicado a todas las pruebas técnicas para junior en react donde abarque pruebas técnicas de las empresas más jodidas de entrar