completely new to React and failing to understand this error: Compiled with problems:X

ERROR

[eslint] src/App.js Line 66:16: 'App' is not defined no-undef

Search for the keywords to learn more about each error.

I have found multiple "solutions" for this but none of which I can completely comprehend in my case for some reason, probably just a mental blocker. I essentially used the template create-react-app and added in my own files which had what I wanted to create a basic color changer app. After adding files I get the above error. I've added a screenshot of my file layout: File layout

Here is my app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button.js';

class Random extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: [100, 200, 300] };
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    this.applyColor();
  }

  componentDidUpdate(prevProps, prevState) {
    this.applyColor();
  }

  formatColor(ary) {
    return 'rgb('   ary.join(', ')   ')';
  }

  isLight() {
    const rgb = this.state.color;
    return rgb.reduce((a,b) => a b) < 127 * 3;
  }

  applyColor() {
    const color = this.formatColor(this.state.color);
    document.body.style.background = color;
  }

  chooseColor() {
    const random = [];
    for (let i = 0; i < 3; i  ) {
      random.push(Math.floor(Math.random()*256));
    }
    return random;
  }

  handleClick() {
    this.setState({
      color: this.chooseColor()
      });
  }

  render() {
    return (
      <div>
        <h1 className={this.isLight() ? 'white' : 'black'}>
          Your color is { this.formatColor( this.state.color)}!
        </h1>
        <Button 
        onClick={ this.handleClick }
        light={ this.isLight() } />
      </div>
    );
  }
}

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

export default App;

I'd really appreciate any help on what I'm doing wrong! Thanks in advance.

CodePudding user response：

There is no clear definition of App in your app.js. You would have to create a class for App, then export it. I think you meant export default Random, or some other thing actually defined.

CodePudding user response：

If you ran npx create-next-app your-app there should be an App.js file in the src directory. That file is where you should add your random component or rename App.js to Random.js and import it to index.js.

No need to add to the bellow code to your app.js file if it is imported to index.js

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