,

Aprende a usar React JS desde cero con este tutorial paso a paso | Crea una aplicación con React Query, Zustand, Wouter.

Posted by






TUTORIAL REACT JS desde cero | Crea una aplicación paso a paso | React Query, Zustand, Wouter

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 (

{data.status}

);
}

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.


0 0 votes
Article Rating
20 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Carlos Azaustre - Aprende JavaScript
11 months ago

📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta!
https://amzn.to/3r83cjL

Wiki Flash
11 months ago

Excelente video! 👌🏻 una pregunta, alguien sabe cual es el nombre del tema y la fuente?😱

Pablo Gálvez
11 months ago

jajaja buen nombre tiene tu equipo 😆

Eric Rodz
11 months ago

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! =)

Manzana 👍🍎
11 months ago

Puedes enseñarnos como podemos hacer puebas o test, en esa app react?

Santi Dionis
11 months ago

Gran aporte gracias

Mauricio Ferreyra
11 months ago

excelente video!!!! muchas gracias

Nicolas Silva Zuñiga
11 months ago

gran video gracias! …tenia un error => TypeError: Cannot read properties of undefined (reading 'map') ….olvide instalar esto ===>>> npm install -g json-server

Alejandro Rios
11 months ago

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?

Carlos Azaustre - Aprende JavaScript
11 months ago

Tienes el código del proyecto en este repositorio ⭐ (déjale una estrellita)
https://github.com/carlosazaustre/hotel-reservation-app

Vinicio Chavarría
11 months ago

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");

Jhrd Arteaga
11 months ago

Excelente Carlos 😀 Muchas gracias.

equistene /////
11 months ago

buenísimo y muy claro como siempre Carlos! 👏

Programación
11 months ago

Hola Carlos cómo estás?, pregunta, por qué no usas redux?

Deus lo Vult
11 months ago

Gracias por el video Carlos , me gusta el material que subes así en videos de 40 mn se agradece 😊

Yoan Estrada Blanco
11 months ago

El profe como siemrpe dando catedra gracias por el contenido y exitos

Daniel Danish
11 months ago

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?

Jesus Fernandez
11 months ago

Excelente Video, cual es el tema y la fuente que usas ?
Saludos desde PERÚ

EDUCODE
11 months ago

estaria chevere que hagas un video de un CRUD de react y supabase

EDUCODE
11 months ago

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