DEV Community: Javier Ductor Peters

Launched My First Portfolio Site After 6 Months of Learning to Code

Javier Ductor Peters — Mon, 06 Jan 2025 09:51:34 +0000

Hey dev community! 👋

I wanted to share a milestone in my coding journey - I just launched my first portfolio website! As someone who started learning to code 6 months ago, this feels like a huge step.

What I've Been Learning

Over the past 6 months, I've been focusing on:

React JS
Vanilla JavaScript
HTML & CSS

Current State

The site is still a work in progress, and I'm learning new things every day. I decided to launch it now rather than waiting for "perfection" because I believe in learning in public and iterating based on feedback.

What's Next

I plan to continue improving the site, adding more projects, and refining my skills. If you're interested in checking it out or providing feedback, you can find it here: The Spaghetti Dev

I'd love to hear from other developers who've been on similar journeys. What were some key learnings from your first portfolio site?

Also, if you have any feedback on my project please feel free to comment.

useState Explained Simply - A Guide for Non-Developers (2025)

Javier Ductor Peters — Sun, 05 Jan 2025 11:58:10 +0000

Hey 👋

Coming from a marketing background, I remember how intimidating React hooks felt at first. All those technical terms and developer jargon made my head spin! After lots of learning (and plenty of confusion), I wanted to create the guide I wish I had when starting out.

If you've ever:

Felt lost in the React documentation 😵‍💫
Wondered why we can't just use regular variables
Struggled to explain useState to others
Wanted examples that actually make sense

Then this guide is for you! Let's break useState down into bite-sized, digestible pieces.

What Are React Hooks? 🎣

Think of Hooks like a Swiss Army knife - each tool has a specific purpose:

useState: Your magical notepad (we'll dive deep into this one!)
useEffect: Your personal assistant who watches for changes
useContext: The group chat where everyone shares information
useReducer: Like useState's big brother for complicated stuff
useMemo: Your smart friend who remembers solutions
useCallback: Similar to useMemo, but for remembering functions
useRef: Like putting a sticky note on something to find it later

What is useState? 📝

Remember those magic boards where you could write something, erase it, and write something new? useState is exactly like that for your website! It helps your website remember things and update them when needed.

const [something, setSomething] = useState(startingValue);

Think of it as:

something: What's currently written on your board
setSomething: Your special eraser/marker to change what's written
startingValue: What you write on the board to begin with

How Does useState Work? 🔄

Let me explain this like a cooking recipe:

1. Getting Ready to Cook (Initialization)

Set up your cooking space (your component)
Create a special recipe card (React's state space)
Each ingredient gets its own spot on the card

2. Changing the Recipe (Updates)

When you want to change an ingredient amount:

React writes the change on a sticky note
Puts that note in a "to-do" pile
Plans to update the recipe soon
Groups multiple changes together (like changing several ingredients at once)

3. Making the Changes (Render)

React reviews all sticky notes
Calculates new amounts
Updates the recipe card
Shows everyone the new recipe

4. Finishing Up (Commit)

React makes the changes
Cleans up old ingredients
Sets up new ingredients

Real-World Examples 💡

1. A Simple Welcome Message

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! 🎉</p>
    </div>
  )
}

2. A Like Button Counter

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onClick={() => setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

3. Dark Mode Toggle

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div style={{
      background: isDark ? 'black' : 'white',
      color: isDark ? 'white' : 'black'
    }}>
      <button onClick={() => setIsDark(!isDark)}>
        Switch to {isDark ? '☀️ Light' : '🌙 Dark'} Mode
      </button>
    </div>
  )
}

Common Mistakes (We All Make Them!) 🚫

1. Trying to Change Things Directly

// 🚫 Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

2. Updating Based on Previous Value

// 🚫 Don't do this!
setCount(count + 1)
setCount(count + 1)  // Oops, this won't work right!

// ✅ Do this instead!
setCount(prev => prev + 1)
setCount(prev => prev + 1)  // Much better!

When Should You Use useState? ✅

Use it when you need to:

Keep track of form inputs
Toggle things on/off
Count things
Store temporary information
Handle user interactions

When Should You Not Use useState? ⛔

Avoid it when:

You need to share data between many components (use Context)
You have complex state logic (use useReducer)
You're dealing with large amounts of data
You need to update multiple related things at once

Let's Practice! 💪

Here's a small challenge to test your understanding:

Create a simple counter component
Add increment and decrement buttons
Add a reset button
Bonus: Add a "multiply by 2" button

Drop your solution in the comments! I'd love to see what you create.

Wrapping Up 🎁

useState might seem scary at first, but it's really just a way to help your website remember things - like a digital sticky note system! Remember:

Start simple
Practice with basic examples
Don't worry about being perfect
Keep building and learning

Coming from a non-technical background myself, I know these concepts take time to sink in. That's totally normal!

Let's Connect! 🤝

I'd love to hear about your React journey:

What was your "aha!" moment with useState?
What analogies helped you understand it?
What other React concepts would you like me to break down?

Share your thoughts in the comments below!

Stay tuned for more guides where I break down other React concepts into normal human language!

Happy coding! 🚀

Cover image credits: Your Image Credit Here

10 Best Icon Libraries for React You Should Try in 2025

Javier Ductor Peters — Sat, 04 Jan 2025 14:56:25 +0000

Hey Dev.to community! 👋

As a React developer, I've spent countless hours exploring different icon libraries for various projects. Finding the right icon library can be overwhelming - there are so many options, and they often look similar at first glance. After extensive research and hands-on experience, I've put together a curated list of the best React icon libraries for 2025.

Why Your Choice of Icon Library Matters

Before diving into the options, let's talk about what makes a great icon library. In my experience, you should look for:

🎨 Consistent design across all icons
⚡ Optimal bundle size for performance
🎯 Easy customisation options
🔄 Regular updates and maintenance
📚 Comprehensive documentation
📝 TypeScript support
♿ Accessibility features

Let's explore the top 10 libraries that check these boxes!

1. Lucide React

*GitHub Stars: 5k+ | Weekly Downloads: 200k+
*
Lucide React has become my go-to choice for modern React projects. It's a well-maintained fork of Feather Icons that brings fresh updates and community-driven development.

Why It Stands Out:

Over 1,000 beautifully crafted icons
Excellent TypeScript support
Tiny bundle size (average 1KB per icon)
Customisable stroke width and colours
Regular monthly updates

import { Camera, Heart, Coffee } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <Camera size={24} color="red" />
      <Heart />
      <Coffee strokeWidth={1.5} />
    </div>
  );
}

2. React Icons

*GitHub Stars: 9k+ | Weekly Downloads: 500k+
*
Need variety? React Icons is your Swiss Army knife, combining multiple icon packs into one powerful library.
Key Features:

Includes icons from 20+ popular icon sets
Unified API for all icon packs
Tree-shaking support
Easy integration with build tools

import { FaReact } from 'react-icons/fa';
import { AiOutlineCloud } from 'react-icons/ai';

function MyComponent() {
  return (
    <div>
      <FaReact size="2em" />
      <AiOutlineCloud color="skyblue" />
    </div>
  );
}

3. Phosphor Icons

**GitHub Stars: 4k+ | Weekly Downloads: 150k+
**Phosphor Icons is a hidden gem that's gaining traction fast. Its flexible weight system makes it a designer's dream.
What You'll Love:

6 weight variants for each icon
900+ icons in the collection
Consistent 16px grid
Built-in React hooks

import { Horse, HorseThin, HorseBold } from '@phosphor-icons/react';

function MyComponent() {
  return (
    <div>
      <Horse size={32} />
      <HorseThin weight="thin" />
      <HorseBold color="#1a1a1a" />
    </div>
  );
}

4. Iconoir

*GitHub Stars: 3k+ | Weekly Downloads: 100k+
*
If you're after clean, minimal design, Iconoir should be on your radar.
Standout Features:

1200+ open-source icons
SVG-first approach
Consistent stroke width
Regular updates

import { Calendar, BreadSlice } from 'iconoir-react';

function MyComponent() {
  return (
    <div>
      <Calendar strokeWidth={1.5} />
      <BreadSlice color="brown" />
    </div>
  );
}

5. Heroicons

*GitHub Stars: 17k+ | Weekly Downloads: 300k+
*
Created by the Tailwind CSS team, Heroicons is perfect if you're using Tailwind or just love clean, consistent design.
Why Developers Love It:

Official React components
Solid and outline variants
Seamless Tailwind CSS integration
Accessibility-first approach

import { BeakerIcon, ChatBubbleIcon } from '@heroicons/react/24/solid';

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-6 w-6 text-blue-500" />
      <ChatBubbleIcon className="h-6 w-6 text-gray-500" />
    </div>
  );
}

6. Radix Icons

*GitHub Stars: 2k+ | Weekly Downloads: 75k+
*
Radix Icons shines when you need pixel-perfect, accessible icons for modern interfaces.
Notable Features:

15x15 pixel-perfect icons
Consistent visual style
Built-in accessibility labels
Perfect for minimalist designs

import { ArrowRightIcon, CheckIcon } from '@radix-ui/react-icons';

function MyComponent() {
  return (
    <div>
      <ArrowRightIcon className="text-black" />
      <CheckIcon width={20} height={20} />
    </div>
  );
}

7. Remix Icons

*GitHub Stars: 7k+ | Weekly Downloads: 250k+
*
Need options? Remix Icons has you covered with one of the largest collections available.
Why Consider It:

2500+ icons
Line and fill variants
Consistent 24px grid
Category-based organisation

import { RiHomeSmileLine, RiHomeSmileFill } from 'remix-icons-react';

function MyComponent() {
  return (
    <div>
      <RiHomeSmileLine size={24} />
      <RiHomeSmileFill color="#000" />
    </div>
  );
}

8. Bootstrap Icons React

*GitHub Stars: 8k+ | Weekly Downloads: 400k+
*
The official React components for Bootstrap icons - perfect if you're already using Bootstrap or love its design language.
Key Benefits:

1800+ icons
Consistent with Bootstrap design
Fill and outline variants
Built-in TypeScript support

import { Alarm, Archive } from 'react-bootstrap-icons';

function MyComponent() {
  return (
    <div>
      <Alarm size={24} />
      <Archive color="primary" />
    </div>
  );
}

9. Material Icons React

*GitHub Stars: 10k+ | Weekly Downloads: 450k+
*
The go-to choice for Material Design projects, backed by Google's design system.
Highlights:

2000+ icons
Multiple themes (outlined, rounded, sharp)
Official Google support
Regular updates

import { AccountCircle, AddCircle } from '@mui/icons-material';

function MyComponent() {
  return (
    <div>
      <AccountCircle fontSize="large" />
      <AddCircle color="primary" />
    </div>
  );
}

10. Tabler Icons

*GitHub Stars: 3k+ | Weekly Downloads: 120k+
*
A fresh take on icon design with an impressive collection size.
What Sets It Apart:

4,200+ icons
Consistent 24px grid
Customisable stroke width
SVG-first approach

import { IconUser, IconSettings } from '@tabler/icons-react';

function MyComponent() {
  return (
    <div>
      <IconUser size={24} />
      <IconSettings stroke={1.5} />
    </div>
  );
}

How to Choose the Right Library

Consider these factors when making your decision:

*1. Project Requirements
*

Design consistency with your application
Number of icons needed
Specific icon styles required

*2. Technical Considerations
*

Bundle size impact
Browser support
Integration complexity

*3. Maintenance and Support
*

Update frequency
Community size
Documentation quality

The Bottom Line

The React icon library ecosystem is more vibrant than ever in 2025. Here's my TL;DR recommendation:

🎨 Need design flexibility? → Phosphor Icons
🚀 Want maximum variety? → React Icons
⚡ Prioritize performance? → Lucide React
🎯 Using Tailwind? → Heroicons
🎪 Building with Material Design? → Material Icons React

Let's Discuss!

I'd love to hear your experiences:

1. Which icon library is your favourite?
2. Have you tried any of these in your projects?
3. Are there any great libraries I missed?

Share your thoughts in the comments below! 💭