how to fix the tricky component or function 'is not defined react/jsx-no-undef' error in React Development

here is the code for customsection.js

import React, { Component } from "react"

class CustomSection extends Component{

    render(){ 

        return (

        <h1>Hello Custom Section</h1>

        );

    }

}

export default CustomSection;

then i have the code from the App.js will have the CustomerSection component

import React, { Component } from 'react';

import  './CustomSection'

class App extends Component {

  render(){

  return (

    <div> 

      <h1>Hello World</h1>

      <CustomSection />

    </div>

  );

  }

}

export default App;

it looks simple and straight, however when i compile the code in the visual studio terminal

npm run-script build

PS C:\DanAngular\dan-react\my-first-react> npm run-script build

> my-first-react@0.1.0 build C:\DanAngular\dan-react\my-first-react
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/App.js
  Line 28:8:  'CustomSection' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

the error stems from this line

import  './CustomSection'

we must specific the component name in the import. that is very practice, i really like this checking on the compile time. it will enforce the proper component being reference and will be called.

import CustomSection from './CustomSection'

after i fixed this line, then the project compiled and ran,

my first try on the react is good and running


Happy programming, Cheers