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 ?

Answer 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;

Answer 2

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

Answer 3

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