How I Started Learning React as a Beginner (My Honest 20-Day Journey)

Question

Introduction

If you're thinking about learning React but feel overwhelmed, confused, or unsure where to begin — you’re exactly where I was just a few weeks ago.
I’m Manoj, and this is a beginner-friendly explanation of what my first 20 days of React learning looked like, what helped me the most, what confused me, and what I wish someone had told me earlier.
My hope is simple: if you’re starting React today, I want this to feel relatable, human, and helpful.

Day 1–5: Understanding the Basics

React felt intimidating at first.
JSX looked strange.
Components felt new.
And I didn’t understand how React “re-renders” anything.

But slowly, with simple examples, this started to feel easier:

function Welcome() {
return

Hello React!

;
}

This tiny snippet taught me:
A component is just a function. It returns UI. And React builds everything using components. That was enough to get started.

Day 6–10: Hooks, State & Feeling Lost (But Learning)

This is when React starts becoming real.

useState was the first hook I understood properly: const [count, setCount] = useState(0);

The moment I built a simple counter app, I understood:

• React updates the UI automatically
• You don’t manually handle the DOM
• State drives the whole UI

There were days when I felt stuck, confused, frustrated — and that’s normal.
React is not difficult, but it does require patience.

Day 11–15: API Calls & Routing

Fetching data made React feel “real”.

*useEffect(() => {

  fetch("https://jsonplaceholder.typicode.com/posts")
  .then(res => res.json())
  .then(data => setPosts(data));

}, []);*

This taught me:

1. useEffect runs actions like fetching
2. Dependency arrays matter
3. Data → state → UI
4. A React app can work with any public API

Routing was another eye-opener:

1. BrowserRouter
2. Link instead of anchor
3. useParams() for dynamic URLs
4. Nested routes using Outlet

Suddenly my app felt like a complete website.

Day 16–20: Context API & Building Mini Projects

Context API helped me understand global data flow:
const UserContext = createContext();

It removed the need for props drilling and made my code cleaner.

Around this time, I started building mini projects:

1. Notes App
2. Photo Gallery
3. Small UI experiments
4. Animations using Framer Motion
5. React Icons
6. localStorage-based apps

These mini projects gave me more confidence than any tutorial ever could.

What I Learned (Beginner-Friendly Perspective)

Don’t rush : React becomes easier when you learn one concept at a time.
Build small projects : Even tiny projects help build your logic, speed, and confidence.
JavaScript matters : The better your JS, the easier your React journey.
Confusion is normal : Everyone gets stuck. It’s part of growing.

Advice for Freshers Starting React:

1. Start with simple components
2. Learn hooks slowly
3. Don’t skip API calls
4. Don't memorize — understand
5. Build something every week
6. Stay consistent

Closing Thoughts

I’m still learning, still improving, and still building.
React has changed how I think about web development, and the first 20 days taught me more than I expected.

If you’re starting your journey — trust me — take it one day at a time.
It gets better.
And more fun.

Thanks for reading.
— Manoj Rahar