Magento 2 is a robust e-commerce platform, and ReactJS is a well-liked JavaScript library for constructing person interfaces and headless improvement.
Integrating ReactJS with the Magento 2 front-end can improve the person expertise and supply a extra trendy and responsive interface.
Within the weblog we are going to discover integrating ReactJS with the Magento 2 headless, specializing in integrating the login with buyer particulars REST API.
Let’s see the implementation –
Step 1: Create a ReactJS Undertaking
The ReactJS mission have to be completed and configured within the first stage so we will combine the login Relaxation API.
To create we will observe a weblog on combine ReactJS with the Magento 2 frontend.
Now our ReactJS app identify is "my_app". The command beneath have to be used to navigate the mission listing after it has been established.
cd my_app
Step 2: Set up Dependencies
We’d set up the required dependencies for working with type dealing with with validation and web page routes in our ReactJS mission.
Execute the following command inside your terminal.
npm set up use-react-form react-router-dom
npm set up -D tailwindcss npx tailwindcss init
Step 3: Create elements
We’ve got created a listing with the part’s identify which incorporates all elements.
However earlier than going to create elements we have to implement the router supplier, Within the beneath code base we’ve up to date the code index.js file for the router supplier.
Replace index.js for Route supplier
import React from 'react';
import ReactDOM from 'react-dom/shopper';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element:
);
// If you wish to begin measuring efficiency in your app, go a perform
// to log outcomes (for instance: reportWebVitals(console.log))
// or ship to an analytics endpoint. Be taught extra: https://bit.ly/CRA-vitals
reportWebVitals();
Create Login.jsx
The Login part, positioned in Login.jsx, is the core part liable for managing the login performance.
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Hyperlink } from 'react-router-dom';
export default perform Login() {
const [showPassword, setShowPassword] = useState(false);
const [apiMsg, setApiMsg] = useState("");
const [isLoading, setLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const getCustomerDetails = (token) => {
fetch(course of.env.BASE_URL + "/relaxation/V1/prospects/me", {
methodology: "GET",
headers: {
"Content material-Kind": "software/json",
"Authorization": `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((knowledge) => {
if (knowledge?.message) {
setApiMsg({
standing: "error",
message: knowledge.message,
});
} else {
setApiMsg({
standing: "success",
message: "Logged efficiently",
});
window.localStorage.setItem("token", token);
window.localStorage.setItem("buyer", JSON.stringify(knowledge));
// redirect
}
setLoading(false);
})
.catch((error) => {
console.error(error);
});
};
const onSubmit = (knowledge) => {
setLoading(true);
fetch(
course of.env.BASE_URL + "/relaxation/V1/integration/buyer/token",
{
methodology: "POST",
headers: {
"Content material-Kind": "software/json",
},
physique: JSON.stringify(knowledge),
}
)
.then((response) => response.json())
.then((knowledge) => {
if (knowledge?.message) {
setApiMsg({
standing: "error",
message: knowledge.message,
});
} else {
getCustomerDetails(knowledge);
}
})
.catch((error) => {
console.error(error);
});
};
useEffect(() => {
if (apiMsg?.message) {
setTimeout(() => {
setApiMsg("");
}, 3000);
}
}, [apiMsg]);
return (
{apiMsg && (
{" "}
{apiMsg.message}
)}
Registered Prospects
You probably have an account, sign up together with your e mail deal with.
New Buyer
Creating an account has many advantages: try quicker,
preserve a couple of deal with, monitor orders and extra.
);
}
Right here’s a step-by-step clarification –
- Login Type: The code creates a login type that asks for the shopper’s e mail and password.
- Validation: The code checks if the e-mail and password are legitimate. If not, it reveals an error message.
- Login Button: When the shopper clicks the login button, the code sends a request to the server to confirm the e-mail and password.
- Server Response: If the e-mail and password are right, the server sends a response with a token. The code makes use of this token to get the shopper’s particulars.
- Buyer Particulars: The code shops the shopper’s particulars within the browser’s native storage.
- Error Messages: If there’s an error throughout the login course of, the code reveals an error message to the shopper.
- Forgot Password: The code offers a hyperlink to reset the password if the shopper forgets it.
- Create Account: The code offers a button to create a brand new account for patrons who don’t have one.
Different options
- The code makes use of a “present password” characteristic that permits prospects to see their password as they sort it.
- The code makes use of a loading animation to point out that the login course of is in progress.
Lastly, we’ve accomplished our all main elements and implementation.
We’ve got to import these elements into one part App, Must consideration right here, we’ve already used App elements as react-router suppliers in our first code instance.
import './App.css';
import Header from './elements/Header';
import Login from './elements/Login';
perform App() {
return (
<>
Our React software – construction appear like as talked about beneath.
. ├── src/ │ ├── elements/ │ ├── Header.jsx │ ├── Login.jsx │ ├── App.js │ ├── App.css │ ├── App.check.js | ├── index.js | ├── index.css │ └── emblem.svg ├── public/ │ ├── index.html │ ├── emblem.svg │ ├── robots.txt │ └── manifest.json ├── package-lock.json ├── package deal.json ├── tailwind.config.js └── README.md
After beginning, after we open our React software at http://localhost:3000, we are going to get beneath talked about visible pages.
Conclusion
Integrating ReactJS with Magento 2 front-end utilizing a headless method can revolutionize your e-commerce platform.
By separating the entrance finish and again finish, you’ll be able to create a quick, versatile, and personalised purchasing expertise to your prospects.
With ReactJS dealing with the entrance finish and Magento 2 powering the again finish, you’ll be able to unlock the complete potential of your e-commerce enterprise.
Begin your Headless Growth with Webkul.
Glad Coding !!
