Chapter 9: React API & Forms

Learn how to connect your React app to the outside world — fetching data, sending forms, and building real interactive apps.

What is an API?

HTTP Methods

Axios Setup

CRUD Operations

Forms in React

Quiz

What is an API?

Imagine you're at a restaurant. You (the customer) want food from the kitchen, but you can't just walk in and cook it yourself. Instead, a waiter takes your order, brings it to the kitchen, and delivers the food back to you. An API is that waiter — it's the middleman between your React app (the customer) and the server/database (the kitchen).

API stands for Application Programming Interface. Here's what that means in practice:

Your React app = the customer (frontend)
The API = the waiter (the URL you call)
The server/database = the kitchen (backend)
The data = the food (JSON responses)

What Does an API Look Like?

An API is just a URL (called an endpoint) that returns data instead of a web page:

API Endpoints — Examples

// API endpoints are just URLs that return data (usually JSON)

// Get all users
GET https://api.example.com/users

// Get a specific user
GET https://api.example.com/users/42

// The server responds with JSON like this:
{
  "id": 42,
  "name": "Rahul Sharma",
  "email": "rahul@example.com"
}

JSON (JavaScript Object Notation) is the "language" APIs speak. It looks exactly like JavaScript objects — curly braces, key-value pairs, arrays. That's why JavaScript/React is so great for working with APIs!

HTTP Methods

Back to our restaurant analogy: there are different types of requests you can make. You can order food (GET), place a new order (POST), change your order (PUT), or cancel your order (DELETE). HTTP methods work the same way!

Method	What It Does	Restaurant Analogy	Example
`GET`	Read/fetch data	Looking at the menu	Get list of users
`POST`	Create new data	Placing a new order	Create a new user
`PUT`	Update existing data	Changing your order	Update user's email
`DELETE`	Remove data	Canceling your order	Delete a user

HTTP Status Codes

When the API responds, it includes a status code — a number that tells you what happened:

Code	Meaning	When You See It
`200`	OK - Success!	Everything worked fine
`201`	Created	New item was successfully created
`400`	Bad Request	You sent invalid data
`404`	Not Found	The endpoint/resource doesn't exist
`500`	Server Error	Something broke on the server

Axios Setup

Axios is a popular library for making API calls in React. It's simpler and more powerful than the built-in fetch API.

Step 1: Install Axios

Terminal — Install Axios

npm install axios

Step 2: Create an Axios Instance

Instead of typing the full URL every time, create a reusable instance with a base URL:

src/api/axios.js — Axios Instance

import axios from 'axios';

// Create a reusable axios instance
const api = axios.create({
  baseURL: 'http://localhost:5000/api',  // Your backend URL
  timeout: 10000,                         // 10 second timeout
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

// Now instead of:
//   axios.get('http://localhost:5000/api/users')
// You can just do:
//   api.get('/users')

Why create an instance? If your backend URL changes, you only need to update it in ONE place. Without an instance, you'd have to update every single API call in your app!

CRUD Operations

CRUD stands for Create, Read, Update, Delete — the four basic operations for any data-driven app.

GET — Fetching Data

React — GET Request (Fetch Users)

import { useState, useEffect } from 'react';
import api from './api/axios';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await api.get('/users');
        setUsers(response.data);    // Axios puts data in response.data
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);          // Runs whether success or error
      }
    };

    fetchUsers();
  }, []);  // Empty array = run once when component mounts

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

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

Always handle 3 states: loading, error, and success. Without these, your app will either show a blank screen while data loads, or crash silently when something goes wrong.

POST — Creating Data

React — POST Request (Create User)

const createUser = async (userData) => {
  try {
    // POST sends data TO the server
    const response = await api.post('/users', {
      name: userData.name,
      email: userData.email,
    });

    console.log('Created:', response.data);
    // response.data = the newly created user (with id from server)
    return response.data;
  } catch (err) {
    console.error('Failed to create user:', err.message);
  }
};

PUT — Updating Data

React — PUT Request (Update User)

const updateUser = async (userId, updatedData) => {
  try {
    // PUT updates an EXISTING resource — notice the ID in the URL
    const response = await api.put(`/users/${userId}`, updatedData);
    console.log('Updated:', response.data);
    return response.data;
  } catch (err) {
    console.error('Failed to update user:', err.message);
  }
};

DELETE — Removing Data

React — DELETE Request (Delete User)

const deleteUser = async (userId) => {
  try {
    // DELETE removes a resource — only needs the ID
    await api.delete(`/users/${userId}`);
    console.log('User deleted!');
    // After deleting, update state to remove from UI
  } catch (err) {
    console.error('Failed to delete user:', err.message);
  }
};

Forms in React

In plain HTML, forms just submit to a URL. In React, forms are controlled — React keeps track of every keystroke, every selection, every change. Think of it like a smart assistant who writes down every letter you type, so you always know exactly what the form says at any moment.

Controlled Form Pattern

React — Controlled Form with API Call

import { useState } from 'react';
import api from './api/axios';

function CreateUserForm() {
  // Each form field has its own state
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  // This ONE handler works for ALL fields
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,           // Keep all other fields
      [name]: value,     // Update only the changed field
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();     // Stop page from refreshing!
    setLoading(true);

    try {
      const response = await api.post('/users', formData);
      setMessage('User created successfully!');
      setFormData({ name: '', email: '', password: '' }); // Reset form
    } catch (err) {
      setMessage('Error: ' + err.response?.data?.message || err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Full name"
        required
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
        required
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Creating...' : 'Create User'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

The [name] trick: Notice how handleChange uses [name]: value. The name attribute on each input matches the key in formData. This lets ONE handler work for ALL fields instead of writing a separate handler for each!

Always call e.preventDefault() in your submit handler! Without it, the browser will refresh the page and you'll lose all your React state.

📝 Chapter 9 Quiz

1. What is an API?

A database that stores data

A middleman that lets your app communicate with a server

A React component for forms

A CSS framework for styling

2. Which HTTP method is used to CREATE new data?

GET

PUT

POST

DELETE

3. In Axios, where is the actual data from the server?

response.data

response.body

response.json

response.content

4. Why do we call e.preventDefault() in form submit handlers?

To make the form faster

To validate the form inputs

To send data to the server

To stop the browser from refreshing the page

5. What does HTTP status code 404 mean?

Success

Not Found

Server Error

Bad Request

← Chapter 8: React Router Chapter 10: React Full Project →