How to import a File path in React Js?

Question

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

/src  
   /components       
     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 './components/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 ?

you have already imported it import Layout from './components/layout'; — warl0ck
– warl0ck, Commented Jan 12, 2018 at 6:25

Umesh · Accepted Answer · 2018-01-12 06:26:39Z

1

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

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



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

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

 export default App;

answered Jan 12, 2018 at 6:26

Umesh

2,74221 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3014373 · Accepted Answer · 2018-01-12 06:33:54Z

1

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

answered Jan 12, 2018 at 6:33

user3014373

463 bronze badges

Comments

Andy Ray · Accepted Answer · 2018-01-12 06:36:05Z

0

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

answered Jan 12, 2018 at 6:36

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

Collectives™ on Stack Overflow

How to import a File path in React Js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related