KidkArolis · Serafeim-Katsaros · Dec 23, 2025
diff --git a/examples/with-api-fetch/App.js b/examples/with-api-fetch/App.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Users from './Users'
+
+export default function App() {
+  return (
+    <div className="app">
+      <h1>Users from API</h1>
+      <Users />
+    </div>
+  )
+}
diff --git a/examples/with-api-fetch/App.scss b/examples/with-api-fetch/App.scss
@@ -0,0 +1,11 @@
+.app {
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+.card {
+  border: 1px solid #ddd;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 6px;
+}
diff --git a/examples/with-api-fetch/UserCard.js b/examples/with-api-fetch/UserCard.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function UserCard({ user }) {
+  return (
+    <div className="card">
+      <h3>{user.name}</h3>
+      <p>{user.email}</p>
+      <small>{user.company.name}</small>
+    </div>
+  )
+}
diff --git a/examples/with-api-fetch/Users.js b/examples/with-api-fetch/Users.js
@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+import UserCard from './UserCard'
+
+export default function Users() {
+  const [users, setUsers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then(res => res.json())
+      .then(data => {
+        setUsers(data)
+        setLoading(false)
+      })
+      .catch(err => {
+        setError(err.message)
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) return <p>Loading...</p>
+  if (error) return <p>Error: {error}</p>
+
+  return (
+    <div>
+      {users.map(user => (
+        <UserCard key={user.id} user={user} />
+      ))}
+    </div>
+  )
+}
diff --git a/examples/with-api-fetch/index.html b/examples/with-api-fetch/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Jetpack – API Fetch</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/with-api-fetch/index.js b/examples/with-api-fetch/index.js
@@ -0,0 +1,7 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './App.scss'
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />)
diff --git a/examples/with-api-fetch/package.json b/examples/with-api-fetch/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-api-fetch",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "../../bin/jetpack"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hot-loader": "^4.13.1"
+  }
+}
diff --git a/examples/with-api-fetch/pnpm-lock.yaml b/examples/with-api-fetch/pnpm-lock.yaml
diff --git a/examples/with-todos/App.js b/examples/with-todos/App.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import TodoList from './TodoList';
+
+function App() {
+  const [todos, setTodos] = useState([]);
+  const [input, setInput] = useState('');
+
+  const addTodo = () => {
+    if (input.trim() !== '') {
+      setTodos([...todos, { id: Date.now(), text: input }]);
+      setInput('');
+    }
+  };
+
+  return (
+    <div className="app">
+      <h1>Todo List</h1>
+      <div className="todo-input">
+        <input
+          type="text"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Add a new todo..."
+        />
+        <button onClick={addTodo}>Add</button>
+      </div>
+      <TodoList todos={todos} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/with-todos/App.scss b/examples/with-todos/App.scss
@@ -0,0 +1,36 @@
+.app {
+  font-family: Arial, sans-serif;
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.todo-input {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+input {
+  flex: 1;
+  padding: 5px 10px;
+}
+
+button {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  padding: 5px 0;
+  border-bottom: 1px solid #eee;
+}
diff --git a/examples/with-todos/TodoItem.js b/examples/with-todos/TodoItem.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function TodoItem({ todo }) {
+  return <li>{todo.text}</li>;
+}
+
+export default TodoItem;
diff --git a/examples/with-todos/TodoList.js b/examples/with-todos/TodoList.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import TodoItem from './TodoItem';
+
+function TodoList({ todos }) {
+  if (todos.length === 0) return <p>No todos yet!</p>;
+  return (
+    <ul>
+      {todos.map(todo => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </ul>
+  );
+}
+
+export default TodoList;
diff --git a/examples/with-todos/index.js b/examples/with-todos/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './App.scss';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);