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
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