How Long Does It Take to Learn React JS Properly?

Estimate your timeline honestly:

Weekly focused hours available: ____

Approximate effort (focused practice, not video time):
- JavaScript fundamentals ...... largest block
- Core React + hooks ........... medium block
- Routing, APIs, forms ......... medium block
- 2-3 portfolio projects ....... large block

Timeline = total effort / weekly hours
Doubling weekly hours roughly halves the calendar time,
but never skip the projects block.

You are ready to start React if you can, without help:

[ ] Use map, filter and reduce on arrays
[ ] Destructure objects and arrays
[ ] Write arrow functions and template literals
[ ] Use import / export between files
[ ] Fetch data with async / await and handle errors
[ ] Explain what a Promise is

5-6 ticks: start React now
3-4 ticks: one or two more weeks of JavaScript
0-2 ticks: focus on JavaScript first

import { useState } from "react";

export default function TodoApp() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState("");

  function addItem(e) {
    e.preventDefault();
    if (!text.trim()) return;
    setItems([...items, { id: Date.now(), text }]);
    setText("");
  }

  return (
    <form onSubmit={addItem}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">Add</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </form>
  );
}

import { useEffect, useState } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        if (!res.ok) throw new Error("Request failed");
        return res.json();
      })
      .then(setUsers)
      .catch((err) => setError(err.message));
  }, []); // empty array: run once after first render

  if (error) return <p>Error: {error}</p>;
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

# Create a new React project with Vite
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

# Add routing
npm install react-router-dom

# Start the dev server
npm run dev

# Production build
npm run build

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link> | <Link to="/about">About</Link>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

Week: ____   Stage: JS base / Core React / Real apps

Goal this week (one sentence):
__________________________________

Mon - learn concept: __________
Tue - practise: small exercise
Wed - learn concept: __________
Thu - practise: small exercise
Fri - build: add feature to weekly app
Sat - build + debug, push to GitHub
Sun - review notes, plan next week

Concept: ____________________

Explain it in 2 lines (as if to a friend):
__________________________________

Code example I wrote:
__________________________________

Bug I hit and the fix:
__________________________________

Confidence (1-5): ___

Project 1 - Small (Stage 2)
[ ] Components, props, state, list with keys
[ ] Pushed to GitHub

Project 2 - API app (Stage 3)
[ ] useEffect fetch, loading + error states
[ ] Routing with 3 pages
[ ] Deployed live

Project 3 - Portfolio piece
[ ] Real problem, clean UI, responsive
[ ] Form validation
[ ] A few tests
[ ] README with screenshots and live link