3. React

https://www.linkedin.com/pulse/microfrontends-single-spa-migration-converting-app-rany/

https://lethanhan.medium.com/part-2-building-a-micro-frontend-app-with-single-spa-and-react-cra-549eb319c7a

React JD : 

• JavaScript/TypeScript 
• React: hooks, context, SSR/SSG awareness
• Next.js or Vite-based React app
• State Management: Redux Toolkit or Zustand + Async data: TanStack
  
  

Query/React Query

• CSS Modules: Experience with modular CSS architecture and component[1]scoped styling
• Styling: Tailwind and Material-UI component libraries
• Authentication/Authorization: MSAL, OAuth2/OIDC, JWT and familiarity with
  
  

Azure Entra

• API Integration: REST, Web Sockets, SSE; streaming UIs; backoff/retry;
  
  

cancellation

• Testing: Jest, React Testing Library + E2E: Playwright or Cypress
• Accessibility: WCAG 2.1 AA, keyboard nav, screen readers, color contrast
• Performance: profiling, code-splitting, memoization, Core Web Vitals
• Enterprise State Management: Complex state orchestration across multi-step
  
  

workflows and real-time updates

• Security: OWASP Top 10, CSP, sanitization, dependency hygiene
• Build/DevOps: GitHub Actions/Azure Pipelines, code splitting, environment
  
  

configs, Azure App Services

• Observability: Application Insights and Matomo, logs/metrics/traces, client
  

error reporting

Awareness of cross-browser compatibility issues, 

inclusive interfaces aligned to WCAG/a11y best practices.

ensure SEO-friendly rendering (SSR/ISR).

component libraries (e.g., Storybook) for consistency and reuse.

Expertise in React, Next.js, TypeScript/JavaScript (ES6+), HTML5, and CSS3.

Participate in code reviews, troubleshooting, and debugging.

Knowledge of build tools like Webpack, Babel, NPM/Yarn.

 JD2:

(ReactJS, TypeScript, JavaScript, HTML, CSS, Redux, webpack, babel, Jest and related frameworks).

Measure and resolve performance bottlenecks, using tools like Chrome DevTools, Lighthouse, Webpage test, or custom tooling.

(webpagetest.org) , https://gtmetrix.com/ , https://tools.pingdom.com/, https://pagespeed.web.dev/

    Logging ; Monitoring tools like Quantum Metrics, Splunk, Grafana etc. 

JD3: 

Implement and optimize front-end logic using TypeScript with Zustand or similar state management libraries to ensure performance and persistence.

similar WebGL-based libraries.

Integrate and customize visualization frameworks like D3.js, Plotly.js, or Chart.js to create dynamic and insightful data views.

Architect and build React Microservices and modular components that ensure scalability and maintainability.

Flux / Redux / Zustand pattern

Cloud Workspace:

    Stackblitz

                

    Github.com

        

        ReactGuide

        ReactAngularCombo

        ReactMFE

Psychical workspace:

    E:/React_Workspace/

            3+ 5

    mfe

    reactguide

Resources:

       YT- DipeshMalvia

            

        YT- Codevution        

        

        YT- TKS Sharm

        YT- Techsith

        YT- Coding The SmartWay

        github - sudheerj 

        YT- NetNinja

        YT- Code Nanban - Tmail

Preparation:

1. DipeshM- 1.1.react hooks - (9),  1.2.react for beginner- (30)

2. CEvalution- 

    2.1 React js tut -118

    2.2 React formik -44

    2.3 React Router -15

    2.4 React Styled Component - 10

    2.5 React Query -25

    2.6 React Redux - 30

    2.7 React Table -17

    2.8 React Story book -20

    2.9 React Typescript Webpack -8

    2.10 React with Typescript - 25

    2.11 React Practical - 14

 

3. TKSSharma

        1. React Component Testing -18

        2. Testing React using Jest & Testing lib - 16

        3. React JS Interview Questions - 11

        4. React Hooks Crash course -(29)

        5. Build App in React - (35)

        6. React Formik - (25)

        7. React + Typescript - (16)

        8. React + Typescript + tailwind - (16)

        9. React + Redux - (12)

       10.HackerRank Interview -node, react, NG -(18)

4. Techsith

        1. React Interview Questions (7)

        2. React Hooks Series (12)

        3. LeetCode (7)

 5. NNinja

        1. React Testing Library (14)

        2.  React Context and Hooks Tutorial (21)

        3. Full modern React Tutorial ( 32)

        4. React, Redux , firebase tutorial (40)

simple form:

Simple Form -2 

export default function App() {

  const [state, setState] = useState({

    email: "",

    password: ""

  });

  const handleInputChange = (event) => {

    const { name, value } = event.target;

    setState((prevProps) => ({

      ...prevProps,

      [name]: value

    }));

  };

  const handleSubmit = (event) => {

    event.preventDefault();

    console.log(state);

  };

  return (

    <div className="App">

      <form onSubmit={handleSubmit}>

        <div className="form-control">

          <label>Email</label>

          <input

            type="text"

            name="email"

            value={state.email}

            onChange={handleInputChange}

          />

        </div>

        <div className="form-control">

          <label>Password</label>

          <input

            type="password"

            name="password"

            value={state.password}

            onChange={handleInputChange}

          />

        </div>

        <div className="form-control">

          <label></label>

          <button type="submit">Login</button>

        </div>

      </form>

    </div>

  );

}

simple form with error msg:

import React, { useState } from "react";

import ReactDOM from "react-dom";

import "./styles.css";

function App() {

  // React States

  const [errorMessages, setErrorMessages] = useState({});

  const [isSubmitted, setIsSubmitted] = useState(false);

  // User Login info

  const database = [

    {

      username: "user1",

      password: "pass1"

    },

    {

      username: "user2",

      password: "pass2"

    }

  ];

  const errors = {

    uname: "invalid username",

    pass: "invalid password"

  };

  const handleSubmit = (event) => {

    //Prevent page reload

    event.preventDefault();

    var { uname, pass } = document.forms[0];

    // Find user login info

    const userData = database.find((user) => user.username === uname.value);

    // Compare user info

    if (userData) {

      if (userData.password !== pass.value) {

        // Invalid password

        setErrorMessages({ name: "pass", message: errors.pass });

      } else {

        setIsSubmitted(true);

      }

    } else {

      // Username not found

      setErrorMessages({ name: "uname", message: errors.uname });

    }

  };

  // Generate JSX code for error message

  const renderErrorMessage = (name) =>

    name === errorMessages.name && (

      <div className="error">{errorMessages.message}</div>

    );

  // JSX code for login form

  const renderForm = (

    <div className="form">

      <form onSubmit={handleSubmit}>

        <div className="input-container">

          <label>Username </label>

          <input type="text" name="uname" required />

          {renderErrorMessage("uname")}

        </div>

        <div className="input-container">

          <label>Password </label>

          <input type="password" name="pass" required />

          {renderErrorMessage("pass")}

        </div>

        <div className="button-container">

          <input type="submit" />

        </div>

      </form>

    </div>

  );

  return (

    <div className="app">

      <div className="login-form">

        <div className="title">Sign In</div>

        {isSubmitted ? <div>User is successfully logged in</div> : renderForm}

      </div>

    </div>

  );

}

export default App;

REact Hooks form :

// inside src/App.js

// Replace previous code with this.

import React from "react";

import { useForm } from "react-hook-form";

import "./App.css";

function App() {

const { register, handleSubmit, formState: { errors } } = useForm();

//const onSubmit = (data) => console.log(data);

const onSubmit = (data) => {

    localStorage.setItem(data.email, JSON.stringify({ 

        name: data.name, password: data.password 

    }));

    console.log(JSON.parse(localStorage.getItem(data.email)));

  };

return (

<>

<p className="title">Registration Form</p>

<form className="App" onSubmit={handleSubmit(onSubmit)}>

<input type="text" {...register("name")} />

<input type="email" {...register("email", { required: true })} />

{errors.email && <span style={{ color: "red" }}>

*Email* is mandatory </span>}

<input type="password" {...register("password")} />

<input type={"submit"} style={{ backgroundColor: "#a1eafb" }} />

</form>

</>

);

}

export default App;

// inside src/Login.jsx

import React from "react";

import { useForm } from "react-hook-form";

import "./App.css";

function Login() {

const {

register,

handleSubmit,

formState: { errors },

} = useForm();

const onSubmit = (data) => {

const userData = JSON.parse(localStorage.getItem(data.email));

if (userData) { // getItem can return actual value or null

if (userData.password === data.password) {

console.log(userData.name + " You Are Successfully Logged In");

} else {

console.log("Email or Password is not matching with our record");

}

} else {

console.log("Email or Password is not matching with our record");

}

};

return (

<>

<p className="title">Login Form</p>

<form className="App" onSubmit={handleSubmit(onSubmit)}>

<input type="email" {...register("email", { required: true })} />

{errors.email && <span style={{ color: "red" }}>

*Email* is mandatory </span>}

<input type="password" {...register("password")} />

<input type={"submit"} style={{ backgroundColor: "#a1eafb" }} />

</form>

</>

);

}

export default Login;