Day-2 of Learning React.js

javascript

import React, { useState } from "react";

import React → brings React library so you can use JSX (HTML-like code in JavaScript).
{ useState } → a special React hook that lets you add state (data that changes) inside a function component.

javascript

function App() {

javascript

   const [value, setValue] = useState("");

useState("") → creates a state variable with an initial value of empty string "".
value → holds the current state (whatever is typed in the input box).
setValue → function to update/change the state.

👉 Think of it like:

javascript

const submitForm = (e) => {
  e.preventDefault();
  alert(value);
  setValue("");
}

submitForm runs when you press the submit button.
e.preventDefault() → stops the default form behavior (like refreshing the page or redirecting).
alert(value) → shows a popup with the text you typed.
setValue("") → clears the input box after submitting.

javascript

return (
  
     setValue(e.target.value)} value={value} />
    {value}
    
  
);

<form onSubmit={submitForm}> → form element that calls submitForm when submitted.
<input ... />
- onChange={(e) => setValue(e.target.value)} → updates value whenever you type.
- value={value} → makes the input a controlled component (its value is controlled by React state).
<div>{value}</div> → shows live text as you type (because it reads from value).
<button>submit</button> → button to submit the form.

javascript

export default App;

javascript

// export default ka matalb entire file
// export ka matalb indivusual
// we wrap the js code in {} curly brases