Membuat Index.js Untuk Import Multi Component ReactJS

Membuat komponen pada react js bisa melalui dua cara, yaitu class component dan functional component. Pada artikel sebelumnya sudah kita bahas detail kedua hal tersebut.

Kita juga telah membahas cara export dan import dari kedua komponen tersebut pada artikel yang sama.

Untuk membuat kode kita lebih rapi, kita dapat membuat file index.js yang kemudian akan mereturn setiap komponen. Sehingga ketika import komponen tersebut tidak memerlukan banyak koding.

Contoh:

Kita akan mengubah kode seperti ini

import MenuUtama from './Page/MenuUtama';
import Kontak from './Page/Utama';
import About from './Page/About';
import Blog from './Page/Blog';

menjadi seperti ini:

import { MenuUtama, Kontak, About, Blog } from './Page';

Bagaimana caranya? Makanya disimak.

Membuat Komponen

Saya asumsikan kita mulai project dari awal, pertama buat project baru dengan:

npx create-react-app membuat_komponen_index
cd membuat_komponen_index
npm start

Kemudian buka kode editornya, seperti biasa kode editor yang saya suka adalah Visual Studio Code.

code .

Buat beberapa file sehingga struktur project menjadi berikut:

membuat_komponen_index
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── Page
    │   ├── About.js
    │   ├── Blog.js
    │   ├── index.js
    │   ├── Kontak.js
    │   └── MenuUtama.js
    ├── App.js
    ├── index.css
    ├── index.js
    └── serviceWorker.js

Hapus file logo.svg, App.test.js, App.css karena file tersebut tidak akan kita gunakan

Kemudian kita masukkan kode berikut ke komponennnya.

src/Page/About.js
import React, {Component} from 'React';

class About extends Component {
  render(){
    return(
      <div>
        <p>Ini halaman about</p>
      </div>
    );
  }
}

export default About;
src/Page/Blog.js
import React, {Component} from 'React';

class Blog extends Component {
  render(){
    return(
      <div>
        <p>Ini halaman blog</p>
      </div>
    );
  }
}

export default Blog;
src/Page/Kontak.js
import React, {Component} from 'React';

class Kontak extends Component {
  render(){
    return(
      <div>
        <p>Ini halaman blog</p>
      </div>
    );
  }
}

export default Kontak;
src/Page/MenuUtama.js
import React, {Component} from 'React';

class MenuUtama extends Component {
  render(){
    return(
      <div>
        <p>Ini halaman blog</p>
      </div>
    );
  }
}

export default MenuUtama;

Kode di atas sengaja saya buat menjadi class component, anda bisa berlatih dengan mengubahnya menjadi functional component.

Export Komponen Pada Index.js

Selanjutnya kita export seluruh komponen tersebut dengan index.js

src/Page/index.js
export {default as About} from './About'
export {default as Blog} from './Blog'
export {default as Kontak} from './Kontak'
export {default as MenuUtama} from './MenuUtama'

Perintah di atas akan meng-export semua komponen, sehingga kita bisa mengakses seluruh komponen tersebut hanya dengan index.js.

Import Index.js Pada App.js

Setelah membuat komponen yang diperlukan dan di export melalui index.js, kita bisa mengaksesnya dari App.js menuju index.js untuk seluruh komponen tersebut.

src/App.js
import React, {Component} from 'React';
import { MenuUtama, Kontak, About, Blog } from './Page';

class App extends Component {
  render(){
    return(
      <div>
        <MenuUtama />
        <Kontak />
        <About />
        <Blog />
      </div>
    );
  }
}

export default App;

Penutup

Jika kita amati hal ini terlihat membuang-buang waktu karena kita harus menulis kode pada index.js. Tapi pada skala aplikasi yang besar, pembuatan export dan import melalui index.js akan membuat kode lebih rapi dan mudah dibaca.

Jadi bagaimana menurut kamu

Bagikan pendapatnya ya!