I have to import multiple files in my App.js . My folder structure is

/src  
   /ponents       
     layout.js
   App.js  
   index.css
   index.js

Here i want to import layout.js file from App.js. My code is

import React from 'react';
import Layout from './ponents/layout';

class App extends React.Component{
   render(){
       return ( 
          <div>
              <p>Hi</p>
          </div>
      );
   }
 }

 export default App;

In my code, how to import layout.js file ?

I have to import multiple files in my App.js . My folder structure is

/src  
   /ponents       
     layout.js
   App.js  
   index.css
   index.js

Here i want to import layout.js file from App.js. My code is

import React from 'react';
import Layout from './ponents/layout';

class App extends React.Component{
   render(){
       return ( 
          <div>
              <p>Hi</p>
          </div>
      );
   }
 }

 export default App;

In my code, how to import layout.js file ?

• javascript
• reactjs

• 2 import Layout from './ponents/layout'; – Anurag Awasthi Commented Jan 12, 2018 at 6:20
• you have already imported it import Layout from './ponents/layout'; – warl0ck Commented Jan 12, 2018 at 6:25
• but its not working – Manoj A Commented Jan 12, 2018 at 6:34

3 Answers 3

Ideally, your layout is a ponent which you can simply import into your main. One good pratcise when creating new ponent is to create a separate folder inside ponents folder and create index.js. By doing so you can import ponents like below:

/src
/ponents
  /layout
    index.js
App.js
index.css
index.js



import React from 'react';
import Layout from './ponents/layout';

class App extends React.Component{
   render(){
       return ( 
          <div>
              <p>Hi</p>
              <Layout/>
          </div>
      );
   }
 }

 export default App;

It looks like you imported Layout correctly. If it is not working, perhaps you forgot to export default Layout in layout.js?

You need to use webpack's resolve.extensions to import file paths that don't end in .js