HOW TO START A PROJECT IN REACT?

How to start a project in a react

• 1st we have to type the comment and create the react project

• the comments are:
  

npm create vite@latest [npm is a node package manager]
|
project name 
|
framework selection
|
variant selection
|
it will ask you want to install the npm if you want means click yes otherwise no
|
the project folder is created successfully

• In React only it install the some of the packages and inbuild main.jsx,app.jsx,index.html,app.css,index.css files are having

• We can modify them for our proposed project.

WHAT IS JSX?

• JSX is a JavaScript XML

• In JSX we can write HTML inside of the JavaScript code

DIFFERENCE BETWEEN HTML AND XML

COUNTER PROJECT

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

• In App.jsx i just call the Counter.jsx file

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

function App() {


  return (
   <Counter/>
  )
}

export default App

Main.jsx:

• In Main.jsx i 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>,
)

• In all the react project there is only one html file only

output: