app js

import FeedbackItem from "./components/FeedbackItem";<div className="container"><FeedbackItem /></div>

FeedbackItem.jsx

import {useState} from 'react';function FeedbackItem() {const [rating, setRating] = useState(7)const [comment, setComment] = useState("good")const handleClick = () => {setRating(1)setComment("bad")}return (<div className="card"><div className="num-display">{rating}</div><div className="text-display">{comment}</div><button onClick={handleClick}>Click</button></div>)}export default FeedbackItem;

use previous value

const handleClick = () => {setRating((prev) => {return prev + 1;})}

--

--

props and component

#header.jsxfunction Header({text}) {return (<header><div className="container"><h2>{text}</h2></div></header>)}

appjs

import Header from "./components/Header";function App(){return (<>{/* component */}<Header text="hello world" /><div className="container"><h1>My App</h1></div></>)}export default App

--

--


function App(){
const title = "Blog Post";const body = "This is my blog post";const comments = [{id: 1, text: 'Comment one'},{id: 2, text: "Comment two"},{id: 3, text: "Comment three"},]const loading = 0;const showComments = true;const commentBlock =(<div className="comments"><h3>Comments ({comments.length})</h3><ul>{comments.map((comment, index) => (<li key={comment.id}>{comment.text}</li>))}</ul></div>);if(loading) return <h1>Loading...</h1>return (<div className="container"><h1>{title.toUpperCase()}</h1><p>{body}</p>{showComments ? 'yes' : 'no'}{/* condition , the yes else no */}{/* condition is true no else*/}{showComments && commentBlock}</div>)}// return React.createElement("div",{ className: "container" },// React.createElement("h1", {}, "My App"))export default App

test react var

--

--