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 | varia
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:
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes â full credit and traffic to the original publisher.