50 lines
1.0 KiB
Markdown
50 lines
1.0 KiB
Markdown
# Step 4: Connect to an API
|
||
|
||
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.
|
||
|
||
**Let's change our application to fetch the data from the API.**
|
||
|
||
```typescript jsx
|
||
export const App = () => {
|
||
const [todos, setTodos] = useState<Todo[]>([]);
|
||
|
||
useEffect(() => {
|
||
fetch('/api/todos')
|
||
.then(_ => _.json())
|
||
.then(setTodos);
|
||
}, []);
|
||
|
||
function addTodo() {
|
||
fetch('/api/addTodo', {
|
||
method: 'POST',
|
||
body: ''
|
||
})
|
||
.then(_ => _.json())
|
||
.then(newTodo => {
|
||
setTodos([...todos, newTodo]);
|
||
});
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<h1>Todos</h1>
|
||
<ul>
|
||
{todos.map(t => (
|
||
<li className={'todo'}>{t.title}</li>
|
||
))}
|
||
</ul>
|
||
<button id={'add-todo'} onClick={addTodo}>
|
||
Add Todo
|
||
</button>
|
||
</>
|
||
);
|
||
};
|
||
```
|
||
|
||
!!!!!
|
||
Run "nx serve todos" and open http://localhost:4200. What do you see?
|
||
!!!!!
|
||
"the server responded with a status of 404 (Not Found)" in Console.
|
||
Blank screen.
|
||
Exception rendered on the screen.
|