Почему ошибка при изменении какого либо файла в проекте react?

Question

[ArturPetrov]

в файле app.js у меня был определенный код:

import React, {Component} from "react";

function App() {
  return (
    <div className="App">
      test
    </div>
  );
}

export default App;

результат на екране:



но когда я решил изменить в коде на это:

import React, {Component} from "react";
import Homepage from "./components/pages/homePage";

class App extends Component {
    render() {
  return (
    <div className="App">
      <Homepage />
    </div>
  );
        }
}

export default App;

вот такая ошибка:


чтобы я не менял, как я не писал ошибка всегда одинакова только на разные строки указывает ошибку, то есть дело вовсе не в каких-то синтаксических ошибках в конкретной строке, я даже как в файле index.js пробовал что-то изменить то такая же ошибка была.Может каждый раз когда что-то изменяюю в проекте нужно в командной строке что-то прописать? Что то на подобе : npm save...?
Еще думаю может ошибка из-за того что некоторие файлы (js) я скопировал из другого проекта в папку c моим проектом, но это вряд ли, ведь какая разница скопировать файлы из другой папки или создать в текстовом редакторе, название и содержимое ведь будет одинаково...

Еще такой момент:

Когда в классе App пишу:

<div className="App">
   какой-то текст
    </div>

работает

но когда <div className="App">добавляю теги

<div className="App">
  <h1> </h1>
    </div>

не работает

Comments

[Роман Александрович]

папробуйте файл переименовать homePage на HomePage

[ArturPetrov]

Роман Александрович, Все равно не работает. Когда в классе App пишу:

<div className="App">
   какой-то текст
    </div>

работает

но когда в div добавляю теги

<div className="App">
  <h1> </h1>
    </div>

не работает

[Роман Александрович]

ArturPetrov, покажите код весь когда не работает

[ArturPetrov]

Роман Александрович,
файл App.js:

import React, { Component } from 'react';
import Homepage from "./components/pages/HomePage";


class App extends Component {
  render() {
    return (
        <div>
      <div className="App">
              <Homepage />
      </div>
        </div>
    );
  }
}

export default App;

файл HomePage.js:

import React, {Component} from 'react';

class Homepage extends Component {
    render(){
        return {
          <div className="wrap">
            
           <h1>
            Home Page Content
           </h1>
            
            <p>
           
            </p>
            
            
          </div>     
        };
    }
}

export default Homepage;

ну и index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

там еще есть несколько файлов но думаю и этих будет достаточно?

Answer 1

[yanis_kondakov]

У вас в HomePage после return идет такая скобка { , а должна такая (

Ну и закрываться должна соответствующая скобка

Answer 2

[Роман Александрович]

файл HomePage.js:

import React, {Component} from 'react';

class Homepage extends Component {
    render(){
        return (
          <div className="wrap">
            
           <h1>
            Home Page Content
           </h1>
            
            <p>
           
            </p>
            
            
          </div>     
        )
    }
}

export default Homepage;

Answer 3

[Артем Кондрацкий]

Для класса скобки не нужны

.... 
class App extends Component {
....