This blog covers integrating ReactJS with Magento 2 React development<\/a> to build components, focusing on login integration using the customer details REST API.<\/p>\n\n\n\n The ReactJS project needs to be set up and configured first before integrating the login REST API.<\/p>\n\n\n\n Now our ReactJS app name is To create a React application, we can follow a blog on How to create a React App<\/a>.<\/p>\n\n\n\n We will install the required dependencies to handle forms with validation and manage page routing in our ReactJS project.<\/p>\n\n\n\n Execute the subsequent command within your terminal.<\/p>\n\n\n\n For detailed instructions on Tailwind CSS setup, click here<\/a>.<\/p>\n\n\n\n We have created a directory with the component’s name, which contains all components.<\/p>\n\n\n\n But before going to create components, we need to implement the router provider. In the code base below, we have updated the code in the index.js file for the router provider.<\/p>\n\n\n\n The <\/p>\n\n\n\n Here’s a step-by-step explanation –<\/p>\n\n\n\n Other features<\/strong><\/p>\n\n\n\n Finally, we have completed all our major components and implementation.<\/p>\n\n\n\n We have to import these components into one component App. Need to pay attention here, we have already used App components as\u00a0React Router<\/a><\/span> providers in our first code example.<\/p>\n\n\n\n Our React application \u2013 structure looks like as mentioned below.<\/p>\n\n\n\n Now, start the React application using the following command.<\/p>\n\n\n\n Integrating ReactJS with Magento 2 front-end using a headless approach<\/a> can revolutionize your e-commerce platform.<\/p>\n\n\n\n Separating the front end and back end allows you to deliver a fast, flexible, and personalized shopping experience.<\/p>\n\n\n\n With Magento 2 and ReactJS integration, ReactJS handles the front end while Magento 2 manages the back end, helping you maximize your e-commerce potential.<\/p>\n\n\n\n For technical assistance, please get in touch with us via email at support@webkul.com<\/a>.<\/p>\n\n\n\n Discover powerful solutions to enhance your Magento 2 store by exploring our Magento 2 plugins<\/a> page.<\/p>\n\n\n\n Bring your vision to life with custom-built solutions\u2014hire skilled Magento 2 developers<\/a> today.<\/p>\n\n\n\nLet\u2019s see the implementation \u2013<\/strong><\/h2>\n\n\n\n
Step 1: Create a ReactJS Project<\/strong><\/strong><\/h3>\n\n\n\n
\"my_app<\/strong>\"<\/code>. The command below must be used to create and navigate the project directory after it has been established.<\/p>\n\n\n\nnpx create-react-app my_app\ncd my_app<\/pre>\n\n\n\n
Step 2: Install Dependencies<\/strong><\/h3>\n\n\n\n
npm install use-react-form react-router-dom<\/pre>\n\n\n\n
\nnpm install -D tailwindcss@3\nnpx tailwindcss init<\/pre>\n\n\n\n
Step 3: Create components<\/h3>\n\n\n\n
Update index.js for Route provider <\/h3>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\nimport {\n createBrowserRouter,\n RouterProvider,\n} from "react-router-dom";\n\nconst router = createBrowserRouter([\n {\n path: "\/",\n element:<App\/>,\n },\n]);\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n <React.StrictMode>\n <RouterProvider router={router} \/>\n <\/React.StrictMode>\n);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();<\/pre>\n\n\n\n<\/h3>\n\n\n\n
Create Login.jsx <\/h3>\n\n\n\n
Login<\/code> component, located in Login.jsx<\/code>, is the core component responsible for managing the login functionality.<\/p>\n\n\n\nimport React, { useEffect, useState } from "react";\nimport { useForm } from "react-hook-form";\nimport { Link } from 'react-router-dom';\n\nexport default function Login() {\n const [showPassword, setShowPassword] = useState(false);\n const [apiMsg, setApiMsg] = useState("");\n const [isLoading, setLoading] = useState(false);\n const {\n register,\n handleSubmit,\n formState: { errors },\n } = useForm();\n\n \n const onSubmit = (data) => {\n setLoading(true);\n fetch(\n process.env.BASE_URL + "\/rest\/V1\/integration\/customer\/token",\n {\n method: "POST",\n headers: {\n "Content-Type": "application\/json",\n },\n body: JSON.stringify(data),\n }\n )\n .then((response) => response.json())\n .then((data) => {\n if (data?.message) {\n setApiMsg({\n status: "error",\n message: data.message,\n });\n } else {\n \/\/ store the token for further need \n setApiMsg({\n status: "success",\n message: "Logged in successfully",\n });\n }\n })\n .catch((error) => {\n console.error(error);\n });\n };\n\n useEffect(() => {\n if (apiMsg?.message) {\n setTimeout(() => {\n setApiMsg("");\n }, 3000);\n }\n }, [apiMsg]);\n return (\n <div className='lg:px-60'>\n <h1 className='text-4xl lg:px-0 md:px-0 px-10 pt-6 font-light'>Customer Login <\/h1>\n {apiMsg && (\n <div\n className={`text-sm mt-4 rounded-sm ${\n apiMsg?.status === "success" ? "bg-green-200" : " bg-red-200"\n } px-2 py-2 flex`}\n >\n {" "}\n <svg\n onClick={() => setApiMsg("")}\n xmlns='http:\/\/www.w3.org\/2000\/svg'\n className={`w-4 h-4 mt-[0.1625rem] mr-2 rounded-full ${\n apiMsg?.status === "success" ? "bg-green-500" : "bg-red-500"\n } p-0.5 text-white`}\n viewBox='0 0 24 24'\n fill='none'\n stroke='currentColor'\n stroke-width='2'\n >\n <path d='M18 6L6 18' \/>\n <path d='M6 6L18 18' \/>\n <\/svg>\n {apiMsg.message}\n <\/div>\n )}\n <div className='lg:flex md:flex block gap-8 lg:px-0 md:px-0 px-10 '>\n <div className='lg:w-1\/2 md:w-1\/2 w-full'>\n <section class=''>\n <h3 className='text-xl pt-6 py-2 border-b font-light'>\n Registered Customers\n <\/h3>\n <div class='flex flex-col mx-auto md:h-[90vh] lg:py-0'>\n <div class='w-full bg-white rounded-lg md:mt-0 sm:max-w-md xl:p-0 '>\n <div class=' space-y-4 md:space-y-6 '>\n <p className='py-2 font-light'>\n If you have an account, sign in with your email address.\n <\/p>\n <form\n class='space-y-4 md:space-y-6'\n onSubmit={handleSubmit(onSubmit)}\n >\n <div>\n <label\n for='email'\n class='block mb-2 text-sm text-gray-900 font-light'\n >\n Email\n <\/label>\n <input\n type='email'\n name='email'\n id='email'\n class='bg-gray-50 border text-black border-gray-300 focus:outline-none focus:ring-primary-600 focus:border-primary-600 block w-full p-1 px-2 rounded-sm dark:focus:ring-blue-500 dark:focus:border-blue-500 focus:shadow-[0_0_3px_1px_#00699d]'\n required='true'\n {...register("username", {\n required: "Email is required",\n })}\n \/>\n {errors.username && (\n <p role='alert' className='text-red-500 text-sm'>\n {errors.username?.message}\n <\/p>\n )}\n <\/div>\n <div>\n <label\n for='password'\n class='block mb-2 text-sm font-light text-gray-900 '\n >\n Password\n <\/label>\n <input\n type={showPassword ? "text" : "password"}\n name='password'\n id='password'\n class='bg-gray-50 border border-gray-300 text-black focus:outline-none focus:ring-primary-600 focus:border-primary-600 block w-full p-1 px-2 focus:shadow-[0_0_3px_1px_#00699d]'\n required=''\n {...register("password", {\n required: "Password is required",\n })}\n \/>\n {errors.password && (\n <p role='alert' className='text-red-500 text-sm'>\n {errors.password?.message}\n <\/p>\n )}\n <\/div>\n <div class='flex items-center justify-between'>\n <div class='flex items-start'>\n <div\n class='flex items-center h-5'\n onClick={() => setShowPassword(!showPassword)}\n >\n <input\n type='checkbox'\n class='w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 '\n required=''\n \/>\n <\/div>\n <div class='ml-3 text-sm'>\n <label for='remember' class='text-gray-500'>\n Show Password\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <button\n disabled={isLoading}\n type='submit'\n class=' text-white bg-[#1979c3] hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium text-sm px-5 py-1.5 rounded-sm text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'\n >\n Sign in\n <\/button>\n <span className='pl-2'>\n <Link to='\/' class='text-sm text-[#1979c3]'>\n Forgot Your Password?\n <\/Link>\n <\/span>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <div className='lg:w-1\/2 md:w-1\/2 w-full'>\n <section class=''>\n <h3 className='text-xl pt-6 py-2 border-b font-light'>\n New Customer\n <\/h3>\n <div class='flex flex-col mx-auto md:h-[90vh] lg:py-0'>\n <div class='w-full bg-white rounded-lg md:mt-0 sm:max-w-md xl:p-0 '>\n <div class=' space-y-4 md:space-y-6 '>\n <p className='py-2 font-light'>\n Creating an account has many benefits: check out faster,\n keep more than one address, track orders and more.\n <\/p>\n <button\n type='button'\n class=' text-white bg-[#1979c3] hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium text-sm px-5 py-1.5 rounded-sm text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'\n >\n Create an Account\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n <\/div>\n );\n}<\/pre>\n\n\n\n\n
\n
import '.\/App.css';\nimport Login from '.\/components\/Login';\nfunction App() {\n return (\n <>\n <Login\/>\n <\/>\n );\n}\n\nexport default App;<\/pre>\n\n\n\n.\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u251c\u2500\u2500 Login.jsx\n\u2502 \u251c\u2500\u2500 App.js\n\u2502 \u251c\u2500\u2500 App.css\n\u2502 \u251c\u2500\u2500 App.test.js\n| \u251c\u2500\u2500 index.js\n| \u251c\u2500\u2500 index.css\n\u2502 \u2514\u2500\u2500 logo.svg\n\u251c\u2500\u2500 public\/\n\u2502 \u251c\u2500\u2500 index.html\n\u2502 \u251c\u2500\u2500 logo.svg\n\u2502 \u251c\u2500\u2500 robots.txt\n\u2502 \u2514\u2500\u2500 manifest.json\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tailwind.config.js\n\u2514\u2500\u2500 README.md<\/pre>\n\n\n\n
npm start<\/pre>\n\n\n\n
After starting, when we open our React application at http:\/\/localhost:3000, we will get below mentioned visual pages.<\/p>\n\n\n\n![\"Customer](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/desktop-view-rjx-1-1200x513.webp\")
<\/figure>\n\n\n\n\n![\"Customer](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/mobile-view-rjx-1.webp\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n