Exercice React : implémentez un composant de recherche d'occurrences d'une sous-chaîne dans un texte. Exigences : chargement du texte depuis une API lors du premier rendu, indication de chargement, gestion des erreurs, recherche d'occurrences sans tenir compte de la casse, mise en surbrillance des occurrences trouvées, affichage du nombre total d'occurrences, bouton pour charger du texte supplémentaire.

jsx import React, { useState, useEffect } from 'react';

function SearchComponent() { const [text, setText] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [query, setQuery] = useState(''); const [matches, setMatches] = useState([]);

const fetchText = async () => { setLoading(true); setError(null); try { const response = await fetch('/api/text'); if (!response.ok) throw new Error('Ошибка загрузки'); const data = await response.text(); setText(prev => prev + data); } catch (e) { setError(e.message); } finally { setLoading(false); } };

useEffect(() => { fetchText(); }, []);

useEffect(() => { if (!query) { setMatches([]); return; } const regex = new RegExp(query, 'gi'); const found = []; let match; while ((match = regex.exec(text)) !== null) { found.push({ start: match.index, end: regex.lastIndex }); } setMatches(found); }, [query, text]);

const highlightText = () => { if (!matches.length) return text; const parts = []; let lastIndex = 0; matches.forEach(({ start, end }, i) => { parts.push(text.slice(lastIndex, start)); parts.push(<mark key={i}>{text.slice(start, end)}</mark>); lastIndex = end; }); parts.push(text.slice(lastIndex)); return parts; };

return ( <div> {loading && <p>Загрузка...</p>} {error && <p style={{ color: 'red' }}>{error}</p>} <input type="text" placeholder="Поиск" value={query} onChange={e => setQuery(e.target.value)} /> <button onClick={fetchText} disabled={loading}>Загрузить ещё</button> <p>Найдено вхождений: {matches.length}</p> <div style={{ whiteSpace: 'pre-wrap' }}>{highlightText()}</div> </div> ); }

export default SearchComponent;