react basic added

src/App.js

@@ -1,25 +1,46 @@
+import React from 'react';
+import { useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Student from './Student';
 
 function App() {
+  const [data, setData] = useState(null)
+  const [print, setPrint] = useState(false)
+  function getData(val){
+    console.log(val.target.value);
+    setData(val.target.value)
+  }
+
+  console.log("-------------")
+  // return (
+  //   <div className="App">
+  //     <h1>{data}</h1>
+  //     <button onClick={updateData}>Update Data</button>
+  //   </div>
+
+  // );
+  // return (
+  //   <div className="App">
+  //     <h1>Props in React</h1>
+  //     <Student name={name} email="[email protected]" other={{address:"delhi",mobile:"000"}} />
+  //     <Student name="Peter" email="[email protected]" other={{address:"delhi1",mobile:"001"}}/>
+  //     <Student name="John" email="[email protected]" other={{address:"delhi2",mobile:"002"}}/>
+  //     <button onClick={()=>{setData("Manish")}}>Update Details</button>
+  //   </div>
+  // );
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className='App'>
+      {
+        print?
+        <h1>{data}</h1>
+        :null
+      }
+      <h1>{data}</h1>
+      <input type="text" onChange={getData}></input>
+      <button onClick={()=>setPrint(true)}>Print Data</button>
     </div>
-  );
+  )
 }
 
 export default App;

src/Student.js

@@ -0,0 +1,13 @@
+function Student(props) {
+    console.log(props);
+    return (
+        <div style={{ backgroundColor: "skyblue" }}>
+            <h1>Hello {props.name}</h1>
+            <h2>Email : {props.email}</h2>
+            <h3>Address : {props.other.address}</h3>
+            <h4>Mobile : {props.other.mobile}</h4>
+        </div>
+    )
+}
+
+export default Student;

src/Users.js

@@ -0,0 +1,9 @@
+function Users() {
+    return (
+      <div className="App">
+        <h1>Hello Users</h1>
+      </div>
+    );
+  }
+
+  export default Users;

src/index.js

@@ -2,12 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import Users from './Users';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
+    <Users />
   </React.StrictMode>
 );