ReactJS - Mengintegrasikan dengan Libraries Lain

Hai sana, para pengembang React masa depan! Saya sangat senang untuk memandu Anda melalui dunia menarik integrasi React dengan libraries lain. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa keterampilan ini seperti menjadi seorang chef ahli - tahu bagaimana mencampurkan berbagai bahan (atau dalam kasus kita, libraries) untuk menciptakan sesuatu yang menakjubkan!

Mengapa Mengintegrasikan React dengan Libraries Lain?

Sebelum kita masuk ke dalam, mari berbicara tentang mengapa kita ingin mencampur React dengan libraries lain. Bayangkan Anda sedang membangun sebuah rumah pohon. React adalah dasar dan tembok yang kuat Anda, tapi kadang-kadang Anda memerlukan alat khusus untuk jendela atau slide yang mewah. Itu di mana libraries lain memasuki - mereka menambahkan fungsi ekstra yang React tidak menyediakan secara langsung.

Integrasi Berdasarkan CreateRoot

mari mulai dengan metode CreateRoot, yang seperti mengatur pintu utama ke rumah pohon kita.

Apa Itu CreateRoot?

CreateRoot adalah cara modern untuk merender komponen React. Itu seperti menanam benih untuk pohon React kita tumbuh.

Ini adalah contoh sederhana:

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Dalam kode ini:

1. Kita import createRoot dari React DOM.
2. Kita mencari sebuah wadah di HTML kita ( biasanya sebuah div dengan id 'root').
3. Kita membuat sebuah root menggunakan wadah ini.
4. Kita merender komponen App utama kita di root ini.

Mengintegrasikan Library Chart

Sekarang, bayangkan kita ingin menambahkan sebuah grafik menarik ke aplikasi React kita. Kita akan menggunakan library yang disebut Chart.js sebagai contoh.

Pertama, instal Chart.js:

npm install chart.js

Sekarang, mari buat sebuah komponen yang menggunakan Chart.js:

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

function ChartComponent() {
const chartRef = useRef(null);

useEffect(() => {
if (chartRef.current) {
new Chart(chartRef.current, {
type: 'bar',
data: {
labels: ['Merah', 'Biru', 'Kuning', 'Hijau', 'Ungu', 'Oranye'],
datasets: [{
label: '# suara',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}, []);

return <canvas ref={chartRef} />;
}

export default ChartComponent;

Kode ini:

1. Membuat sebuah komponen fungsional.
2. Menggunakan useRef untuk membuat referensi ke elemen canvas kita.
3. Menggunakan useEffect untuk membuat sebuah Chart ketika komponen dimuat.
4. Mengembalikan elemen canvas yang Chart.js akan render ke dalamnya.

Sekarang Anda dapat menggunakan komponen ini di aplikasi utama Anda:

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

function App() {
return (
<div>
<h1>Grafik Menakjubkan Saya</h1>
<ChartComponent />
</div>
);
}

export default App;

Integrasi Berdasarkan Ref

Sekarang, mari bicarakan integrasi berdasarkan Ref. Refs di React adalah seperti name tags untuk elemen kita - mereka membantu kita menemukan dan berinteraksi dengan bagian khusus UI kita.

Apa Itu Refs?

Refs menyediakan cara untuk mengakses node DOM atau elemen React yang diciptakan di dalam metode render. Mereka seperti sebuah jalur langsung ke bagian khusus komponen Anda.

Ini adalah contoh sederhana:

import React, { useRef, useEffect } from 'react';

function TextInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} type="text" />;
}

Dalam kode ini:

1. Kita membuat sebuah ref menggunakan useRef.
2. Kita menempelkan ref ini ke elemen input kita.
3. Di useEffect, kita menggunakan ref untuk fokuskan input saat komponen dimuat.

Mengintegrasikan Library Pemilihan Tanggal

mari integrasikan library pemilihan tanggal yang disebut Flatpickr menggunakan refs:

Pertama, instal Flatpickr:

npm install flatpickr

Sekarang, mari buat sebuah komponen yang menggunakan Flatpickr:

import React, { useRef, useEffect } from 'react';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.css';

function DatePicker() {
const datePickerRef = useRef(null);

useEffect(() => {
flatpickr(datePickerRef.current, {
dateFormat: 'Y-m-d',
onChange: function(selectedDates, dateStr, instance) {
console.log(dateStr);
}
});
}, []);

return <input ref={datePickerRef} type="text" placeholder="Pilih Tanggal..." />;
}

export default DatePicker;

Kode ini:

1. Membuat sebuah ref untuk elemen input kita.
2. Menggunakan useEffect untuk menginisialisasi Flatpickr pada input kita saat komponen dimuat.
3. Mengatur Flatpickr dengan beberapa opsi, termasuk callback saat tanggal dipilih.

Anda sekarang dapat menggunakan komponen DatePicker ini di aplikasi Anda:

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

function App() {
return (
<div>
<h1>Pilih Tanggal</h1>
<DatePicker />
</div>
);
}

export default App;

Integrasi Plugin jQuery

Akhirnya, mari bicarakan integrasi plugin jQuery, khususnya plugin carousel Slick.

Menyiapkan Slick

Pertama, kita perlu menginstal jQuery dan Slick:

npm install jquery slick-carousel

Sekarang, mari buat sebuah komponen Slider:

import React, { useRef, useEffect } from 'react';
import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function Slider() {
const sliderRef = useRef(null);

useEffect(() => {
$(sliderRef.current).slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
}, []);

return (
<div ref={sliderRef}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
);
}

export default Slider;

Kode ini:

1. Mengimpor jQuery dan plugin Slick carousel.
2. Membuat sebuah ref untuk wadah slider kita.
3. Menggunakan useEffect untuk menginisialisasi Slick carousel saat komponen dimuat.
4. Mengembalikan div dengan beberapa konten slide.

Anda sekarang dapat menggunakan komponen Slider ini di aplikasi Anda:

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

function App() {
return (
<div>
<h1>Slider Menakjubkan Saya</h1>
<Slider />
</div>
);
}

export default App;

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Kita telah berpergian melalui negeri integrasi React, dari membuat roots ke refs hingga bahkan membawa kesenian jQuery. Ingat, mengintegrasikan libraries adalah tentang mengembangkan kemampuan React Anda, seperti menambahkan superpowers ke kemampuan React Anda yang sudah menakjubkan.

Berikut ini adalah ringkasan metode yang kita telah pelajari:

Metode	Use Case	Contoh
CreateRoot	Menyiapkan aplikasi React utama	Integrasi Chart.js
Ref-based	Mengakses elemen DOM tertentu	Pemilihan tanggal Flatpickr
jQuery Plugin	Menggunakan libraries jQuery	Carousel Slick

Terus latih, terus jelajahi, dan terutama, terus bersenang-senang dengan React! Siapa tahu apa aplikasi menakjubkan yang Anda akan bangun berikutnya? Selamat coding!

Credits: Image by storyset