React Fundamentals: A Beginner's Guide to Building Modern User Interfaces

If you want to build fast, interactive web applications, learning React fundamentals is one of the smartest moves you can make. 

React is a JavaScript library created at Facebook (now Meta) and used by companies of every size to build user interfaces. It powers everything from small side projects to huge platforms.

In this guide, you'll learn the core concepts every beginner needs: what React is, how JSX works, how to build components, how to manage data with props and state, how to use hooks, and how to render lists and handle events. Each section includes simple code examples so you can follow along.

What Is React and Why Should You Learn It?

React is an open-source JavaScript library for building user interfaces, especially single-page applications where content updates without reloading the page. Instead of manipulating the page directly, you describe what the UI should look like for a given set of data, and React updates the page efficiently when that data changes.

Key Benefits of React

• Component-based architecture: Build small, reusable pieces and combine them into complex interfaces.
• Declarative style: You describe the result you want, and React figures out how to get there.
• Efficient updates: React uses a virtual DOM to minimize costly changes to the real page.
• Huge ecosystem: Routing, state management, testing tools, and frameworks like Next.js build on React.
• Strong job market: React skills are in demand for frontend and full-stack roles.

Prerequisites: What You Should Know First

Before diving into React, you should be comfortable with HTML, CSS, and modern JavaScript (ES6+). In particular, make sure you understand:

• Variables with let and const
• Arrow functions
• Destructuring objects and arrays
• Template literals
• Array methods like map(), filter(), and reduce()
• ES modules (import and export)

You'll also need Node.js installed so you can run a development environment.

Setting Up Your First React Project

The quickest way to start is with a modern build tool such as Vite. Open your terminal and run:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Your app will be available at a local address shown in the terminal. The main files to know are index.html, src/main.jsx (the entry point), and src/App.jsx (your root component).

Understanding JSX

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. It isn't required, but nearly every React project uses it because it keeps rendering logic and markup together.

const name = "Ava";
const element = <h1>Hello, {name}!</h1>;

JSX Rules to Remember

1. Return a single root element. Wrap siblings in a parent <div> or a fragment (<>...</>).
2. Use className instead of class. class is a reserved word in JavaScript.
3. Close every tag. Self-closing tags need a slash, like <img />.
4. Use curly braces for JavaScript expressions. Anything inside {} is evaluated as JavaScript.
5. Use camelCase for attributes. For example, onClick and tabIndex.

React Components: The Building Blocks

A component is a JavaScript function that returns JSX. Component names must start with a capital letter so React can tell them apart from regular HTML tags.

function Welcome() {
  return <h2>Welcome to my app</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

export default App;

Because components are reusable, you can place <Welcome /> anywhere and as many times as you like. Good React code breaks the interface into small components that each do one job, such as a header, a button, a product card, or a form field.

Props: Passing Data to Components

Props (short for properties) are how a parent component sends data to a child component. They are read-only: a component should never change its own props.

function ProductCard({ name, price }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>${price}</p>
    </div>
  );
}

function Store() {
  return (
    <>
      <ProductCard name="Keyboard" price={49} />
      <ProductCard name="Mouse" price={25} />
    </>
  );
}

Notice how destructuring in the function parameters makes the code cleaner. Props can be strings, numbers, booleans, arrays, objects, and even functions.

The Special children Prop

Whatever you place between a component's opening and closing tags is available as children. This is great for wrapper components like cards, modals, and layouts.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <p>Anything can go inside.</p>
</Card>

State: Making Components Interactive

While props flow in from a parent, state is data that a component owns and can change over time. When state changes, React re-renders the component to show the latest data. You create state with the useState hook.

import { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useState(0) returns two things: the current value (count) and a function to update it (setCount). Never modify state directly. Always use the setter function so React knows to re-render.

Props vs. State: Quick Comparison

Feature	Props	State
Who controls it?	The parent component	The component itself
Can it change?	No (read-only)	Yes, via the setter function
Purpose	Configure a component	Track data that changes over time

Handling Events

React handles user interactions with camelCase event props such as onClick, onChange, and onSubmit. You pass a function, not a string.

function NameInput() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Your name"
    />
  );
}

This pattern, where React state drives the input's value, is called a controlled component and is the standard way to build forms in React.

Conditional Rendering

You can show or hide parts of the interface depending on your data. The most common techniques are the ternary operator and the logical AND operator.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
      {isLoggedIn && <button>Log out</button>}
    </div>
  );
}

Rendering Lists with map() and Keys

To display a collection of items, use the array map() method to turn data into JSX. Each item needs a unique key prop so React can track changes efficiently.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Use a stable, unique value such as a database ID for the key. Avoid using the array index when items can be reordered, added, or removed.

Introduction to React Hooks

Hooks are special functions that let you use React features inside function components. They must be called at the top level of a component (not inside loops, conditions, or nested functions). Besides useState, these are the hooks you'll use most often:

• useEffect: Run side effects such as fetching data, setting up subscriptions, or updating the document title.
• useRef: Store a mutable value that doesn't trigger a re-render, or access a DOM element directly.
• useContext: Read shared data without passing props through every level of the tree.
• useMemo and useCallback: Optimize performance by caching values and functions.

Example: Fetching Data with useEffect

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

The empty dependency array ([]) tells React to run the effect only once, after the first render. If you list values inside the array, the effect re-runs whenever those values change.

How React Renders: The Virtual DOM

When state or props change, React builds a lightweight copy of the interface called the virtual DOM, compares it with the previous version, and applies only the differences to the real DOM. This process, often called reconciliation, is a big reason React apps feel fast. As a beginner, you don't need to manage it manually. Just keep your components predictable and your state updates correct.

Lifting State Up and One-Way Data Flow

React uses one-way data flow: data moves down from parents to children through props. When two sibling components need to share data, move the state to their closest common parent and pass it down. This technique is called lifting state up and keeps your app's data consistent and easy to debug.

Best Practices for Beginners

1. Keep components small and focused. If a component does too much, split it.
2. Name components clearly. Use descriptive PascalCase names.
3. Never mutate state or props. Create new arrays and objects instead.
4. Use keys correctly when rendering lists.
5. Follow the rules of hooks. Call them only at the top level of function components.
6. Organize files by feature. Group related components, styles, and tests together.
7. Learn the React Developer Tools. The browser extension helps you inspect components, props, and state.

Common Mistakes to Avoid

• Forgetting to capitalize component names
• Updating state directly instead of using the setter
• Missing or incorrect dependency arrays in useEffect
• Using array indexes as keys in dynamic lists
• Calling a function in onClick instead of passing it (write onClick={handleClick}, not onClick={handleClick()})

What to Learn After React Fundamentals

Once you're comfortable with the basics, here is a sensible path forward:

1. React Router for multi-page navigation
2. State management with Context API, Redux Toolkit, or Zustand
3. Data fetching libraries such as TanStack Query
4. Forms and validation with React Hook Form
5. TypeScript with React for safer, more maintainable code
6. Next.js for server-side rendering, routing, and production-ready apps
7. Testing with Vitest and React Testing Library

Frequently Asked Questions

Is React a framework or a library?

React is officially a library focused on building user interfaces. Frameworks like Next.js and Remix build on top of React to add routing, server rendering, and more.

How long does it take to learn React fundamentals?

If you already know JavaScript well, most people can grasp the core concepts in two to four weeks of consistent practice. Building small projects is the fastest way to make the ideas stick.

Do I need to learn JavaScript before React?

Yes. React is JavaScript, so a solid understanding of modern JavaScript will make learning React far easier.

Should I use class components or function components?

Use function components with hooks. They are the modern standard, and class components are rarely used in new code.

What should I build to practice?

Start with a counter, a to-do list, a weather app using a public API, and a simple blog or product catalog. Each one reinforces components, props, state, and effects.