ReactJS - 整合其他庫

你好，未來的 React 開發者們！我很興奮能帶領你們進入 React 與其他庫整合的精彩世界。作為一位教了多年計算機科學的老師，我可以告訴你們，這項技能就像是一位大廚——知道如何混合不同的食材（或者在我們的例子中，是庫）來創造出令人驚艷的作品！

為什麼要將 React 與其他庫整合？

在我們深入之前，讓我們先聊聊我們為什麼想要將 React 與其他庫混合。想像你正在建造一個樹屋。React 是你堅固的地基和牆壁，但有時候你需要特殊的工具來製作窗戶或者一個精美的滑梯。這就是其他庫的用處——它們添加了 React 一開箱不提供的額外功能。

CreateRoot 基於整合

讓我們從 CreateRoot 方法開始，這就像是我們樹屋的主要入口。

CreateRoot 是什麼？

CreateRoot 是一種現代的方式來渲染 React 組件。這就像是我們 React 树的種子開始生長。

以下是一個簡單的例子：

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

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

在這段代碼中：

1. 我們從 React DOM 中導入 createRoot。
2. 我們在我們的 HTML 中找到一個容器（通常是具有 id 'root' 的 div）。
3. 我們使用這個容器來創建一個 root。
4. 我們在這個 root 中渲染我們的主要 App 組件。

整合一個圖表庫

現在，讓我們說我們想在 React 應用程序中添加一個很酷的圖表。我們將使用一個叫做 Chart.js 的庫作為例子。

首先，安裝 Chart.js：

npm install chart.js

現在，讓我們創建一個使用 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: ['紅色', '藍色', '黃色', '綠色', '紫色', '橙色'],
datasets: [{
label: '投票數',
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;

這段代碼：

1. 創建一個功能組件。
2. 使用 useRef 來創建一個指向我們 canvas 元素的引用。
3. 使用 useEffect 在組件挂载時創建一個新的 Chart。
4. 返回一個 canvas 元素，Chart.js 將在其中渲染。

現在你可以在你們的主要 App 中使用這個組件：

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

function App() {
return (
<div>
<h1>我的超級圖表</h1>
<ChartComponent />
</div>
);
}

export default App;

Ref 基於整合

現在，讓我們來討論基于 Ref 的整合。在 React 中，Refs 就像是我們元素的名稱標籤——它們幫助我們找到並與 UI 的特定部分交互。

Refs 是什麼？

Refs 提供了一種方式來訪問在渲染方法中創建的 DOM 節點或 React 元素。它們就像是到你組件特定部分的直達線路。

以下是一個簡單的例子：

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

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

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

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

在這段代碼中：

1. 我們使用 useRef 創建一個引用。
2. 我們將這個引用附加到我們的 input 元素。
3. 在 useEffect 中，我們使用引用來在組件挂载時聚焦於 input。

整合一個日期選擇器庫

讓我們使用 refs 整合一個叫做 Flatpickr 的日期選擇器庫：

首先，安裝 Flatpickr：

npm install flatpickr

現在，讓我們創建一個使用 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="選擇日期..." />;
}

export default DatePicker;

這段代碼：

1. 創建一個引用為我們的 input 元素。
2. 使用 useEffect 在組件挂载時在我們的 input 上初始化 Flatpickr。
3. 設置 Flatpickr 的一些選項，包括當日期被選擇時的回調函數。

現在你可以在你們的應用程序中使用這個日期選擇器組件：

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

function App() {
return (
<div>
<h1>選擇一個日期</h1>
<DatePicker />
</div>
);
}

export default App;

jQuery Slick 插件整合

最後，讓我們來討論整合 jQuery 插件，特別是 Slick 車輪插件。現在，我知道你在想什麼——“jQuery？那不是已經過時的東西了嗎？”有時候，老工具對於工作來說是最適合的！

設置 Slick

首先，我們需要安裝 jQuery 和 Slick：

npm install jquery slick-carousel

現在，讓我們創建一個 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;

這段代碼：

1. 導入 jQuery 和 Slick 車輪插件。
2. 創建一個引用為我們的滑块容器。
3. 使用 useEffect 在組件挂载時初始化 Slick 車輪。
4. 返回一個 div，其中包含一些滑块內容。

現在你可以在你們的應用程序中使用這個滑块組件：

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

function App() {
return (
<div>
<h1>我的超級滑块</h1>
<Slider />
</div>
);
}

export default App;

結論

這就是全部，各位！我們一起穿越了 React 整合的領地，從創建根到 refs，再到甚至帶來一些 jQuery 魔法。記住，整合庫是關於擴展 React 的能力，就像為你已經很棒的 React 技能添加超能力一樣。

以下是我們所涵蓋的方法的快速總結：

方法	使用案例	示例
CreateRoot	設置主要的 React 應用程序	Chart.js 整合
Ref-based	訪問特定的 DOM 元素	Flatpickr 日期選擇器
jQuery 插件	使用基于 jQuery 的庫	Slick 車輪

繼續練習，繼續探索，最重要的是，繼續在 React 中享受樂趣！誰知道你會建造出什麼令人驚艷的應用程序呢？快樂編程！

Credits: Image by storyset