Sistemas Web
Django REST e React

Carregando imagens e outros arquivos estáticos#

Além de JavaScript e CSS, a nossa interface também precisa de algumas imagens. Elas podem ser adicionadas à pasta public. Faça o download da imagem do logo do Get-it e salve-o na pasta public. Agora a imagem estará disponível na rota /logo-geti.png.

Vamos criar um novo componente para o AppBar. Crie o arquivo src/components/AppBar/index.jsx adicione o seguinte conteúdo:

import "./index.css";

export default function AppBar() {
    return (
        <div>
            <img src="/logo-getit.png" className="logo" />
            <span>Como o Post-it, mas com outro verbo</span>
        </div>
    );
}

Caso queira implementar estilos, crie o arquivo src/components/AppBar/index.css e adicione as classes CSS que desejar.

Em seguida, modifique o arquivo src/App.jsx e adicione o componente AppBar no App:

import axios from "axios";
import { useEffect, useState } from "react";
import Note from "./components/Note";
import AppBar from "./components/AppBar";
import "./App.css";

function App() {
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8000/api/notes/")
      .then((res) => setNotes(res.data));
  }, []);

  return (
    <>
      <AppBar />
      {notes.map((note) => (
        <Note key={`note__${note.id}`} title={note.title}>
          {note.content}
        </Note>
      ))}
    </>
  );
}

export default App;