ReactJS - 3 ways to Import components in ReactJS

Introduction

In this post, we will discuss 3 different ways to import a component in ReactJS. This post is not about concept of components in general. But, this post is to show how we can include or import different components.

Example folder structure:

/src
  App.js
  App.css
  ...
  /components
    /Movie
    /MovieList
    /Footer

In this post, We are concerned with three components:

• Movie
• MovieList
• Footer

We will see 3 different ways to import this three components.

Way-1 By exact name of JS file

This is the simplest of the ways and you probably knew about this. The folder structure. We will see component: Movie

/src
  App.js
  App.css
  ...
  /components
    /Movie
      /Movie.js
    /MovieList
    /Footer

Assumming you are importing Movie component in App.js.

import React, {Component} from 'react';
import './App.scss';
import Movie from './components/Movie/Movie';

class App extends Component {
    render() {
        return <React.Fragment>
            <Movie />
        </React.Fragment>
    }
}

// module.exports = App;
export default App;

Here, we are just refering Movie component to its exact filename:

Way-2 By naming our component as index.js

In your respective component folder, you need to name your js file as index.js The folder structure. We will see component: MovieList

/src
  App.js
  App.css
  ...
  /components
    /Movie
    /MovieList
      /index.js
    /Footer

Assumming you are importing MovieList component in App.js.

import React, {Component} from 'react';
import './App.scss';
import MovieList from './components/MovieList';

class App extends Component {
    render() {
        return <React.Fragment>
            <MovieList />
        </React.Fragment>
    }
}

// module.exports = App;
export default App;

Note that we did not refer full path till the component js file. Rather we have refered folder path. And index.js is implicitly included.

Way-3 By specifying your component filename in special package.json

Name your component the name you want. Say: Footer.js Create a special file under component’s respective folder: package.json with following content:

package.json

{
    "main": "Footer.js"
}

The folder structure. We will see component: Footer

/src
  App.js
  App.css
  ...
  /components
    /Movie
    /MovieList
    /Footer
      /paackage.json
      /Footer.js

Assumming you are importing Footer component in App.js.

import React, {Component} from 'react';
import './App.scss';
import Footer from './components/Footer';

class App extends Component {
    render() {
        return <React.Fragment>
            <Footer />
        </React.Fragment>
    }
}

// module.exports = App;
export default App;

Here, we are just refering Footer component upto its folder name. And, presence of package.json file make ReactJS system understand which js file to include from this folder.

This ends our three ways to include components. I hope you learnt something new.