Forem: Usman Butt

Day 10–12 of My React Journey – Context API

Usman Butt — Wed, 20 Aug 2025 19:43:06 +0000

Days 10–12, I focused on React Context API, which provides a way to manage state globally in a React app.

What I Learned

Created a Context object using createContext()
Built a Context Provider that wrapped child components and passed values
Used useContext to consume values in another component
Practiced sending values from Component One ➝ consuming them in Component Two

Why Context API?

Normally, React apps require prop drilling to send data down through multiple components. Context API removes that complexity by creating a global store that any component can access.

This makes it perfect for:

Theme switching
Authentication & user data
Global app settings

Tech Used

React
Context API (createContext, useContext)

Day 8-9 of My React Journey — React Router Basics

Usman Butt — Sun, 17 Aug 2025 21:00:05 +0000

On Day 8-9, I dove into the world of React Router and learned how modern SPAs (Single Page Applications) handle navigation. Instead of reloading pages like in traditional websites, React Router makes navigation smooth, fast, and dynamic ⚡.

What I Explored

Link & NavLink → Navigate between pages without refreshing.
Active Links → Style the current route for a better user experience.
useParams → Fetch and display data directly from the URL.

4.
Built a small project with multiple pages to practice these concepts.

# 🔐 Day 6-7: Built a React Password Generator — Mastered `useCallback`, `useEffect`, and `useRef`

Usman Butt — Fri, 08 Aug 2025 19:42:09 +0000

As part of my React learning journey, I spent Day 6 and 7 building a simple but powerful Password Generator App . This wasn’t just a UI exercise — it was a deep dive into React hooks, especially useCallback, useEffect, and useRef.

What I Built

Password length control
Toggle numbers and special characters
One-click copy to clipboard
Auto-generate when options change

🔍 Hooks I Focused On

`useCallback`

Memoized the password generation logic to avoid unnecessary re-renders — essential for optimization!

`useEffect`

Triggered re-renders when password settings changed. It was a great example of using useEffect for side-effect orchestration.

`useRef`

Used to grab the generated password and copy it to clipboard — direct and clean!

🔗 GitHub Repo

Let me know what you think or suggest improvements

react #javascript #webdev #hooks #devjourney

Day 5 of My React Front-End Journey: Background Color Changer with useState

Usman Butt — Tue, 29 Jul 2025 19:56:37 +0000

Day 4 of My React Front-End Journey: Tailwind Setup + Deep Dive into Props

Usman Butt — Tue, 29 Jul 2025 19:25:07 +0000

What I Did Day before Yesterday
1.Installed and configured Tailwind CSS with React using Vite

2.Learned how props work in React
Passed different types of data (strings, objects, arrays) as props

3.Accessed those props in child components

4.Built reusable components using props

Day 3 of My React Journey: Why Hooks Exist + Built a Counter App with useState

Usman Butt — Fri, 25 Jul 2025 18:59:27 +0000

In vanilla JavaScript, if you want to update something in the UI, you usually:
Use document.querySelector()

Then innerText or innerHTML to manually update each element

But in React, you just use useState() once — and React automatically updates all relevant parts of the UI where that state is used. It’s clean, declarative, and magical.

Day 2 of My React Journey: Playing with React.createElement() , Evaluated Expression and Errors

Usman Butt — Wed, 23 Jul 2025 18:54:34 +0000

Today was all about understanding how React really builds UI under the hood — going beyond the usual JSX and digging into how React.createElement() actually works.

What I Did Today
I created my own React element using React.createElement() instead of JSX.
Here’s how it works:
React.createElement('h1', { className: 'heading' }, 'Hello, world!')
Breakdown:

1.The first argument is the tag name (like 'h1')

2.The second is an object of attributes (just like props)

3.The third is the inner content (can be a string, expression, or even another element)
4.The Forth is for the Evaluated Expression which comes from variable

Day 1 of My Front-End Journey: React Setup + Built a Mini React from Scratch + 1st Component

Usman Butt — Mon, 21 Jul 2025 20:36:49 +0000

What I Did Today (React Day 1)
1) Installed both create-react-app and Vite to understand project setup options
2) Built the first basic component using JSX
3) Played around with combining HTML + JS to build a super simple version of React to understand how things like createElement() and rendering work

It’s early — but exciting. React feels powerful and very developer-friendly once the setup is done.

45 Days. One Goal: Front-End Developer Ready

Usman Butt — Mon, 21 Jul 2025 20:24:38 +0000

I’m Usman, a final-year Computer Science student from Pakistan. I just finished my university exams, and now I’ve got one mission:
👉 To become job-ready as a Front-End (MERN) developer in the next 1.5 months — while also completing my Final Year Project (FYP).

This blog is my first post to kick off that journey. I’ll be learning in public and sharing everything — the good, the bad, and the bugs. 😄