React for Beginners: Build Your First App With AI Assistance

React is one of the most in-demand skills for web developers right now. And with AI tools like Claude and GitHub Copilot, learning it has become significantly faster than it was even two years ago. This article walks you through the core concepts with real examples — and shows you exactly how to use AI to accelerate your learning.

What is React?

React is a JavaScript library for building user interfaces. Instead of writing HTML that changes manually, you describe what the UI should look like and React updates it automatically when your data changes.

Think of it like this: instead of saying "change this text to the new value", you say "this text always shows userName" — and whenever userName changes, React updates the screen automatically.

Your First Component

Everything in React is a component — a reusable piece of UI. Here is the simplest possible one:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

export default Greeting;

That is it. A function that returns HTML-like syntax (called JSX). You can use this component anywhere: <Greeting />

Props — Passing Data In

Props let you customise components. Like function arguments:

function Greeting({ name, role }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are a {role}.</p>
    </div>
  );
}

// Usage:
<Greeting name="Kirti" role="Engineer" />

State — Data That Changes

Props are read-only. State is data that can change and automatically updates the UI:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Add 1
      </button>
    </div>
  );
}

Every time you click the button, setCount updates the state, React re-renders the component, and the new count appears instantly.

How to Use AI to Learn React Faster

Here is exactly how I suggest using Claude or ChatGPT while learning:

• Explain what you are trying to build — "I want a form that adds items to a list"
• Ask for the simplest version first — "Show me the most basic way to do this"
• Ask it to explain the code line by line — "Explain what each line does"
• Break it deliberately — "What happens if I remove the key prop?"
• Ask for the next level — "Now show me how to make it save to localStorage"

Your First Real Project

The best way to learn is to build something you actually want. Here are 3 beginner-friendly projects that teach you all the core React concepts:

• Todo app — add, complete, delete items. Teaches: useState, lists, events
• Weather app — fetch weather for a city. Teaches: useEffect, API calls, conditional rendering
• Expense tracker — add expenses, see totals. Teaches: forms, calculated state, local storage

Start with the todo app. It sounds boring but it teaches every core React pattern you need. Once you can build it from scratch without looking anything up, you are ready for the next level.