React Tutorial for Beginners — Learn React in 30 Minutes

DodaTech 3 min read

In this tutorial, you'll learn about React Tutorial for Beginners. We cover key concepts, practical examples, and best practices.

What You'll Learn

Build your first React app — components, JSX syntax, props for passing data, state for interactivity, event handling, and the mental model of React.

Why It Matters

React is the most popular frontend library. It's used by companies from startups to Facebook. Learning React opens doors to frontend and full-stack roles.

Real-World Use

Building a dynamic product page, a real-time dashboard, or a social media feed — any UI that needs to update efficiently when data changes.

What is React?

React is a JavaScript library for building user interfaces. It lets you create components — reusable pieces of UI that manage their own state.

Traditional approach:
1. User clicks button
2. JavaScript finds the DOM element
3. Manually updates text
4. Repeat for every change

React approach:
1. User clicks button
2. React updates state
3. React automatically re-renders the component
4. Virtual DOM efficiently updates the real DOM

Setting Up

# Create a new React app
npx create-react-app my-first-app
cd my-first-app
npm start

# Open http://localhost:3000

Your First Component

// src/App.js
function Welcome() {
  return (
    <div className="welcome">
      <h1>Hello, React!</h1>
      <p>This is my first component.</p>
    </div>
  );
}

export default Welcome;

JSX — JavaScript + HTML

JSX looks like HTML but is actually JavaScript:

// JSX lets you write HTML in JavaScript
const element = <h1>Hello World</h1>;

// You can embed JavaScript expressions with {}
const name = "Alice";
const greeting = <h1>Hello, {name}!</h1>;  // "Hello, Alice!"

// You can call functions
function formatName(user) {
  return `${user.first} ${user.last}`;
}

const user = { first: "Alice", last: "Smith" };
const element = <h1>Welcome, {formatName(user)}!</h1>;

Props — Passing Data

// Parent passes data to child via props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

State — Adding Interactivity

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>
  );
}

Events

function EventDemo() {
  function handleClick() {
    alert("Button clicked!");
  }

  function handleChange(event) {
    console.log("Input value:", event.target.value);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <input type="text" onChange={handleChange} />
    </div>
  );
}

Conditional Rendering

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in</h1>;
}

// Or using ternary:
function Greeting({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn ? "Welcome back!" : "Please sign in"}
    </h1>
  );
}

Lists and Keys

function TodoList() {
  const items = ["Learn React", "Build an app", "Deploy"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

Complete App

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  function addTodo() {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput("");
    }
  }

  return (
    <div style={{ padding: "20px" }}>
      <h1>Todo App</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && addTodo()}
        placeholder="Add a todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, i) => (
          <li key={i}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

Key Concepts Summary

Concept	What It Does
Components	Reusable UI pieces (functions)
JSX	HTML-like syntax in JavaScript
Props	Read-only data from parent
State	Mutable data that triggers re-render
Events	User interactions (click, change)
Conditional rendering	Show/hide based on state
Lists	Render arrays of elements

Next → React Hooks — Complete Guide (useState, useEffect, useContext, useReducer)

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse React