គ្រប់​ហេតុការណ៍​របស់​ React គឺ​ជា​ហេតុការណ៍​របស់ JavaScript ខុស​គ្នា​នៅ​ត្រង់​ថា ហេតុការណ៍​របស់​ React ត្រូវ​សរសេរ​តាម​បែប​សត្វអូដ្ឋ​ដូចជា onClick, onMouseOver, onMouseOut ជាដើម​។ យ៉ាងណាម៉ិញ គ្រប់​ក្បួន​ភ្ជាប់​ហេតុការណ៍ (event handler) នៅ​ក្នង​កញ្ចប់ React ត្រូវ​ស្ថិត​នៅចន្លោះ​សញ្ញា { } ដែល​ខុស​ពី​ក្បួន​ភ្ជាប់​ហេតុការណ៍​របស់​ JavaScript ដែល​ត្រូវ​ស្ថិត​នៅ​ចំន្លោះ​សញ្ញា “ ” ឬ ‘ ' ។

import './App.css'
import './styles/global.css'
import Header from './components/header'

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  )
}

export default App

import '../styles/header.css'
import {useState} from 'react'

function Header(){

    const [title, setTitle] = useState('កម្មវិធី React')

    return (
        <div className="Header ">
            <div class='wrapper region'>
                <div class='logo' onMouseOver={()=>setTitle('កម្មវិធី​កំពុង​ដំណើរការ')} onMouseOut={()=>setTitle('កម្មវិធី React')}>
                    <a>{title}</a>
                </div>

                <form class='search'>
                    <input type="text" name='q' required />
                    <input type='submit' value='បញ្ជូន' />
                </form>

                <div class='logout'>ទំព័រ​ដើម | ចូល​ក្នុង</div>
            </div>
        </div>
    )
}

export default Header

GitHub: https://github.com/Sokhavuth/react

Heroku: https://khmerweb-react.herokuapp.com/