React (noto anche come React.js o ReactJS ) è un web framework open-source , front-end , JavaScript [ 1] interfacce utente . È mantenuto da Meta (già Facebook) e da una comunità di singoli sviluppatori e aziende.[ 2] [ 3] [ 4]
React può essere utilizzato come base nello sviluppo di applicazioni a pagina singola ma è utilizzabile anche su mobile tramite React Native , una libreria sempre sviluppata da Meta che tramuta i componenti React in componenti nativi (iOS e Android )[ 5] DOM , pertanto la creazione di applicazioni React richiede generalmente l'uso di librerie aggiuntive per lo state management e il routing.[ 6] [ 7] [ 8] [ 9] Next.js .[ 10]
Di seguito è riportato un esempio rudimentale di utilizzo di React in HTML con JSX e JavaScript.
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
const Saluto = () => {
return (
< div className = "hello-world" >
< h1 > Ciao , mondo ! </ h1 >
</ div >
);
};
const App = () => {
return < Saluto />;
};
const root = ReactDOM . createRoot ( document . getElementById ( 'root' ));
root . render (
< React . StrictMode >
< App />
</ React . StrictMode >
);
in base al documento HTML di seguito.
{
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Mobile-friendly input handler for Enter key
document.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
e.preventDefault();
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Search button click handler
document.addEventListener('click', e => {
const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]');
if (searchButton) {
e.preventDefault();
const searchForm = searchButton.closest('form');
if (searchForm) {
const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
}
});
});
