,

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 aplicacioĢn paso a paso | React Query, Zustand, Wouter

TUTORIAL REACT JS desde cero

En este tutorial aprenderaĢs a crear una aplicacioĢn paso a paso utilizando React JS, React Query, Zustand y Wouter. Estas son herramientas modernas que te ayudaraĢn a construir aplicaciones web eficientes y escalables.

Paso 1: ConfiguracioĢn del entorno

Lo primero que debes hacer es configurar tu entorno de desarrollo. NecesitaraĢ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: CreacioĢn de componentes

Una vez que tengas configurado tu entorno de desarrollo, puedes comenzar a crear los componentes de tu aplicacioĢn. Puedes utilizar React Hooks para manejar el estado y las operaciones asincrĆ³nicas en tu aplicacioĢ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: IntegracioĢ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 aplicacioĢn. Puedes utilizarla para manejar la cachĆ©, la paginacioĢ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 aplicacioĢ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 aplicacioĢ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


);
}

ConclusioĢn

En este tutorial, has aprendido a crear una aplicacioĢ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
1 year ago

šŸ“˜Mi nuevo libro "Aprendiendo React" Ā”Ya a la venta!
https://amzn.to/3r83cjL

Wiki Flash
1 year ago

Excelente video! šŸ‘ŒšŸ» una pregunta, alguien sabe cual es el nombre del tema y la fuente?šŸ˜±

Pablo GƔlvez
1 year ago

jajaja buen nombre tiene tu equipo šŸ˜†

Eric Rodz
1 year 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 šŸ‘šŸŽ
1 year ago

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

Santi Dionis
1 year ago

Gran aporte gracias

Mauricio Ferreyra
1 year ago

excelente video!!!! muchas gracias

Nicolas Silva ZuƱiga
1 year 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
1 year 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
1 year ago

Tienes el cĆ³digo del proyecto en este repositorio ā­ (dĆ©jale una estrellita)
https://github.com/carlosazaustre/hotel-reservation-app

Vinicio ChavarrĆ­a
1 year 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
1 year ago

Excelente Carlos šŸ˜€ Muchas gracias.

equistene /////
1 year ago

buenĆ­simo y muy claro como siempre Carlos! šŸ‘

ProgramaciĆ³n
1 year ago

Hola Carlos cĆ³mo estĆ”s?, pregunta, por quĆ© no usas redux?

Deus lo Vult
1 year ago

Gracias por el video Carlos , me gusta el material que subes asĆ­ en videos de 40 mn se agradece šŸ˜Š

Yoan Estrada Blanco
1 year ago

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

Daniel Danish
1 year 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
1 year ago

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

EDUCODE
1 year ago

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

EDUCODE
1 year 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