Hi im noob to reactJS so idk a lot about it.
I've just finished the Header on my project and now im working on the footer. The thing is that if I import the Footer in index.js when page refreshes it doesn't load.
My index.js looks like this:
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')
);
I've tried to update node and react, upgrade the amount of memory in the package.json but none of this works...
The component should be a function and it should capitalized like
const App = () => (
<div>
<Header />
<Footer />
</div>
);
And then you should initiate your application like
ReactDOM.render(
<App />,
document.getElementById("root"),
);
About the naming of components check this section of the documentation
https://reactjs.org/docs/components-and-props.html#rendering-a-component
In particular, this is why it is important to use capitalized names for your components (from React ducumentation)
Note: Always start component names with a capital letter. React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.
Okay i've changed it but still doesnt work. When I start with -npm start- it show this for a couple of seconds
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.
Your syntax isn't correct
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')
);