Hola, soy un novato en reactJS, así que sé mucho al respecto.
Acabo de terminar el encabezado de mi proyecto y ahora estoy trabajando en el pie de página. El caso es que si importo el pie de página en index.js cuando la página se actualiza, no se carga.
Mi index.js se ve así:
import React from 'react'; import ReactDOM from 'react-dom'; //Components import Header from './component/header/Header'; import Footer from './component/footer/Footer'; //SCSS import './index.scss'; import './custom.scss'; const app = ( <div> <Header /> <Footer /> </div> ); ReactDOM.render( app, document.getElementById('root') );He intentado actualizar el nodo y reaccionar, actualizar la cantidad de memoria en el paquete.json pero nada de esto funciona...
El componente debe ser una función y debe estar en mayúsculas como
const App = () => ( <div> <Header /> <Footer /> </div> );Y luego debe iniciar su aplicación como
ReactDOM.render( <App />, document.getElementById("root"), );Acerca de la denominación de los componentes, consulte esta sección de la documentación.
https://reactjs.org/docs/components-and-props.html#rendering-a-component
En particular, esta es la razón por la que es importante usar nombres en mayúsculas para sus componentes (de la documentación de React)
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.
Vale, lo he cambiado pero sigue sin funcionar. Cuando empiezo con -npm start- muestra esto por un par de segundos
PS H:\...\hardysoft> npm start > hardysoft@0.1.0 start > react-scripts --max_old_space_size=4096 start (node:14928) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use `node --trace-deprecation ...' to show where the warning was created) (node:14928) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.Tu sintaxis no es correcta
import React from 'react'; import ReactDOM from 'react-dom'; //Components import Header from './component/header/Header'; import Footer from './component/footer/Footer'; //SCSS import './index.scss'; import './custom.scss'; const App = () => { return( <div> <Header /> <Footer /> <div> ) } ReactDOM.render( <App />, document.getElementById('root') );