A lot of people say that it is bad to have both jQuery and React working because they both work on the DOM. But would it be okay if I just used jQuery to change the style properties (e.g. color, border-width, background-color, etc.)? This would be mainly for convenience, as $(.foo) is much easier to use than document.getElementByClassName('foo').
While possible, it probably wouldn't be a good idea - you'd have to make sure that the style changes get applied an all applicable children when the component rerenders.
If you don't like the verboseness of document.getElementByClassName, feel free to abstract it into a function, eg
const $ = selector => document.querySelector(selector)
But it'd be better to avoid native DOM manipulation methods entirely. In React, the state of the application should flow entirely from React's state.
To change the style in the proper React fashion, write it into the JSX. For example:
const App = () => {
const [highlighted, setHighlighted] = React.useState();
return (
<div
className={highlighted ? 'highlighted' : ''}
onClick={() => setHighlighted(true)}
>click</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));.highlighted {
background-color: yellow;
}<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>Or, if you want to set the style directly on the element, rather than using a class:
const App = () => {
const [highlighted, setHighlighted] = React.useState();
return (
<div
style={{
backgroundColor: highlighted ? 'yellow' : ''
}}
onClick={() => setHighlighted(true)}
>click</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>