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
- 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
- API Integration: REST, Web Sockets, SSE; streaming UIs; backoff/retry;
- 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
- Security: OWASP Top 10, CSP, sanitization, dependency hygiene
- Build/DevOps: GitHub Actions/Azure Pipelines, code splitting, environment
- Observability: Application Insights and Matomo, logs/metrics/traces, client
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.
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:
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