Add files via upload

opensource-emr · web-flow · commit e09099e99835 · 2021-10-31T19:38:38.000+05:30
diff --git a/Lab2(JsxAndBabel).html b/Lab2(JsxAndBabel).html
@@ -12,7 +12,11 @@
     <div id="app"></div>
     <script type="text/babel">
     ReactDOM.render(
-      <h1>Hello world, this is written is JSX!</h1>,
+     <div> 
+        <h1>Hello world, this is written is JSX!</h1>
+        <p> Hello </p>
+      </div>
+      ,
       document.getElementById('app')
     );
     </script>
diff --git a/Lab21.txt b/Lab21.txt
@@ -0,0 +1 @@
+Deloyment
diff --git a/Lab22.txt b/Lab22.txt
@@ -0,0 +1,61 @@
+import logo from './logo.svg';
+import './App.css';
+import React, { useState } from "react";
+
+function App() {
+  const [customer, _setCustomer] = useState({ name: "", code: "" });
+  const [customers, _setCustomers] = useState([]);
+
+  const setCustomer = e => {
+          _setCustomer(prevState => ({
+              ...prevState,
+                [e.target.name]: e.target.value
+          }));
+  };
+  const setCustomers = e => {
+    _setCustomers(prevState => (
+          [...prevState, customer]
+          ));
+        
+      _setCustomer(prevState => ({
+        ...prevState,
+         name: "", code: "" 
+    }));
+    
+      fetch('https://localhost:44393/Home/Submit', {
+        method: 'POST',
+        headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(customer)
+        })
+  };
+  return (
+    <div className="App">
+        {customer.name} {customer.code}
+       <input  value={customer.name} onChange={setCustomer} type="text" name="name"/>
+       <input  value={customer.code} onChange={setCustomer} type="text" name="code"/>
+       <input value="Add" type="button" onClick={setCustomers}/><br>
+       </br>
+       <table>
+       <thead>
+         <tr>
+           <td>Name</td>
+           <td>code</td>
+         </tr>
+        </thead>
+        <tbody>
+         {customers.map((x,index) => (
+           <tr key={index}>
+            <td>{x.name}</td>
+            <td>{x.code}</td>
+          </tr>
+        ))}
+        </tbody>
+       </table>
+      </div>
+  );
+}
+
+export default App;
diff --git a/Lab4(FunctionalComponents).html b/Lab4(FunctionalComponents).html
@@ -14,6 +14,7 @@
     class ClassComponent extends React.Component {
           CallMe(){
             alert("Hello");
+            
           }
           render() 
           {
@@ -40,7 +41,6 @@ <h1> Functions </h1>
           </div>
         );
     }
-    
    ReactDOM.render(
       <FirstComponent />,
       document.getElementById('app')
diff --git a/Lab6(LambdaExpressions).html b/Lab6(LambdaExpressions).html
@@ -8,7 +8,7 @@
 <body>
     <script>
         var arr = [1,2,3,4];
-    var t1 = arr.filter(value => value > 3);
+    var t1 = arr.filter((value) => value > 3);
 
             console.log(t1);
     </script>
diff --git a/Lab7(FunctionStatesandProps).html b/Lab7(FunctionStatesandProps).html
@@ -12,9 +12,9 @@
 
 <script type="text/babel">
 function FirstComponent(props){
-  const [counter, increment] = React.useState(0);
+  const [counter, increment] = React.useState(10);
   const increm = event => increment(counter + 1);
-    
+ // props.name = "hello";
     return(
       <div>
         <p>{props.name}</p>
diff --git a/Lab9(LifeCyclewithFunctions).html b/Lab9(LifeCyclewithFunctions).html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React tutorial</title>
+<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
+  </head>
+  <body>
+    <a href="SomePage.html">Some page</a><br>
+    <div id="app"></div><br>
+
+<script type="text/babel">
+function FirstComponent(props){
+  const [counter, increment] = React.useState(0);
+  const increm = event => increment(counter+1);
+  
+  React.useEffect(() => {
+      console.log("Component loaded");
+    }, []); 
+    
+    React.useEffect(() => {
+      console.log("Any change....");
+    });
+    
+    React.useEffect(() => {
+      console.log("Only conter value changed");
+    }, [counter]);
+
+    React.useEffect(() => {
+      return () => {
+      alert("Component unloaded");
+      }
+    }, []);
+    
+    return(
+      <div>
+        <p>{props.name}</p>
+        <p>{counter}</p>
+        <button onClick={increm}>Click</button>
+      </div>
+    )
+}
+ReactDOM.render(
+      <FirstComponent name="Shiv"/>,
+      document.getElementById('app')
+    );
+    
+</script>
+  </body>
+</html>
diff --git a/SomePage.html b/SomePage.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React tutorial</title>
+<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
+  </head>
+  <body>
+  Some page
+  </body>
+</html>
diff --git a/my-app.zip b/my-app.zip

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`class ClassComponent extends React.Component {`
`15`	`15`	`CallMe(){`
`16`	`16`	`alert("Hello");`
	`17`	`+`
`17`	`18`	`}`
`18`	`19`	`render()`
`19`	`20`	`{`
`@@ -40,7 +41,6 @@ <h1> Functions </h1>`
`40`	`41`	`</div>`
`41`	`42`	`);`
`42`	`43`	`}`
`43`		`-`
`44`	`44`	`ReactDOM.render(`
`45`	`45`	`<FirstComponent />,`
`46`	`46`	`document.getElementById('app')`