Komponen dalam ReactJS

Macam Komponen dalam ReactJS – Dalam ReactJS, terdapat beberapa jenis komponen yang dapat digunakan untuk membangun antarmuka pengguna yang kompleks. Berikut adalah beberapa macam komponen yang umum digunakan dalam pengembangan aplikasi ReactJS:

1. Functional Components:

Komponen fungsional adalah bentuk yang lebih sederhana dan direkomendasikan dalam pengembangan ReactJS.
Ditulis sebagai sebuah fungsi JavaScript yang mengembalikan elemen JSX.
Tidak memiliki siklus hidup (lifecycle) dan metode khusus.
Cocok digunakan untuk komponen sederhana yang hanya menerima props dan merender tampilan.

Contoh:

jsxCopy codefunction Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

2. Class Components:

Komponen kelas adalah bentuk tradisional dalam ReactJS sebelum adanya hooks.
Ditulis sebagai sebuah kelas JavaScript yang meng-extends React.Component.
Memiliki siklus hidup (lifecycle) dan metode khusus seperti render(), componentDidMount(), componentDidUpdate(), dll.
Cocok digunakan untuk komponen yang memiliki logika yang lebih kompleks atau membutuhkan manipulasi state.

Contoh:

jsxCopy codeclass Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

3. Pure Components:

Pure components (komponen murni) adalah versi kelas dari komponen fungsional.
Mengimplementasikan React.PureComponent atau memastikan bahwa shouldComponentUpdate() membandingkan prop dan state dengan bijaksana.
Secara otomatis melakukan perbandingan dangkal (shallow comparison) prop dan state sebelum melakukan pembaruan untuk mencegah re-render yang tidak perlu.
Cocok digunakan untuk komponen yang menerima props tetapi tidak memiliki logika yang kompleks.

Contoh:

jsxCopy codeclass Welcome extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

4. Higher-Order Components (HOC):

Higher-Order Components adalah komponen yang mengambil satu atau beberapa komponen sebagai argumen dan mengembalikan komponen baru yang diperkaya dengan fitur tambahan.
Digunakan untuk mengabstraksi logika bersama yang dapat digunakan oleh beberapa komponen.
Cocok digunakan untuk fitur seperti autentikasi, proteksi akses, penanganan kesalahan, dll.

Contoh:

jsxCopy codefunction withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component has mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const Welcome = withLogger((props) => {
  return <h1>Hello, {props.name}!</h1>;
});

5. Functional Components with Hooks:

Diperkenalkan sejak React versi 16.8, hooks memungkinkan penggunaan state dan fitur React lainnya dalam komponen fungsional.
Menggunakan fungsi khusus seperti useState, useEffect, useContext, dll., yang digunakan untuk mengelola state dan siklus hidup dalam komponen fungsional.
Hooks memungkinkan pengembang untuk menggunakan fitur-fitur React seperti state, efek samping, dan siklus hidup dalam komponen fungsional tanpa perlu mengubahnya menjadi komponen kelas.
Cocok digunakan untuk menggantikan komponen kelas yang memiliki logika yang lebih kompleks.

Contoh:

jsxCopy codeimport React, { useState, useEffect } from 'react';

function Welcome(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component has mounted');
    // Cleanup code (componentWillUnmount) can be added here
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Dalam pengembangan aplikasi ReactJS, penggunaan jenis komponen yang tepat tergantung pada kompleksitas dan kebutuhan aplikasi yang sedang dibangun. Anda dapat memilih salah satu jenis komponen tersebut atau mengombinasikannya sesuai kebutuhan Anda. Dalam artikel ini, kita telah melihat beberapa macam komponen yang umum digunakan dalam pengembangan aplikasi ReactJS, mulai dari komponen fungsional hingga komponen dengan hooks.

6. Presentational Components:

Presentational components (komponen presentasional) adalah komponen yang bertanggung jawab hanya untuk merender tampilan antarmuka pengguna.
Tidak memiliki logika bisnis atau akses langsung ke state aplikasi.
Menerima props dari komponen induk dan merender tampilan berdasarkan props tersebut.
Cocok digunakan untuk komponen yang fokus pada presentasi dan reusable.

Contoh:

jsxCopy codefunction Button(props) {
  return (
    <button onClick={props.onClick}>
      {props.label}
    </button>
  );
}

7. Container Components

Container components (komponen kontainer) adalah komponen yang bertanggung jawab untuk mengatur logika bisnis dan mengelola state.
Berinteraksi dengan API atau menyimpan state aplikasi.
Mengirimkan data atau fungsi sebagai props ke komponen presentasional.
Cocok digunakan untuk komponen yang memiliki logika bisnis yang kompleks dan mengelola state aplikasi.

Contoh:

jsxCopy codeclass TodoListContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
    };
  }

  componentDidMount() {
    // Fetch todos from API and update state
  }

  handleTodoClick = (todoId) => {
    // Update the todo status in the state
  }

  render() {
    return (
      <TodoList
        todos={this.state.todos}
        onTodoClick={this.handleTodoClick}
      />
    );
  }
}

8. Stateless Functional Components:

Stateless functional components (komponen fungsional tanpa state) adalah komponen fungsional yang tidak menggunakan state lokal (useState) atau siklus hidup (useEffect).
Menerima props dan merender tampilan berdasarkan props tersebut.
Tidak memiliki keadaan yang berubah seiring waktu.
Cocok digunakan untuk komponen yang tidak membutuhkan logika kompleks atau manipulasi state.

Contoh:

jsxCopy codefunction Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Dalam pengembangan aplikasi ReactJS, Anda dapat menggabungkan jenis-jenis komponen ini sesuai dengan kebutuhan aplikasi Anda. Penting untuk memilih jenis komponen yang paling sesuai dengan tugas dan tanggung jawabnya untuk mencapai kode yang bersih, terstruktur, dan mudah dipelihara.

9. Render Props Components:

Render props components (komponen dengan prop render) adalah komponen yang menggunakan prop bernama render atau prop lain yang berfungsi sebagai fungsi untuk merender tampilan.
Komponen ini memberikan fleksibilitas kepada pengguna untuk menentukan tampilan komponen tersebut.
Pengguna dapat mengirimkan fungsi sebagai prop yang akan menerima data atau fungsi dari komponen tersebut.
Cocok digunakan untuk komponen yang ingin memberikan kontrol kepada pengguna dalam merender tampilan.

Contoh:

jsxCopy codeclass Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={({ x, y }) => (
          <p>The current mouse position is ({x}, {y})</p>
        )} />
      </div>
    );
  }
}

10. Memo Components:

Memo components (komponen memo) adalah versi optimisasi dari komponen fungsional dan pure components.
Komponen ini menggunakan React.memo() untuk melakukan memoization, yaitu menyimpan versi terakhir dari hasil rendering komponen.
Jika prop komponen tidak berubah, komponen tersebut tidak akan dirender ulang.
Cocok digunakan untuk komponen yang menerima props tetapi tidak membutuhkan pembaruan yang sering.

Contoh:

jsxCopy codeconst Greeting = React.memo(function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
});

11. Context Components:

Context components (komponen konteks) adalah komponen yang menggunakan React.createContext() untuk membuat konteks dan menyediakan data kepada komponen-komponen yang berada di dalamnya.
Komponen-komponen anak dapat mengakses data konteks tersebut tanpa perlu melalui prop drilling (mengirimkan props dari komponen induk ke komponen anak secara berulang).
Cocok digunakan untuk berbagi data global yang dibutuhkan oleh banyak komponen di dalam pohon komponen.

Contoh:

jsxCopy codeconst ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    return <button className={theme}>Themed Button</button>;
  }
}

Dalam pengembangan aplikasi ReactJS, penggunaan jenis komponen ini dapat meningkatkan fleksibilitas, kinerja, dan pengorganisasian kode Anda. Anda dapat memilih jenis komponen yang sesuai dengan kebutuhan aplikasi Anda.

12. Suspense Components:

Suspense components (komponen penangguhan) adalah komponen yang digunakan untuk menangani penundaan dalam pemuatan data.
Digunakan bersamaan dengan React.lazy() untuk memuat komponen secara dinamis.
Menyediakan fallback UI yang dapat ditampilkan selama proses pemuatan sedang berlangsung.
Cocok digunakan untuk memuat komponen secara asinkron atau memuat data secara dinamis.

Contoh:

jsxCopy codeconst OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

13. Fragment Components

Fragment components (komponen fragmen) adalah komponen yang digunakan untuk mengelompokkan beberapa elemen tanpa menambahkan elemen tambahan ke DOM.
Mengurangi jumlah elemen yang dihasilkan saat merender komponen.
Cocok digunakan untuk menghindari wrapper elemen yang tidak diperlukan.

Contoh:

jsxCopy codefunction MyComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

14. Error Boundary Components:

Error boundary components (komponen batas kesalahan) adalah komponen yang digunakan untuk menangani kesalahan yang terjadi selama rendering komponen di bawahnya.
Menangkap kesalahan di dalam komponen anak dan menampilkan fallback UI sebagai tanggapan.
Mencegah kesalahan dari menyebar ke komponen di atasnya.
Cocok digunakan untuk menangani kesalahan di komponen-komponen yang kritis dalam aplikasi.

Contoh:

jsxCopy codeclass ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log error or send it to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

class MyComponent extends React.Component {
  render() {
    if (/* Some condition */) {
      throw new Error('Error occurred');
    }
    return <div>Normal rendering</div>;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

Dalam pengembangan aplikasi ReactJS, penggunaan jenis komponen ini dapat memperluas fungsionalitas dan manajemen kesalahan dalam aplikasi Anda. Anda dapat memilih jenis komponen yang sesuai dengan kebutuhan aplikasi Anda untuk meningkatkan pengalaman pengguna dan kualitas kode.

15. Router Components:

Router components (komponen router) digunakan untuk menangani routing dalam aplikasi ReactJS.
Memungkinkan navigasi antara berbagai halaman atau tampilan dalam aplikasi.
Contoh yang populer adalah React Router, yang menyediakan komponen seperti BrowserRouter, Route, Link, dll.
Cocok digunakan untuk mengelola navigasi antar halaman dalam aplikasi.

Contoh dengan React Router:

jsxCopy codeimport { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

16. Form Components:

Form components (komponen formulir) digunakan untuk mengelola input pengguna dan mengirimkan data ke server atau mengolahnya dalam aplikasi.
Menyediakan komponen seperti input, select, textarea, dll., serta metode untuk mengelola state formulir.
Cocok digunakan untuk mengelola input pengguna dan validasi dalam formulir.

Contoh:

jsxCopy codeclass MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // Submit form data to server or process it in the app
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleInputChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={this.state.email} onChange={this.handleInputChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

17. Hooks Components:

Hooks components (komponen hooks) adalah komponen fungsional yang menggunakan hooks untuk mengelola state dan siklus hidup.
Hooks seperti useState, useEffect, useContext, dll., digunakan dalam komponen fungsional untuk menggantikan fungsi-fungsi yang sebelumnya hanya tersedia dalam komponen kelas.
Cocok digunakan untuk menggantikan komponen kelas yang lebih sederhana dengan komponen fungsional yang menggunakan hooks.

18. Higher-Order Components (HOC):

Higher-Order Components (HOC) adalah komponen yang mengambil komponen lain sebagai argumen dan mengembalikan komponen baru.
HOC membungkus komponen asli dengan fungsionalitas tambahan.
Digunakan untuk logika yang dapat digunakan secara reusable di banyak komponen.
Cocok digunakan untuk mengabstraksi logika umum dan meningkatkan reusabilitas kode.

Contoh:

jsxCopy codefunction withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component has mounted');
    }

    componentWillUnmount() {
      console.log('Component will unmount');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

const EnhancedComponent = withLogger(MyComponent);

19. Lazy Components:

Lazy components (komponen malas) adalah komponen yang diimpor secara dinamis ketika dibutuhkan, bukan pada saat rendering awal.
Menggunakan React.lazy() untuk memuat komponen secara asinkron.
Digunakan untuk memisahkan kode aplikasi menjadi chuncks yang lebih kecil dan mempercepat waktu pemuatan awal.
Cocok digunakan untuk komponen-komponen besar yang tidak diperlukan saat awal rendering.

Contoh:

jsxCopy codeconst LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

20. Portals:

Portals memungkinkan render komponen ke node DOM yang berbeda dari komponen induknya.
Berguna ketika ingin merender komponen ke node DOM di luar hierarki komponen utama.
Cocok digunakan untuk merender komponen di tempat-tempat seperti modals, overlay, atau komponen yang memerlukan rendering di luar hierarki utama.

Contoh:

jsxCopy codeclass Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    document.body.appendChild(this.el);
  }

  componentWillUnmount() {
    document.body.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Modal>
        <p>Modal Content</p>
      </Modal>
    </div>
  );
}

Dalam pengembangan aplikasi ReactJS, jenis-jenis komponen ini memberikan fleksibilitas dan fungsionalitas yang lebih besar dalam membangun aplikasi. Anda dapat memilih jenis komponen yang sesuai dengan kebutuhan proyek Anda dan meningkatkan efisiensi, kualitas, dan reusabilitas kode Anda.

21. Memoizing Components:

Memoizing components (komponen memoizing) adalah teknik untuk mempercepat rendering komponen dengan menggunakan memoization.
Memoization adalah proses menyimpan hasil komputasi yang mahal secara kalkulasi dan menggunakannya kembali jika argumen yang sama diberikan.
Menggunakan React.memo() atau PureComponent untuk mencegah rendering ulang komponen jika prop dan state tidak berubah.
Cocok digunakan untuk meningkatkan kinerja komponen yang membutuhkan perhitungan intensif atau pembaruan yang jarang.

Contoh dengan React.memo():

jsxCopy codeconst ExpensiveComponent = React.memo(function ExpensiveComponent(props) {
  // Komputasi yang mahal
  return <div>Hasil Komputasi</div>;
});

22. Contextual Components:

Contextual components (komponen kontekstual) adalah komponen yang menggunakan Context API untuk berbagi data ke komponen anak tanpa perlu melewati props secara langsung.
Context API memungkinkan pembuatan konteks yang bisa diakses oleh komponen-komponen dalam pohon komponen tanpa perlu melalui komponen induk.
Menggunakan createContext() untuk membuat konteks dan menggunakan Provider dan Consumer untuk memberikan dan mengonsumsi data konteks.
Cocok digunakan untuk membagikan data global yang dibutuhkan oleh banyak komponen tanpa harus meneruskan props secara langsung.

Contoh dengan Context API:

jsxCopy codeconst MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Nilai Konteks">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(value) => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

23. Suspense with Data Fetching:

Suspense with data fetching (penangguhan dengan pengambilan data) adalah penggunaan Suspense untuk menangani penundaan dalam pengambilan data dari server.
Menggunakan Suspense dan React.lazy() untuk memuat komponen secara asinkron yang melakukan pengambilan data.
Suspense dapat menampilkan fallback UI selama proses pengambilan data sedang berlangsung.
Cocok digunakan untuk pengambilan data asinkron di dalam komponen-komponen yang membutuhkan data dari server.

Contoh:

jsxCopy codeconst fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data dari Server');
    }, 2000);
  });
};

const DataComponent = React.lazy(() => fetchData().then((data) => ({ default: () => <div>{data}</div> })));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent />
      </Suspense>
    </div>
  );
}

Dengan menggunakan komponen-komponen ini, Anda dapat meningkatkan kualitas, kinerja, dan efisiensi aplikasi ReactJS Anda. Pilihlah komponen yang sesuai dengan kebutuhan proyek Anda untuk mencapai hasil yang diinginkan.

Baca Juga :

1. Mengenal Sejarah ReactJS

Follow Us

Komponen dalam ReactJS

1. Functional Components:

2. Class Components:

3. Pure Components:

4. Higher-Order Components (HOC):

5. Functional Components with Hooks:

6. Presentational Components:

7. Container Components

8. Stateless Functional Components:

9. Render Props Components:

10. Memo Components:

11. Context Components:

12. Suspense Components:

13. Fragment Components

14. Error Boundary Components:

15. Router Components:

16. Form Components:

17. Hooks Components:

18. Higher-Order Components (HOC):

19. Lazy Components:

20. Portals:

21. Memoizing Components:

22. Contextual Components:

23. Suspense with Data Fetching:

Mengenal Tentang Node.js

Mengenal Sejarah ReactJS

Adin Yahya

About Author

Leave a comment Cancel reply

You may also like

Cara Membuat Telegram Bot API

Cara Membuat Database MySQL di Phpmyadmin

Cara Bikin Halaman Form Login dengan HTML dan CSS

Cara Bikin Halaman Form Registrasi / Pendaftaran dengan HTML dan CSS

Tutorial Cara Membuat Telegram Bot dengan Button di Chat

WP Categories

1. Functional Components:

2. Class Components:

3. Pure Components:

4. Higher-Order Components (HOC):

5. Functional Components with Hooks:

6. Presentational Components:

7. Container Components

8. Stateless Functional Components:

9. Render Props Components:

10. Memo Components:

11. Context Components:

12. Suspense Components:

13. Fragment Components

14. Error Boundary Components:

15. Router Components:

16. Form Components:

17. Hooks Components:

18. Higher-Order Components (HOC):

19. Lazy Components:

20. Portals:

21. Memoizing Components:

22. Contextual Components:

23. Suspense with Data Fetching:

Mengenal Tentang Node.js

Mengenal Sejarah ReactJS

Adin Yahya

About Author

Leave a comment Cancel reply

You may also like

Cara Membuat Telegram Bot API

Cara Membuat Database MySQL di Phpmyadmin