javascript - How to import a File path in React Js? - Stack Overflow

admin管理员组

文章数量:1390767

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

Share Improve this question Follow edited Feb 7, 2018 at 10:35 Manoj A asked Jan 12, 2018 at 6:18 Manoj AManoj A 33533 gold badges66 silver badges1313 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

本文标签： javascriptHow to import a File path in React JsStack Overflow