Tengo dos componentes 'pie de página' y 'encabezado' en el directorio de componentes. Se importa correctamente, pero no puedo mostrarlo.
Aplicación.js
import header from "./components/header"; import footer from "./components/footer"; function App() { return ( <> <header /> <main> <h1>Welcome to Proshop</h1> </main> <footer /> </> ) } export default App;
encabezado.js
import React from 'react' function header() { return ( <div>header</div> ) } export default header
pie de página.js
import React from 'react' function footer() { return ( <div>footer</div> ) } export default footer
La salida es solo esta
Sus componentes deben comenzar con una letra mayúscula, de lo contrario, se tratarán como etiquetas html regulares, consulte los documentos en este
Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente integrado como
<div>
o<span>
y da como resultado una cadena 'div' o 'span' pasada a React.createElement. Los tipos que comienzan con una letra mayúscula como<Foo />
se compilan en React.createElement(Foo) y corresponden a un componente definido o importado en su archivo JavaScript.
Punto de bonificación:
cualquiera que sea el nombre del archivo de componentes que comience con la letra minúscula o mayúscula, siempre debe importarlo con mayúscula.
digamos que tenemos un nombre de archivo header.js y una función con el nombre header.
ayudaría si lo importaras así
import Header from './header'
Debe poner en mayúscula el nombre de su componente. Por ejemplo: <Header />
.
Debe poner en mayúscula el nombre de su componente. por ejemplo, el encabezado será: <Header />
y el pie de página será <Footer />