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;


               

    No comments:

    Post a Comment

    OWASP - Top 10 Policies

      Top 10 Web Application Security Risks There are three new categories, four categories with naming and scoping changes, and some consolidat...