React JS

JSX
JSX is a powerful syntax extension in React that makes writing and managing UI components easier and more readable
JSX improves code clarity by combining structure and logic in one place
React applications are usually built around a single HTML element

Counter
Counter.jsx

import {useState} from "react"
function Counter(){
    const [count,setCount]=useState(0)
    function incre(){
        setCount(count+1)
    }
    function decre(){
        setCount(count-1)
    }
    function reset(){
        setCount(0)
    }

    return(
        <div>
            <h1>Counter:{count}</h1>
            <button onClick={incre}>+</button>
            <button onClick={decre}>-</button>
            <button onClick={reset}>reset</button>
        </div>
    )
}
export default Counter

App.jsx
it just call the Counter.jsx file

import './App.css'
import Counter from './Counter'

function App() {


  return (
   <Counter/>
  )
}

export default App

Main.jsx
it call the App.jsx file

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)