ReactJS - Integrating with Other Libraries

Hallo zusammen, zukünftige React-Entwickler! Ich freue mich sehr, euch durch die aufregende Welt der Integration von React mit anderen Bibliotheken zu führen. Als jemand, der seit Jahren Informatik unterrichtet, kann ich euch sagen, dass diese Fähigkeit wie ein Meisterköche ist - zu wissen, wie man verschiedene Zutaten (oder in unserem Fall Bibliotheken) mischt, um etwas Herausragendes zu schaffen!

Why Integrate React with Other Libraries?

Bevor wir tiefer einsteigen, lassen Sie uns darüber sprechen, warum wir React mit anderen Bibliotheken mischen würden. Stellt euch vor, ihr baut ein Baumhaus. React ist eure robuste Grundlage und Wände, aber manchmal braucht ihr spezielle Werkzeuge für die Fenster oder eine coole Rutsche. Das ist, wo andere Bibliotheken ins Spiel kommen - sie fügen zusätzliche Funktionen hinzu, die React nicht aus der Box heraus bietet.

CreateRoot Based Integration

Lassen Sie uns mit der CreateRoot-Methode beginnen, die wie das Einrichten des Haupteingangs zu unserem Baumhaus ist.

Was ist CreateRoot?

CreateRoot ist eine moderne Methode zum Rendern von React-Komponenten. Es ist wie das Pflanzen des Samens für unseren React-Baum, um zu wachsen.

Hier ist ein einfaches Beispiel:

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

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

In diesem Code:

1. Importieren wir createRoot aus React DOM.
2. Finden wir einen Container in unserer HTML (normalerweise ein div mit der id 'root').
3. Erstellen wir einen root mit diesem Container.
4. Rendern wir unsere Hauptkomponente App in diesem root.

Integrating a Chart Library

Nehmen wir an, wir möchten eine coole Grafik in unsere React-App hinzufügen. Wir verwenden eine Bibliothek namens Chart.js als Beispiel.

Zuerst installieren wir Chart.js:

npm install chart.js

Nun erstellen wir eine Komponente, die Chart.js verwendet:

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: ['Rot', 'Blau', 'Gelb', 'Grün', 'Violett', 'Orange'],
datasets: [{
label: '# der Stimmen',
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;

Dieser Code:

1. Erstellt eine funktionale Komponente.
2. Verwendet useRef, um eine Referenz zu unserem Canvas-Element zu erstellen.
3. Verwendet useEffect, um eine neue Grafik zu erstellen, wenn die Komponente gerendert wird.
4. Gibt ein Canvas-Element zurück, in das Chart.js gerendert wird.

Nun können Sie diese Komponente in Ihrer Haupt-App verwenden:

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

function App() {
return (
<div>
<h1>Mein toller Chart</h1>
<ChartComponent />
</div>
);
}

export default App;

Ref Based Integration

Nun sprechen wir über die Ref-basierte Integration. Refs in React sind wie Namensschilder für unsere Elemente - sie helfen uns, spezifische Teile unseres UI zu finden und mit ihnen zu interagieren.

Was sind Refs?

Refs bieten eine Möglichkeit, auf DOM-Knoten oder React-Elemente zuzugreifen, die im Render-Methoden erstellt wurden. Sie sind wie eine direkte Leitung zu einem bestimmten Teil Ihres Komponenten.

Hier ist ein einfaches Beispiel:

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

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

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

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

In diesem Code:

1. Erstellen wir eine Ref mit useRef.
2. Verbinden wir diese Ref mit unserem Eingabeelement.
3. Verwenden wir die useEffect, um den Fokus auf die Eingabe zu lenken, wenn die Komponente gerendert wird.

Integrating a Date Picker Library

Lassen Sie uns eine Datumsauswahlbibliothek namens Flatpickr mit Refs integrieren:

Zuerst installieren wir Flatpickr:

npm install flatpickr

Nun erstellen wir eine Komponente, die Flatpickr verwendet:

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="Datum auswählen..." />;
}

export default DatePicker;

Dieser Code:

1. Erstellt eine Ref für unser Eingabeelement.
2. Verwendet useEffect, um Flatpickr auf unser Eingabeelement zu initialisieren, wenn die Komponente gerendert wird.
3. Richtet Flatpickr mit einigen Optionen ein, einschließlich einer Callback-Funktion, wenn ein Datum ausgewählt wird.

Sie können nun diese DatePicker-Komponente in Ihrer App verwenden:

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

function App() {
return (
<div>
<h1>Datum auswählen</h1>
<DatePicker />
</div>
);
}

export default App;

jQuery Slick Plugin Integration

Zuletzt sprechen wir über die Integration von jQuery-Plugins, insbesondere das Slick Carousel-Plugin. Jetzt weiß ich, was ihr denkt - "jQuery? Ist das nicht outdated?" Manchmal sind alte Werkzeuge die besten für den Job!

Setting Up Slick

Zuerst müssen wir jQuery und Slick installieren:

npm install jquery slick-carousel

Nun erstellen wir eine Slider-Komponente:

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;

Dieser Code:

1. Importiert jQuery und das Slick Carousel-Plugin.
2. Erstellt eine Ref für unseren Slider-Container.
3. Verwendet useEffect, um den Slick Carousel zu initialisieren, wenn die Komponente gerendert wird.
4. Gibt ein div mit etwas Slide-Inhalt zurück.

Sie können nun diese Slider-Komponente in Ihrer App verwenden:

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

function App() {
return (
<div>
<h1>Mein toller Slider</h1>
<Slider />
</div>
);
}

export default App;

Conclusion

Und da habt ihr es, Leute! Wir haben durch das Land der React-Integration gereist, von der Erstellung von Roots bis hin zu Refs und sogar bis zur Verwendung von jQuery-Zauber. Denkt daran, die Integration von Bibliotheken dreht sich darum, die Fähigkeiten von React zu erweitern, wie das Hinzufügen von Superkräften zu euren bereits tollen React-Fähigkeiten.

Hier ist eine schnelle Zusammenfassung der Methoden, die wir behandelt haben:

Methode	Anwendungsfall	Beispiel
CreateRoot	Einrichtung der Haupt-React-App	Chart.js Integration
Ref-basiert	Zugriff auf spezifische DOM-Elemente	Flatpickr Datumswähler
jQuery Plugin	Verwendung von jQuery-basierten Bibliotheken	Slick Carousel

Weiter üben, weiter erkunden und vor allem: Viel Spaß mit React! Wer weiß, welche tollen Apps ihr als nächstes bauen werdet? Frohes Coden!

Credits: Image by storyset