Tengo dos archivos: el archivo principal: App.js y un elemento JSX que quiero cargar en App.js. element.js tiene el siguiente código:
const element = () => { return ( <div className="text-gray-100 bg-gray-800 h-64 px-4"> <h1>Test Title</h1> <p>Lorem ipsum</p> </div> ); }; export default element;El archivo App.js es el siguiente:
import './App.css'; import element from './element'; function App() { return ( <div className="flex"> <element /> </div> ); }; export default App;Al importar, VSC muestra que "el elemento se declara pero no se usa", y la página html no muestra nada más que una página en blanco.
En JSX, los nombres de etiquetas en minúsculas se consideran etiquetas HTML. Sin embargo, los nombres de etiquetas en minúsculas con un punto (acceso a la propiedad) no lo son.
Ver etiquetas HTML frente a componentes React.
<component /> compiles to React.createElement('component') (html tag) <Component /> compiles to React.createElement(Component) <obj.component /> compiles to React.createElement(obj.component)