Posts

How to Create an Email Sender AI Agent Using n8n (Step-by-Step Guide)

-
 Automation tools are rapidly changing how businesses manage communication. Instead of manually drafting emails, you can build an AI Email Sender Agent that writes and sends emails automatically based on chat instructions. Using n8n , you can create a powerful AI workflow that understands your message, generates a professional email using AI, and sends it through Gmail. In this guide, you’ll learn how to create an Email Sender AI Agent using n8n step-by-step . What is an Email Sender AI Agent? An Email Sender AI Agent is an automated system that: • Receives instructions through chat • Uses AI to generate an email message • Sends the email automatically using Gmail For example, you can type a command like: Send an email to client@example.com thanking them for attending the meeting. The AI agent will automatically: Write the email Format it professionally Send it via Gmail This can save significant time for sales teams, support teams, and business owners . Tools Required Before bu...
Post a Comment
Read more

Hight order component (HOC) - React Js

-
 App.js: import React , { useRef , useState } from "react" ; import './App.css' function App () { return (   <div className = "App" >     <h1> HOC </h1>     < HOCRed cmp = { Counter } />     < HOCGreen cmp = { Counter } />     < HOCBlue cmp = { Counter } />   </div> ) } function HOCRed ( props ) {   return <h2 style = { { backgroundColor : 'red' , width : 200 } } > Red < props.cmp /></h2> } function HOCGreen ( props ) {   return <h2 style = { { backgroundColor : 'green' , width : 200 } } > Green < props.cmp /></h2> } function HOCBlue ( props ) {   return <h2 style = { { backgroundColor : 'blue' , width : 200 } } > Blue < props.cmp /></h2> } function Counter () {   const [ count , setCount ]= useState ( 0 )   return <div>             <h3> { count } ...
Post a Comment
Read more

Uncontrolled Component - React Js

-
 App.js: import React , { useRef } from "react" ; import './App.css' function App () {   let inputRef = useRef ( null )   let inputRef2 = useRef ( null )   function formHandle ( e )   {     e . preventDefault ()     console . warn ( "Value of Field 1 :" , inputRef . current . value )     console . warn ( "Value of Text Field 2" , inputRef2 . current . value )     let input3 = document . getElementById ( 'input3' ). value     console . warn ( "Input field 3 value : " , input3 )   } return (   <div className = "App" >     <h1> UnControlled Component </h1>     <form onSubmit = { formHandle } >       <input type = "text" ref = { inputRef } /> <br/><br/>       <input type = "text" ref = { inputRef2 } /><br/> <br/>       <input type = "text" id = "input3" /><...
Post a Comment
Read more

Controlled Component - React Js

-
 App.js: import React , { useState } from "react" ; import './App.css' function App () {   const [ val , setVal ]= useState ( "" ); return (   <div>     <h1> Controlled Component </h1>     <input type = "text" value = { val } onChange = { ( e ) => setVal ( e . target . value ) } />     <h3> Text Value : { val } </h3>   </div> ) } export default App ;
Post a Comment
Read more

forwardRef example - React Js

-
 App.js: import React , { useRef } from "react" ; import './App.css' import Student   from "./Components/Student" ; function App () {   let inputRef = useRef ( null )   function updateinput ()   {     inputRef . current . value = "3000"     inputRef . current . style . color = "red"     inputRef . current . focus ()   } return (   <div>     <h1> Forward Ref Tutorial </h1>     < Student ref = { inputRef } />         <button onClick = { updateinput } > Update Inputbox </button>   </div> ) } export default App ; ----------------------------------- Student.js: import React ,{ forwardRef } from 'react' function Student ( props , ref ) {   return (     <div>         <h3> Student Component </h3>         <input type = "text" ref = { ref } />   ...
Post a Comment
Read more

useRef Hook example in React Js

-
 App.js: import React , { useRef } from "react" ; import './App.css' function App () {   let inputRef = useRef ( null )   function handleInput ()   {     console . warn ( "handleInput Called" )     inputRef . current . value = "2000"     inputRef . current . focus ();     inputRef . current . style . color = "red"   } return (   <div>     <h1> Use Ref Tutorial </h1>     <input type = "text" ref = { inputRef } />     <button onClick = { handleInput } > Handle Input </button>   </div> ) } export default App ;
Post a Comment
Read more

useMemo in React Js

-
 App.js: import React , { useState , useMemo } from "react" ; import './App.css' function App () {   const [ count , setCount ]= useState ( 0 )   const [ item , setItem ]= useState ( 10 )   const multicountMemo = useMemo (     function multiCount ()     {       console . warn ( "multicount" )       return count * 5     }, [ count ]   )   return (     <div className = "App" >       <h1> Use Memo Tutorial </h1>       <h3> Count : { count } </h3>       <h3> Item : { item } </h3>       <h3> Multicountmemo: { multicountMemo } </h3>       <button onClick = { () => setCount ( count + 1 ) } > Update Count </button>       <button onClick = { () => setItem ( item * 10 ) } > Update Item </button>     </...
Post a Comment
Read more

Ref with Example - React Js

-
 App.js: import React , { Component , createRef } from "react" ; import './App.css' class App extends Component {   constructor ()   {     super ()     this . inputRef = createRef ();   }   componentDidMount ()   {     console . warn ( this . inputRef . current . value = "10001" )   }   getVal ()   {     console . warn ( this . inputRef . current . value )     this . inputRef . current . style . color = "red"     this . inputRef . current . style . backgroundColor = "black"   }   render ()   {     return (       <div className = "App" >         <h1> Ref Component </h1>         <input type = "text" ref = {this . inputRef } />         <button onClick = { () =>this . getVal () } > GetRef </button>       </div>   ...
Post a Comment
Read more

Pure Component in React Js

-
 App.js: import React ,{ PureComponent } from "react" ; class App extends PureComponent {   constructor ()   {     super ();     this . state ={ count : 1 }   }   render ()   {     console . warn ( "Check Re-rendring" )     return (       <div>         <h1> App Component: { this . state . count } </h1>         <button onClick = { () =>this . setState ({ count : 1 }) } > Click Me </button>       </div>     )   } } export default App ;
Post a Comment
Read more

Send Data Child to Parent Component - React Js

-
 App.js: import React from "react" ; import './App.css' import { Student } from "./Components/Student" ; function App () {   function alertFunc ( data )   {     alert ( data )   }   const name = "Krishan Dev"   return (     <div className = "App" >     < Student data = { name } alert1 = { alertFunc } />         </div>   ) } export default App ; ---------------------------- Student.js import React from 'react' export const Student = ( props ) => {   const data = "Bhavesh"   return (     <div>       <h6> { props . data } </h6>       <button onClick = { props . alert1 ( data ) } > Click Me </button>     </div>   ) }
Post a Comment
Read more

Nested List in ReactJs - React Js

-
 App.js: import React from "react" ; import { Table } from 'react-bootstrap' import './App.css' function App () {   const Student =[     { name : "Krishan" , email : "krishan@gmail.com" , Address : [       { Hn : "10" , city : "Noida" , Country : "India" },       { Hn : "34" , city : "Delhi" , Country : "India" },       { Hn : "54" , city : "Gurgaon" , Country : "India" },       { Hn : "95" , city : "Mumbai" , Country : "India" }   ]},     { name : "Dev" , email : "dev@gmail.com" , Address : [       { Hn : "10" , city : "Noida" , Country : "India" },       { Hn : "34" , city : "Delhi" , Country : "India" },       { Hn : "54" , city : "Gurgaon" , Country : "India" },       { Hn : "95" , city : ...
Post a Comment
Read more

List with Bootstrap Table - React Js

-
 App.js: import React from "react" ; import { Table } from 'react-bootstrap' import './App.css' function App () {   const Student =[     { name : "Krishan" , email : "krishan@gmail.com" , Phone : 1111 },     { name : "Dev" , email : "dev@gmail.com" , Phone : 2222 },     { name : "Bhavesh" , email : "bhavesh@gmail.com" , Phone : 3333 },     { name : "Brijesh" , email : "brijesh@gmail.com" , Phone : 4444 }   ];   return (     <div className = "App" >     <h1> Handle Array with List </h1>     < Table striped bordered hover >       <tbody>       <tr>         <td> Name </td>         <td> Email </td>         <td> Phone </td>       </tr>     {       Student . map (( data , i ) =>  ...
Post a Comment
Read more

useEffect with Condition - React Js

-
 App.js: import React , { useEffect , useState } from "react" ; import './App.css' import Student from "./Components/Student" ; function App () {   const [ data , setData ]= useState ( 10 )   const [ count , setCount ]= useState ( 100 )   return (     <div className = "App" >       < Student count = { count } data = { data } />             <button onClick = { () => setCount ( count + 1 ) } > Update Count </button>       <button onClick = { () => setData ( data + 1 ) } > Update Data </button>     </div>   ) } export default App ; ---------------------- Student.js: import React ,{ useEffect } from "react" ; function Student ( props ) {     useEffect (() => {         alert ( "Count is :" + props . count )     }, [ props . count ])     return (       ...
Post a Comment
Read more

useEffect Hook in ReactJs

-
 App.js: import React from 'react' ; import { useState } from 'react' ; import { useEffect } from 'react' ; import './App.css' function App () {   const [ count , setCount ]= useState ( 0 )   useEffect (() => { console . warn ( "useEffect" )})   return (   <div className = 'App' >     <h1> useEffect in React { count } </h1>     <button onClick = { () => setCount ( count + 1 ) } > Update Counter </button>   </div>  ) } export default App ;
Post a Comment
Read more

Component will Unmount - React Js

-
 App.js: import React , { Component , useState } from 'react' ; import Student from './Components/Student' import './App.css' class App extends Component {   constructor ()   {     super ();     this . state ={ show : true }   }   render ()   {     return (       <div>         {           this . state . show ? < Student /> : <h1> Child Component Removed </h1>         }         <h1> Component will Unmount </h1>         <button onClick = { () =>this . setState ({ show : ! this . state . show }) } > Toggle </button>               </div>     )   } } export default App ; ----------------------------------- Student.js: import React , { Component } from "react" ; class App extends Component {...
Post a Comment
Read more

ShouldComponentUpdate Life Cycle Method - React Js

-
 App.js: import React , { Component , useState } from 'react' ; import './App.css' class App extends Component {   constructor ()   {   super ()   console . warn ( "Constructor" )   // this.state={name:"Krishan"}   this . state ={ count : 0 }   }   shouldComponentUpdate ()   {     console . warn ( "Should Component Update" , this . state . count )     if ( this . state . count < 5 && this . state . count < 10 )     {       return true ;     }     }   render ()   {     console . warn ( "Render" )     return (       <div>         <h1> Should Component Update { this . state . count } </h1>         <button onClick = { () => { this . setState ({ count : this . state . count + 1 })} } > Update Counter </button>       </d...
Post a Comment
Read more

ComponentDidUpdate - React Js

-
 App.js import React , { Component , useState } from 'react' ; import './App.css' class App extends Component {   constructor ()   {   super ()   console . warn ( "Constructor" )   // this.state={name:"Krishan"}   this . state ={ count : 0 }   }   componentDidUpdate ( preProps , preState , snapshot )   {     console . warn ( "Component did Update" , preState )   }   render ()   {     console . warn ( "Render" )     return (       <div>         <h1> Component Did Mount { this . state . count } </h1>         <button onClick = { () => { this . setState ({ count : this . state . count + 1 })} } > Update Name </button>       </div>       )   }   } export default App ;
Post a Comment
Read more

Pass Function as Props - React Js

-
 App.js: import React , { useState } from 'react' ; import './App.css' import Student from './Components/Student' ; function App () {   function callChildComponent ()   {     alert ( "Called Student Component from App.js" )   }   return (     <div className = 'App' >       < Student data = { callChildComponent } />     </div>   ) } export default App ; ----------------------- Student.js: import React from "react" ; function Student ( props ) {     return (         <div>             <h1> Student Component </h1>             <button onClick = { props . data } > Call App.js Function </button>         </div>     ) } export default Student ;
Post a Comment
Read more