Forem: adams.nxt

Por qué deberías dominar Fetch nativo (especialmente ahora)

adams.nxt — Sat, 04 Apr 2026 13:16:58 +0000

Hace unos años, usar librerías como Axios parecía la opción obvia.
Sintaxis más limpia, parseo automático de JSON, interceptores… simplemente hacía todo más fácil.

Pero recientemente, con problemas de seguridad y riesgos en el ecosistema (incluyendo casos donde paquetes populares fueron comprometidos), algo quedó muy claro:

👉 Cuanto más dependes de abstracciones, más frágil se vuelve tu stack.

Esto no se trata de dejar de usar herramientas.
Se trata de entender la base.

Y cuando hablamos de hacer peticiones HTTP en el navegador o en Node.js, esa base es fetch.

🧠 ¿Qué es Fetch?
fetch es una API nativa de JavaScript que te permite hacer peticiones HTTP.

Sin dependencias
Sin instalaciones
Sin sorpresas
Ya viene incluida en navegadores modernos y en Node.js (v18+).

En esencia, fetch devuelve una Promise que se resuelve con un objeto Response.

⚡ El fetch más simple que puedes escribir
fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err));
Simple, ¿verdad?

Pero en aplicaciones reales necesitamos algo más estructurado, reutilizable y seguro.

🔧 Paso a paso: creando una función limpia con fetch
Vamos a construir una función bien hecha desde cero.

Definir una base URL Esto mantiene tus endpoints limpios y fáciles de mantener.

const baseUrl = "https://jsonplaceholder.typicode.com";

Crear una función async Usar async/await hace el código más claro.

export async function getUsers() {

Hacer la petición

const response = await fetch(${baseUrl}/users);

En este punto, response no es tu data todavía — es un objeto con información como status, headers, etc.

Procesar la respuesta

const processedResponse = await response.json();

Esto convierte la respuesta en datos utilizables en JavaScript.

Manejar errores correctamente Nunca confíes en la red.

try { // lógica } catch (err) { console.error("Error fetching users:", err); return []; }

✅ Versión final (base lista para producción)

const baseUrl = "https://jsonplaceholder.typicode.com"; export async function getUsers() { try { const response = await fetch(${baseUrl}/users); const processedResponse = await response.json(); console.log(processedResponse); return processedResponse; } catch (err) { console.error("Error fetching users:", err); return []; } }

⚠️ Mejora importante (que muchos ignoran)
fetch NO lanza errores automáticamente en fallos HTTP (como 404 o 500).

Become a Medium member
Es decir, esto:

fetch("/wrong-url")
👉 NO entra al catch.

Por eso siempre deberías validar:
if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); }

🔐 Versión más segura

export async function getUsers() { try { const response = await fetch(${baseUrl}/users); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const processedResponse = await response.json(); return processedResponse; } catch (err) { console.error("Error fetching users:", err); return []; } }

🚀 Por qué esto importa más que nunca
Cuando dependes totalmente de librerías como Axios:

Heredas sus vulnerabilidades
Dependes de su mantenimiento
Pierdes visibilidad de lo que realmente pasa
Y cuando algo falla… te quedas sin control.

Pero cuando entiendes fetch:

Debuggeas más rápido
Reduces dependencias
Mantienes el control
Y siendo honestos…

👉 Para la mayoría de casos, ya no necesitas Axios.

⚖️ ¿Cuándo sí usar Axios?
Para ser justos, Axios sigue siendo útil cuando necesitas:

Interceptores de request/response
Transformaciones automáticas
Soporte para navegadores antiguos
Pero incluso así, entender fetch te hace mejor desarrollador.

💭 Conclusión
Los frameworks cambian.
Las librerías van y vienen.

Pero los fundamentos…

👉 se acumulan.

Aprender fetch no es solo hacer requests — es tener control sobre tu stack.

Y en un mundo donde las dependencias pueden romperse de un día para otro…

👉 eso ya no es opcional.

👋 Sígueme para más
Comparto tips simples, snippets y buenas prácticas de programación.

Sígueme como @adams.nxt

🔗 Código
Puedes encontrar más ejemplos en mi GitHub:
https://github.com/adamsnxt

Why You Should Know Vanilla Fetch (Especially Now)

adams.nxt — Sat, 04 Apr 2026 13:06:50 +0000

A few years ago, using libraries like Axios felt like the obvious choice. Cleaner syntax, built-in JSON parsing, interceptors… it just made life easier.

But recently, after security concerns and ecosystem risks (including incidents where popular packages were compromised), one thing became very clear:

👉 The more you depend on abstractions, the more fragile your stack becomes.

This isn’t about abandoning tools. It’s about understanding the foundation.

And when it comes to making HTTP requests in the browser or Node.js, that foundation is fetch.

What is Fetch?
fetch is a native JavaScript API that allows you to make HTTP requests.

No dependencies. No installs. No surprises.

It’s already available in modern browsers and in Node.js (v18+).

At its core, fetch returns a Promise that resolves to a Response object.

The Simplest Fetch You Can Write

fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err));

Simple, right?

But for real-world apps, we need something more structured, reusable, and safe.

Step-by-Step: Building a Clean Fetch Function
Let’s build a proper data-fetching function from scratch.

Define a Base URL This keeps your endpoints clean and maintainable.

const baseUrl = "https://jsonplaceholder.typicode.com";

Create an Async Function Using async/await makes the code easier to read and reason about.

export async function getUsers() {

Make the Request

const response = await fetch(${baseUrl}/users);

At this point, response is not your data yet — it's a wrapper with metadata (status, headers, etc).

Parse the Response

const processedResponse = await response.json();

This converts the raw response into usable JavaScript data.

Handle Errors Properly Never trust the network.

try { // request logic } catch (err) { console.error("Error fetching users:", err); return []; }

Final Version (Production-Ready Baseline)
Here’s the complete function:

Important Improvement (That Most People Miss)
fetch does NOT throw errors for HTTP failures (like 404 or 500).

Join The Writer's Circle event
That means this:

fetch("/wrong-url")

👉 will NOT go to catch.

So you should always check:

if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); }

Safer Version

Why This Matters More Than Ever
When you rely entirely on libraries like Axios:

You inherit their vulnerabilities
You depend on their maintenance
You abstract away critical knowledge
When something breaks… you’re stuck.

But when you understand fetch:

You can debug faster
You reduce dependencies
You stay in control
And honestly?

For most use cases, you don’t need Axios anymore.

When Should You Still Use Axios?
To be fair, Axios still shines when you need:

Request/response interceptors
Automatic transforms
Older browser support
But even then — knowing fetch makes you a better engineer.

Final Thought
Frameworks change. Libraries come and go.

But fundamentals?

They compound.

Learning fetch isn’t just about making requests — it’s about owning your stack.

And in a world where dependencies can break overnight…

That’s not optional anymore.

👋 Follow for more
I share simple, real-world programming tips and snippets.

Follow me as @adams.nxt

You can find more code examples on my GitHub:
https://github.com/adamsnxt

How to Loop Through Arrays in React (The Right Way)

adams.nxt — Fri, 03 Apr 2026 01:01:12 +0000

If you’re learning React, at some point you’ll hit this question:

“How do I properly loop through arrays?”

And yeah… you can use a for loop — but that’s not how React is meant to work.

Let’s break it down simply.

🧠 The React Way: map()
In React, the correct way to render lists is using JavaScript’s .map() method.

Why?

Because React is declarative — you describe what the UI should look like based on data.

Example:
const users = ["Adam", "Sophia", "Lucas"];
function App() {
return (

{users.map((user, index) => (

{user}

))}

);
}
👉 This takes each item in the array and turns it into UI.

⚠️ The Key Problem (Most Devs Ignore This)
React needs a way to identify each element in the list.

Become a Medium member
That’s where the key comes in.

❌ Bad:
{users.map((user, index) => (

{user}

))}
✅ Better:
const users = [
{ id: 1, name: "Adam" },
{ id: 2, name: "Sophia" },
];
{users.map((user) => (

{user.name}

))}
👉 Always use a unique and stable value.

🚫 Why NOT use for or forEach
You might think:

“Why not just loop like normal?”

Because:

forEach() does not return anything → React can’t render it
for loops break the declarative pattern
You end up writing more code for worse results
🔁 Real World Example
Let’s say you fetch data from an API:

const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then(res => res.json())
.then(data => setUsers(data));
}, []);
Rendering it:

return (

{users.map(user => (

{user.name}

{user.email}

))}

);
💥 Common Mistakes
Forgetting the key
Using index when the list can change
Trying to use forEach
Mutating the array before rendering
⚡ Clean Pattern (Pro Tip)
Extract components:

function UserCard({ user }) {
return (

{user.name}

{user.email}

);
}
{users.map(user => (

))}
👉 Cleaner, reusable, scalable.

🚀 Final Thoughts
If you remember one thing:

React doesn’t “loop” — it transforms data into UI.

Mastering .map() is one of the first steps to thinking like a React developer.

👋 Follow for more
I share simple, real-world programming tips and snippets.

Follow me as @adams.nxt

You can find more code examples on my GitHub:
https://github.com/adamsnxt

Cómo recorrer arrays en React (La forma correcta)

adams.nxt — Fri, 03 Apr 2026 00:59:27 +0000

Si estás aprendiendo React, en algún punto te vas a hacer esta pregunta:

“¿Cómo recorro arrays correctamente?”

Y sí… puedes usar un for, pero esa no es la forma en la que React está pensado para trabajar.

Vamos a explicarlo simple.

🧠 La forma en React: map()
En React, la manera correcta de renderizar listas es usando el método .map() de JavaScript.

¿Por qué?

Porque React es declarativo — tú describes cómo debe verse la UI a partir de los datos.

Ejemplo:
const users = ["Adam", "Sophia", "Lucas"]; function App() { return ( <div> {users.map((user, index) => ( <p key={index}>{user}</p> ))} </div> ); }
👉 Esto toma cada elemento del array y lo convierte en UI.

⚠️ El problema de las key (que muchos ignoran)
React necesita una forma de identificar cada elemento en la lista.

Become a Medium member
Ahí es donde entra la key.

❌ Mal:
{users.map((user, index) => ( <p key={index}>{user}</p> ))}
✅ Mejor:
const users = [ { id: 1, name: "Adam" }, { id: 2, name: "Sophia" }, ]; {users.map((user) => ( <p key={user.id}>{user.name}</p> ))}
👉 Siempre usa un valor único y estable.

🚫 Por qué NO usar for o forEach
Puede que pienses:

“¿Por qué no recorrer como siempre?”

Porque:

forEach() no retorna nada → React no puede renderizarlo ()
Los for rompen el patrón declarativo
Terminas escribiendo más código para peores resultados
🔁 Ejemplo real
Imagina que haces una petición a una API:

const [users, setUsers] = useState([]); useEffect(() => { fetch("/api/users") .then(res => res.json()) .then(data => setUsers(data)); }, []);
Renderizando:

return ( <div> {users.map(user => ( <div key={user.id}> <h3>{user.name}</h3> <p>{user.email}</p> </div> ))} </div> );
💥 Errores comunes
Olvidar la key
Usar index cuando la lista puede cambiar
Intentar usar forEach
Mutar el array antes de renderizar
⚡ Patrón limpio (Pro tip)
Extrae componentes:

function UserCard({ user }) { return ( <div> <h3>{user.name}</h3> <p>{user.email}</p> </div> ); } {users.map(user => ( <UserCard key={user.id} user={user} /> ))}
👉 Más limpio, reutilizable y escalable.

🚀 Conclusión
Si te quedas con una sola idea:

React no “recorre” — transforma datos en UI.

Dominar .map() es uno de los primeros pasos para pensar como un desarrollador en React.

👋 Sígueme para más
Comparto tips simples, snippets y buenas prácticas de programación.

Sígueme como @adams.nxt

Puedes encontar mas ejemplos de codigo en mi GitHub:
https://github.com/adamsnxt