62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# Step 4: Connect to an API
|
||
|
||
## Video of this Lesson
|
||
|
||
<iframe width="560" height="600" src="https://www.youtube.com/embed/HexxYHpIfAo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||
|
||
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
|
||
import React, { useEffect, useState } from 'react';
|
||
|
||
interface Todo {
|
||
title: string;
|
||
}
|
||
|
||
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>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
```
|
||
|
||
!!!!!
|
||
Run `npx 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.
|