import './App.css'; import Search from './components/HomePage/SearchBar'; import navBar from './components/common/Header.js'; import footer from './components/common/Footer.js'; function App() { return ( <div> <navBar /> <h1>headd</h1> <footer /> </div> ) } export default App;Esta es mi App.js, el elemento está visible en la página, pero no en la barra de navegación ni en el pie de página.
Aquí está el archivo Header.js que exporta navBar
export function navBar(){ return( <div> <div> <ul className="navbar"> <li><h3>FindTheFlat</h3></li> <li><a href="default.asp">LOGIN/SIGN-UP</a></li> </ul> </div> </div> ) }La barra de navegación se exporta, pero no se usa incluso después de llamar a Necesito ayuda al respecto.
Creo que la razón es que llamaste a tu componente con un nombre en minúsculas.
navBar y debería ser Navbar. la razón de esto es que React se confundirá entre el componente personalizado JSX y los elementos HTML
para su referencia
Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente integrado como o y da como resultado una cadena 'div' o 'span' que se pasa a React.createElement. Tipos que comienzan con una letra mayúscula como compile to React.createElement(Foo) y corresponden a un componente definido o importado en su archivo JavaScript.
Recomendamos nombrar los componentes con una letra mayúscula. Si tiene un componente que comienza con una letra minúscula, asígnelo a una variable en mayúscula antes de usarlo en JSX.
Nota: Siempre comience los nombres de los componentes con una letra mayúscula.
React trata los componentes que comienzan con letras minúsculas como etiquetas DOM. Por ejemplo, representa una etiqueta div HTML, pero representa un componente y requiere que Bienvenido esté dentro del alcance.
Vea más aquí: https://reactjs.org/docs/components-and-props.html
Por lo tanto, React no usa su componente definido por el usuario ( <navBar /> , <footer /> ). En su lugar, utiliza etiquetas DOM