Index.js com import e export

eu criei os arquivos para evitar a "duplicação" como o instrutor mencionou, mas acabou me retornando um erro...

Failed to compile

./src/components/FormularioCadastro.jsx
Error: ENOENT: no such file or directory, open 'C:\Users\Igor\Desktop\reactJS\ceep\src\components\FormularioCadastro.jsx'

This error occurred during the build time and cannot be dismissed.

Esse erro, com essa sintaxe:

import React, { Component } from "react"
import ListaDeNotas from "./components/ListaDeNotas"
import FormularioCadastro from "./components/FormularioCadastro"
import "./assets/App.css"
import "./assets/index.css"
class App extends Component {
  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro />
        <ListaDeNotas />
      </section>
    )
  }
}

export default App

Mas se eu coloco /index no final... ele aceita normalmente.

import React, { Component } from "react"
import ListaDeNotas from "./components/ListaDeNotas/index"
import FormularioCadastro from "./components/FormularioCadastro/index"
import "./assets/App.css"
import "./assets/index.css"
class App extends Component {
  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro />
        <ListaDeNotas />
      </section>
    )
  }
}

export default App

Meio que não funcionou por aqui...achei desnecessário evitar essa "duplicação", já que em cada pasta dos componentes vai ter um index.js para exportar o próprio arquivo.

A ideia é você criar um arquivo index um nível acima das pastas de cada componente ou seja você cria um index dentro da pasta components, e importa todos os componentes que você vai utilizar

"components/index.js"

import ListaDeNotas from "./ListaDeNotas"
import FormularioCadastro from "./FormularioCadastro"

export {ListaDeNotas,  FormularioCadastro }

Dessa forma quando for importar: evita duplicação de imports de componentes da pasta components basta utilizar

import React, { Component } from "react"
import { ListaDeNotas, FormularioCadastro } from './components'
import "./assets/App.css"
import "./assets/index.css"
class App extends Component {
  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro />
        <ListaDeNotas />
      </section>
    )
  }
}

export default App

que vai identificar o index de components e o index de cada componente exportado é melhor para dar manutenção mantém o clean code.