React for Beginners: Complete Guide (2026)

React for Beginners: Complete Guide (2026)

Learn React from scratch — components, state, props, and a real project. The most beginner-friendly React guide for 2026.

node --version   # Should show v18.0.0 or higher
npm --version   # Should show 9.0.0 or higher

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

# Navigate into the folder
cd my-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

my-react-app/
├── src/
│   ├── App.jsx          ← Your main component
│   ├── main.jsx         ← React entry point
│   └── index.css        ← Global styles
├── index.html           ← HTML template
├── package.json
└── vite.config.js

// A simple React functional component
function Greeting() {
  return (
    <div>
      <h1>Hello from owndevz! 👋</h1>
      <p>Welcome to React for Beginners</p>
    </div>
  );
}

export default Greeting;

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />  {/* Reuse it as many times as you want! */}
    </div>
  );
}

export default App;

// Child component receives props as a parameter
function ProductCard({ name, price, inStock }) {
  return (
    <div style={{ border: '1px solid #e3ddd6', borderRadius: '12px', padding: '16px' }}>
      <h3>{name}</h3>
      <p>Price: ₹{price.toLocaleString()}</p>
      <span>{inStock ? '✅ In Stock' : '❌ Out of Stock'}</span>
    </div>
  );
}

export default ProductCard;

import ProductCard from './ProductCard';

function App() {
  return (
    <div>
      {/* Pass data as attributes */}
      <ProductCard
        name="MacBook Pro M3"
        price={199999}
        inStock={true}
      />
      <ProductCard
        name="iPhone 16 Pro"
        price={134900}
        inStock={false}
      />
    </div>
  );
}

import { useState } from 'react';

function Counter() {
  // useState returns [currentValue, functionToUpdateIt]
  const [count, setCount] = useState(0);  // 0 is the initial value

  return (
    <div style={{ textAlign: 'center', padding: '24px' }}>
      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>
        ➕ Increment
      </button>

      <button onClick={() => setCount(count - 1)}>
        ➖ Decrement
      </button>

      <button onClick={() => setCount(0)}>
        🔄 Reset
      </button>
    </div>
  );
}

export default Counter;

import { useState } from 'react';

// Child component to display one task
function TaskItem({ task, onDelete }) {
  return (
    <li style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '12px 16px',
      background: '#fff',
      border: '1px solid #e3ddd6',
      borderRadius: '8px',
      marginBottom: '8px',
      fontSize: '14px'
    }}>
      <span>{task}</span>
      <button
        onClick={() => onDelete(task)}
        style={{ background: '#fee2e2', border: 'none', borderRadius: '6px',
          padding: '4px 10px', cursor: 'pointer', color: '#991b1b', fontWeight: '600' }}>
        Delete
      </button>
    </li>
  );
}

// Main parent component
function TaskApp() {
  const [tasks, setTasks]     = useState(['Learn React', 'Build a project']);
  const [input, setInput]     = useState('');

  const addTask = () => {
    if (!input.trim()) return;        // don't add empty tasks
    setTasks([...tasks, input]);      // spread existing + new task
    setInput('');                     // clear input field
  };

  const deleteTask = (taskToDelete) => {
    setTasks(tasks.filter(t => t !== taskToDelete));
  };

  return (
    <div style={{ maxWidth: '480px', margin: '40px auto', fontFamily: 'Segoe UI, sans-serif' }}>
      <h1 style={{ color: '#1a1714', marginBottom: '20px' }}>📝 My Task Manager</h1>

      {/* Add task input */}
      <div style={{ display: 'flex', gap: '8px', marginBottom: '20px' }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTask()}
          placeholder="Add a new task..."
          style={{ flex: 1, padding: '10px 14px', border: '1px solid #e3ddd6',
            borderRadius: '8px', fontSize: '14px' }}
        />
        <button onClick={addTask}
          style={{ background: '#e8421a', color: '#fff', border: 'none',
            borderRadius: '8px', padding: '10px 18px', cursor: 'pointer',
            fontWeight: '700', fontSize: '14px' }}>
          Add
        </button>
      </div>

      {/* Task count */}
      <p style={{ color: '#9e9890', fontSize: '13px', marginBottom: '12px' }}>
        {tasks.length} task{tasks.length !== 1 ? 's' : ''} remaining
      </p>

      {/* Task list */}
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {tasks.map((task, index) => (
          <TaskItem key={index} task={task} onDelete={deleteTask} />
        ))}
      </ul>

      {tasks.length === 0 && (
        <p style={{ textAlign: 'center', color: '#9e9890' }}>
          🎉 All done! Add a new task above.
        </p>
      )}
    </div>
  );
}

export default TaskApp;

// ── State ──
const [value, setValue] = useState(initialValue);
setValue(newValue);               // update state
setValue(prev => prev + 1);      // update based on previous

// ── Side Effects ──
useEffect(() => {
  // runs after every render
}, []);                           // [] = runs only once on mount
// [dependency] = runs when dependency changes

// ── Fetch API Data ──
useEffect(() => {
  fetch('https://api.example.com/products')
    .then(res => res.json())
    .then(data => setProducts(data));
}, []);

// ── Conditional Rendering ──
{isLoggedIn && <Dashboard />}
{isLoggedIn ? <Dashboard /> : <Login />}

// ── Rendering Lists ──
{items.map(item => (
  <ItemCard key={item.id} item={item} />
))}

// ── Handle Form Input ──
<input value={text} onChange={e => setText(e.target.value)} />