ReactJS does not load-CodePudding

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...

CodePudding user response：

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.

CodePudding user response：

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')
);

CodePudding user response：

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

> [email protected] 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.