Import react component from another folder

Asked
Active3 hr before
Viewed126 times

7 Answers

componentreact
90%

No, I see you importing: import Image from '../../Components/Image'. This mean you importing index of Image folder.,But in your code, you defining Image.js not index.js. So, you have to import like this:,Or, you can rename file Image.js to index.js to shorten the code when import:

But in your code, you defining Image.js not index.js. So, you have to import like this:

import Image from '../Image/Image'

Or, you can rename file Image.js to index.js to shorten the code when import:

// rename Image.js to index.js
// then, import file:
import Image from '../Image'
load more v
88%

In the above code, we are importing four components from a folder. What if we want to import multiple components from different folders?,What if we could use only one file to import all the components?,Then, we will import components from the index.js file

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Importing a Component,Developing Components in Isolation,Now that you've configured your project to support absolute imports, if you want to import a module located at src/components/Button.js, you can import the module like so:

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Create new Footer component and type out the below code into Footer.js,Create new Header component and type out the below code into Header.js,Type the following command to create a new react app:

Type the following command to create a new react app:

npx create - react - app demo

Now, go to the project folder:

cd demo
import React, { Component } from 'react';
 
class Header extends Component {
  render() {
    return (
      <div>
        This is header component.
      </div>
    );
  }
}
 
export default Header;
import React, { Component } from 'react';
 
class Header extends Component {
  render() {
    return (
      <div>
        This is header component.
      </div>
    );
  }
}
 
export default Header;
import React, { Component } from 'react';
 
class Footer extends Component {
  render() {
    return (
      <div>
        This is Footer component.
      </div>        
    );
  }
}
 
export default Footer;
import React, { Component } from 'react';
 
class Footer extends Component {
  render() {
    return (
      <div>
        This is Footer component.
      </div>        
    );
  }
}
 
export default Footer;
import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
 
class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Footer />
      </div>
    );
  }
}
 
export default App;
import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
 
class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Footer />
      </div>
    );
  }
}
 
export default App;
load more v
75%

I have two folders/ directories within the src directory/ folder named images and components. Within components folder I have CustomerProfile.js and CustomerProfile.css and within images I have images.,would it path not need to be '../images/customer-profile-bg.jpg' As you need to come out of components directory before going into the images directory?,Built on Forem — the open source software that powers DEV and other inclusive communities.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Pretag
 Pretag team - issue, fix, solve, resolve
22%

One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.,Another popular way to structure projects is to group similar files together, for example:,React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.

common /
   Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed /
   index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile /
   index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
load more v

Other "component-react" queries related to "Import react component from another folder"