How can I use even listener in reactjs

See more:

Javascript

web

ReactJS

in tutorials I'm seeing something like that :

import React from 'react';
function App(){ 
  return(
    <div>
    <h1 onClick={functionName}>Hello React</h1>
  </div>
  );

  
}
export default App;

but I think adding "onClick" event to an element is a bad practice , instead we were adding event listener with vanilla JS , but now . I don't know if it is OK or not ?
is there better way or this is what it is ?

What I have tried:

actually I didn't try add event listener because it is not vanilla JS