Panduan Awal Mengenai ReactJS - Context

Hai sana, para pengembang muda! Hari ini, kita akan masuk ke dunia yang menakjubkan dari ReactJS Context. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbit Anda melalui konsep ini dengan kegembiraan yang saya miliki saat pertama kali belajar itu. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Context di React?

Bayangkan Anda di acara reuni keluarga, dan Anda ingin berkongsi cerita lucu kepada semua orang. Apakah tidak akan lebih baik jika Anda bisa mengumumkannya sekali saja, dan semua orang bisa mendengarnya? Itu tepat apa yang Context lakukan di React!

Context menyediakan cara untuk memindahkan data melalui pohon komponen tanpa perlu mengirim prop secara manual di setiap tingkat. Itu dirancang untuk berbagi data yang bisa dianggap "global" untuk pohon komponen React.

Kapan Harus Menggunakan Context

Sebelum kita mendalamkan, mari kita pahami kapan harus menggunakan Context:

1. Ketika Anda memiliki data yang perlu diakses oleh banyak komponen di berbagai tingkat penempatan.
2. Ketika Anda ingin menghindari "prop drilling" (mengirim prop melalui komponen intermediat yang tidak memerlukan data).

Membuat dan Menggunakan Context

Mari kita jelajahi proses membuat dan menggunakan Context dengan beberapa contoh kode.

Langkah 1: Membuat Context

Pertama, kita perlu membuat Context. Kita akan menggunakan metode React.createContext() untuk ini.

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

Dalam contoh ini, kita membuat ThemeContext dengan nilai default 'light'. Nilai default ini digunakan saat komponen tidak memiliki Provider yang cocok di atasnya dalam pohon.

Langkah 2: Menyediakan Context

Sekarang kita memiliki Context, kita perlu menyediakannya ke pohon komponen kita. Kita melakukan ini menggunakan komponen Context.Provider.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

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

Dalam contoh ini, kita membungkus komponen Toolbar (dan semua anaknya) dengan ThemeContext.Provider. Kita menetapkan nilai ke "dark", yang akan tersedia untuk semua komponen dalam Provider ini.

Langkah 3: Menggunakan Context

Sekarang, mari kita ke bagian yang menarik - menggunakan Context! Ada dua cara untuk mengonsumsi Context:

1. Class.contextType
2. Context.Consumer

Ayo lihat keduanya:

Menggunakan Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Saya adalah tombol tema!</button>;
}
}

Dalam contoh ini, ThemedButton adalah komponen kelas. Kita telah menetapkan contextType nya ke ThemeContext. Sekarang, this.context akan memberikan kita akses ke nilai konteks saat ini.

Menggunakan Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Saya adalah tombol tema!</button>}
</ThemeContext.Consumer>
);
}

Di sini, kita menggunakan komponen Context.Consumer. Itu menggunakan render prop untuk memberikan nilai konteks saat ini ke fungsi.

Context Ganda

kadang-kadang, Anda mungkin perlu menggunakan beberapa konteks. React memungkinkan Anda untuk menimbang beberapa Provider Context:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

Dan Anda bisa mengonsumsi beberapa konteks seperti ini:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} menggunakan tema {theme}
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Memperbarui Context

Context juga bisa dinamis. Mari kita lihat contoh di mana kita memperbarui tema kita:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Tukar Tema
</button>
</ThemeContext.Provider>
);
}

Dalam contoh ini, kita menggunakan hook useState untuk mengelola state tema kita. Kita mengirimkan nilai tema saat ini dan fungsi setTheme di dalam nilai konteks.

Metode Context

Berikut adalah tabel yang menggabungkan metode Context utama yang kita bahas:

Metode	Deskripsi
React.createContext()	Membuat objek Context
Context.Provider	Menyediakan nilai konteks ke komponen
Class.contextType	Memungkinkan komponen kelas untuk mengonsumsi konteks tunggal
Context.Consumer	Memungkinkan komponen fungsi untuk berlangganan ke konteks

Kesimpulan

Dan begitu, teman-teman! Kita telah melakukan perjalanan melalui negeri React Context, dari penciptaannya hingga penggunaannya dan bahkan memperbarunya. Context adalah alat yang kuat di React, memungkinkan Anda menghindari prop drilling dan mengelola state global secara efektif.

Ingat, seperti semua alat, Context tidak selalu solusi yang tepat. Untuk kasus yang sederhana, prop mungkin masih menjadi pilihan terbaik Anda. Tetapi saat Anda perlu berbagi data di antara banyak komponen di tingkat yang berbeda, Context bisa menjadi teman baru Anda.

Terus latih, terus mengode, dan terutama, terus bersenang-senang! Sampai jumpa lagi, selamat Reacting!

Credits: Image by storyset