// class component

// import React, { Component } from 'react'

// export default class App extends Component {

// state = {
// name : "yaso krishna",
// }
// render() {
// return (
// <div>
// <h2>welcome to {this.state.name}</h2>
// </div>
// )
// }
// }

// function component:

// import React, {useState} from 'react'

// const App = () => {

// const [name, Name] = useState("yaso");
// const [age, Age] = useState(21);
// const [mobileno, number] = useState("9182828173")
// return (
// <div>
// <h2>{name} {age} {mobileno}</h2>
// </div>
// )
// }

// export default App

// states

// import React, { Component } from 'react'

// export default class App extends Component {

// state = {
// name: "Yaso"
// }
// render() {
// return (
// <div>
// <center>
// <h2>Welcome to my App created by {this.state.name}</h2>
// </center>
// </div>
// )
// }
// }
// props:

// getting the output from other component

// import React, { Component } from 'react';

// import Props from './Props';
// export default class App extends Component {
// state = {
// name: "Krishna"
// }
// render() {
// return (
// <div>
// <center>
// <Props />
// </center>
// </div>
// )
// }
// }

// passing parameter from one component to other component

// import React, { Component } from 'react';

// import Props from './Props';
// export default class App extends Component {
// state = {
// name: "Krishna"
// }
// render() {
// return (
// <div>
// <center>
// <Props name = {this.state.name}/>
// </center>
// </div>
// )
// }
// }

// styling css in react js:

//Two types:

// 1. inline styling: applied in same file

// 2. outline styling: a new css file is created and linked to apply the styling to
the file

// Example: for outline css

// import React from 'react';

// import "./App.css";
// const App = () => {
// return (
// <div className= "container">
// <h2>Welcome to my React App</h2>
// </div>
// )
// }

// export default App

// Example: for inline css styling

// for inline styling we need to use two curly braces for styling

// import React from 'react';

// const App = () => {
// return (
// <div style={{margin:"10px"}}>
// <h2 style={{color:"chocolate", backgroundColor:"lightgreen",
padding:"50px", textAlign:"center"}}>Welcome to my React App</h2>
// </div>
// )
// }

// export default App

// Another way: to assing the styling to a variable

// import React from 'react';

// const App = () => {
// const styling = {
// color:"chocolate",
// backgroundColor:"lightgreen",
// padding:"50px",
// textAlign:"center"
// }
// return (
// <div style={{margin:"10px"}}>
// <h2 style={styling}>Welcome to my React App</h2>
// </div>
// )
// }

// export default App

// Onclick event Handler

// import React from 'react'

// const App = () => {

// return (
// <div>
// <button onClick={()=>{console.log("clicked")}}>Click Here</button>
// </div>
// )
// }

// export default App

// usestate

//Example:

// import React, {useState} from 'react'

// const App = () => {

// // const [name, setName] = useState("yaso krishna");
// const [count, setCount] = useState(0);
// return (
// <div>
// <center>
// <h1>{count}</h1>
// <button onClick={() => setCount(count+1)}>Change</button>
// </center>
// </div>
// )
// }

// export default App

// Useeffect: it is used to execute a function after another function gets executed

// like a rule.
// it executes after the return statement gets executed
//Example:

// before using useEfeect

// import React, { useState } from 'react'

// const App = () => {

// const [count, setCount] = useState(0);
// return (
// <div>
// <p>You Clicked {count} times</p>
// <button onClick={() => setCount(count+1)}>Click me</button>
// </div>
// );
// }

// export default App

// after using useEffect:

// Example:

// import React, { useState, useEffect } from 'react'

// const App = () => {

// const [count, setCount] = useState(0);
// useEffect(() => console.log(count),[count])// without using dependencies
// return (
// <div>
// <p>You Clicked {count} times</p>
// <button onClick={() => setCount(count+1)}>Click me</button>
// </div>
// );
// }

// export default App

// onChange EventHandler:

// Example:

// import React, {useState} from 'react'

// const App = () => {

// const [user, setUser] = useState("");
// const handler = (event) => {
// setUser(event.target.value); // every change is assigned to setUser
// }
// return (
// <div>
// <input type ="text" placeholder="username" value={user} name="yaso"
// onChange={handler}
// /><br/>
// {user}
// </div>
// );
// }

// export default App

// onSubmit {} Handler :
//Def: it is used to submit data from backend using the onSubmit

// Example:

// import React, {useState} from 'react'

// const App = () => {

// const [data, setData] = useState({
// username:'',
// password:'',
// })
// const {username, password} = data;
// const onChange = e => {
// setData({...data,[e.target.name]:[e.target.value]})
// }
// const submitHandler = e => {
// e.preventDefault();
// console.log(data);
// }
// return (
// <div>
// <center>
// <form onSubmit={submitHandler}>
// <input type='text' name='username' value={username}
// onChange={onChange} placeholder='Username'/><br/>

// <input type='password' name='password' value={password}

// onChange={onChange} placeholder='Password'/><br/>
// <button type='submit' name='submit'>Submit</button>
// </form>
// </center>
// </div>
// )
// }

// export default App

// Map function:
// Def: it is used to hydrate a array value to print individual
componet/sepearatly or to pass in to individual component

// syntax:

// Array.map(
// (value, index) => <li> {value} </li>
// )

// Example:
// for arrays:

// import React from 'react'

// const arr = ["react js", "node js", "express js", "angular js" ]
// function App () {
// return (
// <div>
// {
// arr.map(
// (value, index) => <li key={index}>{value}</li>
// )
// }
// </div>
// )
// }

// export default App

// example2: array of objects:

// import React from 'react'

// function App () {
// const arr = [
// {
// id:1,
// title:"react js"
// },
// {
// id:2,
// title:"node js"
// },
// {
// id:3,
// title:"express js"
// },
// {
// id:4,
// title:"angular js"
// }
// ]
// return (
// <div>
// {
// arr.map(
// (value) => <li key={value.id}>{value.title}</li>
// )
// }
// </div>
// )
// }

// export default App

// filter function():

// syntax:

// array.filter(
// (variable) => condition..
//)

// Example 1:

// import React from 'react'

// function App () {
// const names = ["james", "johns", "paul", "ramu", "george"];
// const filtered = names.filter(name => name.includes("j"));
// return (
// <div>
// {
// filtered.map(item => <li>{item}</li>)
// }
// </div>
// )
// }

// export default App

// Example 2: for array of values

// import React from 'react'

// function App () {
// const arr = [10, 20, 30, 40, 50, 60, 70];
// const filtered = arr.filter(item => item>40);
// return (
// <div>
// {
// filtered.map(item => <li>{item}</li>)
// }
// </div>
// )
// }

// export default App

// export vs export default:

// syntax:

// export --> import{compoent}

// export default --> import component
// Example: for export default

// import React from 'react'

// import Header from './components/Header';
// import Home from './components/Home';
// import Footer from './components/Footer';
// function App () {
// return (
// <div>
// <Header />
// <Home />
// <Footer />
// </div>
// )
// }

// export default App

// Example: for export

// import React from 'react'

// import {Header} from './components/Header';
// import {Home} from './components/Home';
// import {Footer} from './components/Footer';
// function App () {
// return (
// <div>
// <Header />
// <Home />
// <Footer />
// </div>
// )
// }

// export default App

// Login form submit in react fro backend:

// onClick, onChange & onSubmit eventHandlers

// useState() - react Hooks
// Object destructuring

// Example:

// import React, {useState} from 'react'

// const App = () => {

// const [data, setData] = useState({
// username:"",
// password:""
// })
// const {username, password} = data;// destructuring the values to assign to the
data.
// const changeHandler = e => {
// setData({...data,[e.target.name]:[e.target.value]}) // spread operator
// }
// const submitHandler = e => {
// e.preventDefault();
// console.log(data);
// }
// return (
// <div>

// <center>
// <form onSubmit={submitHandler}>
// <input type='text' name='username' value={username}
onChange={changeHandler} /><br/>
// <input type='password' name='password' value={password}
onChange={changeHandler}/><br/>
// <input type='submit' name='submit'/>
// </form>
// </center>
// </div>
// )
// }

// export default App

// Sign up form

//prerequisites:
// onClick, onChange & onSubmit eventHandlers
// useState() - react Hooks
// Object destructuring

//Example:

// import React, {useState} from 'react'

// const App = () => {

// const [data, setData] = useState({
// username:"",
// email:"",
// password:"",
// confirmPassword:""
// })
// const {username, email, password, confirmPassword} = data;// destructuring
// const changeHandler = e => {
// setData({...data,[e.target.name]:e.target.value});
// }
// const Submit = e => {
// e.preventDefault();
// if(password === confirmPassword){
// console.log(data);
// // alert("Account Successfully Created");
// }
// else{
// console.log("Enter the Password Correctly to Craete an Account");
// }
// }
// return (
// <div>
// <center>
// <form onSubmit={Submit}>
// UserName: <input type='text' name='username' value={username}
onChange={changeHandler}/><br/>
// Email: <input type='email' name='email' value={email}
onChange={changeHandler}/><br/>
// Password: <input type='password' name='password' value={password}
onChange={changeHandler}/><br/>
// Confirm Password: <input type='password' name='confirmPassword'
value={confirmPassword} onChange={changeHandler}/><br/>
// <input type='submit'/>
// </form>
// </center>
// </div>
// )
// }

// export default App

// Form validation:

// example:

// import React, {useState} from 'react'

// const App = () => {

// const [data, setData] = useState({
// username:"",
// email:"",
// password:"",
// confirmPassword:""
// })
// const {username, email, password, confirmPassword} = data;// destructuring
// const changeHandler = e => {
// setData({...data,[e.target.name]:e.target.value});
// }
// const Submit = e => {
// e.preventDefault();
// if (username.length <= 5)
// {
// alert("Username must be altleast 5 Characters");
// }
// else if (password !== confirmPassword)
// {
// alert("Passwords are Not Matching");
// }
// else{
// console.log(data);
// }
// }
// return (
// <div>
// <center>
// <form onSubmit={Submit}>
// <input type='text' placeholder='User Name' name='username'
value={username} onChange={changeHandler}/><br/>
// <input type='email' placeholder='Email' name='email' value={email}
onChange={changeHandler}/><br/>
// <input type='password' placeholder='Password' name='password'
value={password} onChange={changeHandler}/><br/>
// <input type='password' placeholder='Confirm Password'
name='confirmPassword' value={confirmPassword} onChange={changeHandler}/><br/>
// {password !== confirmPassword ?<p style={{"color":"red"}}>Passwords
Are Not Matching</p>:null}
// {password === confirmPassword ? <p style={{"color":"green"}}>Password
Is Matching</p>:null}
// <input type='submit'/>
// </form>
// </center>
// </div>
// )
// }

// export default App

// calculator app:

// example:

// import React, {useState} from 'react'

// import "./App.css";
// const App = () => {
// const [input, setInput] = useState("");
// const [result, setResult] = useState(0);
// const handler = e => {
// setInput(e.target.value);
// }
// return (
// <div>
// <center>
// <input type='text' value={input} onChange={handler}/><br/>
// <button onClick={() => setResult(eval(input))}>Result</button>
// <h4>Result is : {result} </h4>

// <button onClick={ () => setInput(input+'1')}>1</button>

// <button onClick={ () => setInput(input+'2')}>2</button>
// <button onClick={ () => setInput(input+'3')}>3</button>
// <button onClick={ () => setInput(input+'4')}>4</button>
// <button onClick={ () => setInput(input+'5')}>5</button><br/>

// <button onClick={ () => setInput(input+'6')}>6</button>

// <button onClick={ () => setInput(input+'7')}>7</button>
// <button onClick={ () => setInput(input+'8')}>8</button>
// <button onClick={ () => setInput(input+'9')}>9</button>
// <button onClick={ () => setInput(input+'0')}>0</button><br/>

// <button onClick={ () => setInput(input+'+')}>+</button>

// <button onClick={ () => setInput(input+'-')}>-</button>
// <button onClick={ () => setInput(input+'*')}>*</button>
// <button onClick={ () => setInput(input+'/')}>/</button>
// <button onClick={ () => setInput("")}>clr</button><br/>
// </center>
// </div>
// )
// }

// export default App

// Fetch using react application from API :

// Example:

// import React,{useEffect, useState} from 'react'

// const App = () => {

// const [data, setData] = useState([]);
// useEffect(() => {
// fetch('https://jsonplaceholder.typicode.com/todos').then(
// response => response.json()
// ).then(json => setData(json))
// }, [])
// return (
// <div>
// { data. map(item => <li key={item.id}>{item.title}</li>)}
// </div>
// )
// }

// export default App

// Axios() in react js to get API:
// it is a library to get access form api to do postrequest, get request, delete
request in http modules
// Example:

// import React, {useEffect, useState} from 'react'

// import axios from 'axios';
// const App = () => {
// const [data, setData] = useState([])
// useEffect(() => {
// axios.get("https://jsonplaceholder.typicode.com/todos").then(
// response => setData(response.data)
// )
// },[])
// return (
// <div>
// {
// data.map( item => <li key={item.id}>{item.title}</li>)
// }
// </div>
// )
// }

// export default App

// fire base realtime database for form

// import React, {useState} from 'react';

// import axios from 'axios';
// const App = () => {
// const [data, setData] = useState({
// username:"",
// email:"",
// password:"",
// confirmPassword:""
// })
// const {username, email, password, confirmPassword} = data;// destructuring
// const changeHandler = e => {
// setData({...data,[e.target.name]:e.target.value});
// }
// const Submit = e => {
// e.preventDefault();
//
axios.post("https://myproject-8f7dc-default-rtdb.firebaseio.com/register.json",
// data).then(() => alert("Submitted Successfully"))
// }
// return (
// <div>
// <center>
// <form onSubmit={Submit}>
// <input type='text' placeholder='Full name' name='username'
value={username} onChange={changeHandler}/><br/>
// <input type='email' placeholder='Email' name='email' value={email}
onChange={changeHandler}/><br/>
// <input type='password' placeholder='Password' name='password'
value={password} onChange={changeHandler}/><br/>
// <input type='password' placeholder='Confirm Password'
name='confirmPassword' value={confirmPassword} onChange={changeHandler}/><br/>
// <input type='submit'/>
// </form>
// </center>
// </div>
// )
// }

// export default App

// react router

// Example