Soy un principiante en React.js; Estaba creando una aplicación de reproductor de música simple, pero en el archivo App.js me dio un error. A continuación, comparto el código del archivo App.js y el error generado por el navegador.
import React, { Component } from 'react' import './App.css'; import PlayList from "./componentes/PlayList" import SearchBar from "./componentes/SearchBar" import SearchResults from "./componentes/SearchResults" class App extends React.Component{ //code to be written } function App() { return ( <div> <h1> <a href="http://localhost:3000">Melophile</a> </h1> <div className="App"> <SearchBar onSearch={this.search}/> <div className="App-playlist"> <SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/> <PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} /> </div> </div> </div> ); } export default App;Error del navegador:
Compiled with problems: ERROR in ./src/App.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9) 11 | } 12 | > 13 | function App() { | ^ 14 | return ( 15 | <div> 16 | <h1>Buscando ayuda de expertos para solucionar este problema.
Tiene una clase llamada App y una función llamada App . No puedes tener dos cosas con el mismo nombre.
Lo que parece que ha hecho es una sintaxis React basada en clases mixtas con una sintaxis funcional más moderna. Dado que aún no tiene nada escrito dentro de la clase, parece seguro asumir que en realidad no está usando una sintaxis basada en clases, por lo que simplemente puede eliminar la clase (elimine lo siguiente)
class App extends React.Component{ //code to be written }El error que estás viendo es porque tienes estas dos cosas:
class App extends React.Component{Y
function App() {Por lo tanto, hay un problema para identificar a qué te refieres. Debe cambiar el nombre de uno de estos lugares o decidir con qué desea trabajar (clase o funciones).
En su código, declaró la clase de la aplicación y luego declaró la función de la aplicación. Entonces está dando que la aplicación ya está declarada.
class App extends React.Component{ //code to be written } function App() {Entonces puedes hacer,