Complete React.js Tutorial for Beginners

Introduction to React

React is a powerful JavaScript library for building user interfaces, developed by Facebook. It's become one of the most popular choices for front-end development because of its component-based architecture, virtual DOM, and excellent developer experience.

In this tutorial, we'll start from the absolute basics and work our way up to building a complete todo application. By the end, you'll have a solid understanding of React fundamentals.

Why Learn React?

• Component-Based: Build encapsulated components that manage their own state
• Virtual DOM: Efficient updates and rendering for better performance
• Large Ecosystem: Huge community, extensive libraries, and excellent tooling
• Job Market: High demand for React developers across industries

Setting Up Your Development Environment

Before we start coding, let's set up everything you need to build React applications.

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript
• Node.js installed on your computer (version 14 or higher)
• A code editor (VS Code recommended)
• Basic familiarity with the command line

Creating Your First React App

The easiest way to start a new React project is using Create React App:

This creates a new React application and starts the development server. Open your browser to http://localhost:3000 to see your app!

Understanding React Components

Components are the building blocks of React applications. Think of them as custom HTML elements that you can reuse throughout your app.

Your First Component

// Welcome.js
import React from 'react';

function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to React!</p>
    </div>
  );
}

export default Welcome;

This component accepts a name prop and displays a personalized welcome message. You can use it like this:

<Welcome name="Developer" />

JSX: JavaScript XML

JSX is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML-like code in your JavaScript files.

// JSX Example
const element = <h1>Hello, World!</h1>;

// With JavaScript expressions
const name = 'React';
const element = <h1>Hello, {name}!</h1>;

// With attributes
const element = <img src="logo.png" alt="Logo" />;

JSX Rules

• JSX must return a single parent element
• Use className instead of class
• All tags must be closed (including self-closing tags like <img />)
• Use camelCase for HTML attributes

State and Hooks

State allows components to store and manage data that can change over time. React Hooks let you use state in functional components.

useState Hook

import React, { 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>
  );
}

The useState hook returns an array with two elements: the current state value and a function to update it.

Building a Todo Application

Let's put everything together by building a simple todo application. This will demonstrate components, state management, and event handling.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, {
        id: Date.now(),
        text: inputValue,
        completed: false
      }]);
      setInputValue('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <h1>My Todo List</h1>
      
      <div className="add-todo">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Add a new todo..."
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
        />
        <button onClick={addTodo}>Add</button>
      </div>

      <ul className="todo-list">
        {todos.map(todo => (
          <li key={todo.id} className={todo.completed ? 'completed' : ''}>
            <span onClick={() => toggleTodo(todo.id)}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

What's Happening Here?

• State Management: We use useState to manage todos and input value
• Event Handling: Functions handle adding, toggling, and deleting todos
• Conditional Rendering: We map over todos to render each item
• Props and Keys: Each todo item has a unique key for React's reconciliation

Next Steps

Congratulations! You've learned the fundamentals of React. Here are some topics to explore next:

• useEffect hook for side effects
• Component lifecycle and cleanup
• Props drilling and context API
• React Router for navigation
• State management with Redux or Zustand
• Testing React components