между jquery и react разница принципиальная.
jQuery — это библиотека, упрощающая некоторые действия, которые должны быть простыми, но почему-то в нативном js таковыми не являющиеся. Пример:
let links = Array.from(document.querySelectorAll(".js-tab-link"));
for(let link of links) {
link.addEventListener("click", e => {
e.preventDefault();
for(let l of links){ l.classList.remove("active"); }
link.classList.add("active");
});
}
то же самое с использованием jQuery:
let $links = $(".js-tab-link");
$links.on("click", function(e){
e.preventDefault();
$links.removeClass("active");
$(this).addClass("active");
});
В принципе похоже, но с использованием jQuery немного проще, немного более читаемо.
React.js — это фреймворк, позволяющий представить страницу как набор компонентов, обладающих свойствами и состоянием, обеспечивающий одностороннюю реактивную связь. Почти то же самое с использованием react.js будет выглядеть так:
const TabLink = ({label, active, callback}) => (
<div
className={classNames("tabLink", {"active": active})}
onClick={callback}
>{label}</div>
);
class Tabs extend Component {
state = {
active: 0,
tabs: [
'пункт',
'другой пункт'
]
};
render(){
return(
<div className="tabSet">
{this.state.tabs.map((item, index) =>
<TabLink
label={item}
active={index==this.state.active}
callback={index => this.setState({active: index})}
/>
)}
</div>
);
}
}
Реакт удобно использовать, если есть хоть сколько-нибудь сложная клиентская логика. Тогда он помогает структурировать и упорядочить. Когда на клиентской стороне полтора мелких действия, пишите их при помощи jQuery.
