Hackforge Academy

Explanation

Amazon DynamoDB is a managed NoSQL database. React applications normally access DynamoDB through a backend API rather than connecting directly with database credentials.

Code:

React UI -> API Gateway -> Lambda or Backend -> DynamoDB

Explanation

A data service centralizes calls to the backend that reads and writes DynamoDB records. This keeps database-related logic outside presentation components.

Code:

export async function getProducts() {
  const response = await fetch(
    `${import.meta.env.VITE_API_BASE_URL}/products`
  );

  if (!response.ok) {
    throw new Error('Unable to load products');
  }

  return response();
}

Explanation

After the backend returns records from DynamoDB, React can store them in state and render them using map. Use a stable unique key for each item.

Code:

function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name}
        </li>
      ))}
    </ul>
  );
}

Explanation

A React form can send a new record to the backend. The backend validates the input and writes the item to DynamoDB using its own AWS permissions.

Code:

await fetch(`${apiUrl}/products`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: crypto.randomUUID(),
    name: 'React Course'
  })
});

Explanation

When loading database records, React should display a loading indicator and a helpful error message. This prevents a blank screen when the backend is slow or unavailable.

Code:

if (loading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;
return <ProductList products={products} />;