alguns ajustes na organização das pastas e api funcionando e pegando …

…os melhores filmes

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "dotenv": "^16.1.3",
     "inspector": "^0.5.0",
     "react": "^18.2.0",

src/App.js

@@ -3,12 +3,12 @@ import { Route, Routes } from 'react-router-dom';
 
 import './App.css';
 
-import Login from "./components/Login/login";
-import Cadastro from "./components/cadastro/cadastro"
-import Home from "./components/home/home";
-import Pesquisa from './components/Pesquisa/pesquisa';
-import Filme from './components/filme/filme';
-import NavBar from './components/home/NavBar';
+import Login from './Login/login'
+import NavBar from './components/NavBar/NavBar';
+import Cadastro from './cadastro/cadastro';
+import Home from './home/home';
+import Pesquisa from './Pesquisa/pesquisa';
+import Filme from './filme/filme';
 
 function App() {
   return (

src/components/FilmeCard/FilmeCard.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function FilmesCard(){
+
+}

src/home/home.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import "./home.css";
+import NavBar from "../components/NavBar/NavBar";
+import axios from "axios";
+
+export default function Home(){
+
+    const [melhoresFilmes, setMelhoresFilmes] = useState([]);
+
+
+    useEffect(() => {
+
+    const fetchFilmes = async () => {
+        try{
+            const response = await axios.get('https://api.themoviedb.org/3/movie/top_rated?',
+            {
+                params: {
+                    api_key: "05f8482d5927ec34379002150b1c52c7",
+                },
+            });
+            setMelhoresFilmes(response.data.results);
+        }
+        catch (error){
+            console.error(error)
+        }
+    };
+    fetchFilmes();
+
+    },[]);
+
+    return(
+
+        <div className="backhome">
+            <NavBar />
+            <div className="filmes_container">
+                <h2>Melhores Filmes:</h2>
+                <ul>
+                     {melhoresFilmes.length > 0 && melhoresFilmes.map((filme) => (
+                    <li key={filme.id}>{filme.title}</li>
+                ))}
+
+                </ul>
+            </div>
+        </div>
+    );
+};

src/index.js

@@ -2,10 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import NavBar from './components/home/NavBar';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
-import Home from './components/home/home';
+import Home from './home/home';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(