Acabo de empezar a aprender React, pero por mi vida no puedo averiguar cómo vincular un nuevo archivo al archivo App.jsx. He visto preguntas relacionadas, pero las configuraciones son bastante diferentes a las mías. Utilicé la plantilla predeterminada de Vite provista (en su mayor parte). He proporcionado fragmentos simples de código a continuación.
Código App.jsx a continuación:
import React from 'react' import { useState } from 'react' import './App.css' import Pets from './components/Pets' function App() { return ( <div className="App"> <Animals/> </div> ) } export default AppLa página que me gustaría vincular:
import React from 'react' function Animals() { return( <div> <h3>Pets for Africa</h3> <ul> <li>dogs</li> <li>cats</li> </ul> </div> ) } export default AnimalsEl archivo main.jsx predeterminado que forma parte de la plantilla de Vite
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> )Cambie el nombre de importación predeterminado a Animals
import React from 'react' import { useState } from 'react' import './App.css' import Animals from './components/Pets' function App() { return ( <div className="App"> <Animals/> </div> ) } export default AppEsto debería funcionar en tu caso.
¿No está tratando de importar el archivo Pets que tiene el nombre Animals ? En caso afirmativo, simplemente cambie el nombre de las import Pets from './components/Pets' para import Animals from './components/Animals'