Web Developer

  "react-bootstrap" : "^1.5.2" ,     "react-datepicker" : "^4.8.0" ,     "react-dom" : "^17.0.2" ,     "react-google-places-autocomplete" : "^3.3.0" ,     "react-helmet" : "^6.1.0" ,     "react-icons" : "^4.2.0" ,     "react-places-autocomplete" : "^7.3.0" ,     "react-router-dom" : "^5.2.0" ,     "react-scripts" : "4.0.3" ,     "react-toastify" : "^8.1.0" ,

 https://www.codementor.io/@parthibakumarmurugesan/what-is-env-how-to-set-up-and-run-a-env-file-in-node-1pnyxw9yxj https://javascript.plainenglish.io/build-a-crud-application-using-express-and-mongodb-atlas-444f2a7f122b

 library which are using frequently:-- https://stackoverflow.com/questions/16700035/how-to-reverse-geocode-coordinates-to-get-postal-pincode-using-google-map react-pdf pdf-jsworker moment toastify geolacation shortcut key:ctrl+g to reach that particular line .............................................................. //pharmacy:- npm install react-router-dom@6.2.2 http://localhost:3000/pharmacy_react/home  After that open this url In UploadPres.js localStorage.setItem('token', '61be22bed3d9a1d62fca4b207f2a0c27c2089e36'); //ae6d0cff22a2cca581ffc28095ccc7510ca36163      localStorage.setItem('patient_slug', 'VdG2loE93MynyvefyGjJhiGw'); //VdG2loE93MynyvefyGjJhiGw note:- in global.ts file u have to change base url according to need. ............................................................................................................ //enrollemnet  portal:--- 5.2.0 react-router-dom //enrollemnet :--- employee code group code id corpcode employeeno...

 Pay u payment gateway,react native,web

 1:--https://mui.com/material-ui/api/button/ 2:--- 3:--- 4:--- < Grid container   spacing = { 2 } columns = { 16 } >   < Grid item xs = { 12 } md = { 8 } >     < Item > Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus facilis odio ut nobis velit nostrum illo soluta cum, aspernatur iure, veritatis inventore doloremque molestias tempore, voluptatum dicta hic magnam. Nihil! </ Item >   </ Grid >   < Grid item xs = { 12 } md = { 8 } lg = { 4 } >     < Item > Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum velit facere in voluptatibus iusto sapiente iste, molestias blanditiis repellat quos similique enim eos delectus nihil ullam saepe alias autem. </ Item >   </ Grid > </ Grid > 5:-- etc:---

 https://youtube.com/playlist?list=PL_6klLfS1WqGhnaH1rPqNQdyWhHGZhLeH https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity https://laravelcode.com/post/upload-single-and-multiple-images-with-preview-in-react-with-example https://monsterlessons-academy.com/posts/rtk-query-redux-toolkit-query-tutorial https://redux-toolkit.js.org/rtk-query/usage/examples https://bobbyhadz.com/blog/react-input-only-letters https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://www.makeuseof.com/react-toastify-custom-alerts-create/#:~:text=Setting%20Up%20Toastify,stores%20all%20toast%20notifications%20created.&text=Clicking%20on%20the%20button%20this%20code%20generates%20will%20call%20the%20toast. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://fkhadra.github.io/react-toastify/positioning-toast/

  import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App () {   const countries = [           { id : "1" , countryName : "AMERICA" },           { id : "2" , countryName : "AUSTRALIA" },           { id : "3" , countryName : "INDIA" },           { id : "4" , countryName : "ENGLAND" },         ];         const [ checked , setChecked ] = useState ([]);           const handleCheckAllChange = ( e ) => {           setChecked (             e . target . checked ? countries . map (( c ) => c . countryName ) : []           );         };           const handleCountryChange = ...

import { ToastContainer , toast } from "react-toastify" ; hello    { /* <input type="text" value={name}           onChange={handelChange} disabled={enable} />            <button onClick={notify}>Notify</button>       <ToastContainer/> */ }

  import React ,{ useEffect , useState } from 'react' min = { moment ( today ). subtract ( 30 , 'days' ). format ( 'YYYY-MM-DD' ) } min = { moment ( today ). subtract ( 30 , 'days' ). format ( 'YYYY-MM-DD' ) } import moment from 'moment' ; export default function Date1 () {     const today = new Date ();     const dateToday = moment ( today ). format ( 'YYYY-MM-DD' )     console . log ( dateToday );   return (     < div >   < input type = "date" name = "" id = "" max = { dateToday } />     </ div >   ) }

 Form.js import React , { useState } from 'react' // import {Input} from './Input' import FormInput from './FormInput' ; import './style/style.css' export default function Form () {   const initialstate = {     username : '' ,     userpass : ''   }   const [ state , setState ] = useState ( '' );   const Input = [     {     id : 1 ,     name : 'username' ,     type : 'text' ,     placeholder : 'username' ,     label : 'username' ,     required : true ,     errorMessage : 'please fillname at least 3 character' ,     pattern : "^[a-zA-Z]{3,5}$"         }     ,{         id : 2 ,         name : 'userpass' ,         type : 'password' ,         placeholder : 'userpass' ,         label : 'userpass' ,       ...

  import React ,{ useState , useEffect } from 'react' import { Table } from 'react-bootstrap' ; export default function Ourdata () {   const [ post , setPost ] = useState ([]);   const [ loading , setloading ] = useState ( false );   useEffect (() => { let data = fetch ( `https://jsonplaceholder.typicode.com/photos` ); data . then ( res => {   res . json (). then ( result => {     console . log ( result );     setPost ( result );     setloading ( true );   }). catch ( err => {     console . log ( err );   }) }). catch ( err => {   console . log ( err ); })   },[])   return (     < div >       { loading ?             'goodmorning'       : < div className = "spinner-border text-success" role = "status" >       < span className = "visually-hidden" > Loading... </ span ...

 https://docs.expo.dev/tutorial/build-a-screen/ https://reactnative.dev/docs/style

  1.Attribute directives let us change how things are rendered in the DOM We can create an attribute directive to manipulate the DOM tree. 2.Structural directives let us change the DOM  layout by adding or removing DOM elements. ng generate directive hover attribute: ng generate directive directivename import { Directive,ElementRef } from '@angular/core'; @Directive({   selector: '[appChange]' }) export class ChangeDirective {   constructor(private el: ElementRef) {     this.el.nativeElement.style.cssText="color:red;font-size:20px;background-color:blue";         } } in html template: <p appChange> we are angular student</p> telerik.com/blogs/angular-basics-angular-custom-directive import { Directive , Input , TemplateRef , ViewContainerRef } from "@angular/core" ; @ Directive ({   selector : "[appIf]" , }) export class IfDirective {   private hasView = false ;   constructor (     privat...

 https://react.dev/reference/react/useReducer ....use cases:--- 1:-use full when u have closely related piece of state 2:usefull when future state value is depends on current state import React ,{ useReducer } from 'react' function reducer ( state = count , action ) {     if ( action . type === 'increment' ) {       return { ...state//future point to hold state values         count : state . count + 1       };     }     if ( action . type === 'decrement' ) {         return {           count : state . count - 1         };       }       if ( action . type === 'multiply' ) {         return {           count : state . count * 5         };       }     } export default function Random1 () {     const...