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 (
);
}
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.
š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