title: Parsing Error : Identifier 'App' has already been declared
body: <p>I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error.  Below I am sharing the code of App.js file and the browser generated error.</p>
  <pre><code>import React, { Component } from 'react'
  import './App.css';
  
  import PlayList from &quot;./componentes/PlayList&quot;
  import SearchBar from &quot;./componentes/SearchBar&quot;
  import SearchResults from &quot;./componentes/SearchResults&quot;
  
  
  class App extends React.Component{
  //code to be written
  }
  
  function App() {
    return (
      &lt;div&gt;
        &lt;h1&gt;
          &lt;a href=&quot;http://localhost:3000&quot;&gt;Melophile&lt;/a&gt;
        &lt;/h1&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;SearchBar onSearch={this.search}/&gt;
          &lt;div className=&quot;App-playlist&quot;&gt;
            &lt;SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/&gt;
            &lt;PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} /&gt;
            
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Browser error:</p>
  <pre><code>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 |
  &gt; 13 | function App() {
       |          ^
    14 |   return (
    15 |     &lt;div&gt;
    16 |       &lt;h1&gt;
  </code></pre>
  <p>Looking for experts help to solve this problem.</p>