Alguem poderia explicar mais detalhadamente a criação de um arquivo index.js somente para importar e exportar o arquivo jsx? Achei muita manutenção criar um arquivo somente para isso, acho que não entendi a aplicação dessa prática...
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Alguem poderia explicar mais detalhadamente a criação de um arquivo index.js somente para importar e exportar o arquivo jsx? Achei muita manutenção criar um arquivo somente para isso, acho que não entendi a aplicação dessa prática...
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.