Finding it challenging to integrate invisible reCAPTCHA only on specific web pages? This short tutorial helps you implement invisible reCAPTCHA at specific and distinct containers, such as login and forgot password. This tutorial uses LoginRadius to demonstrate this.
\n\n\n\n
Google reCAPTCHA is a security service that helps protect your websites from fraud and abuse.
\nCurrently, LoginRadius supports two different versions of Google v2reCAPTCHA.
\nYou want to enable invisible reCAPTCHA on a specific page — a login page, for demonstration. To achieve this, first login to your LoginRadius dashboard. Or, sign up here for a free account or 21-day free trial for the Developer Pro plan.
\nIf you're new to LoginRadius, follow our Getting Started documentationdocs/references/javascript-library/getting-started/) to get going.
\nSo, you will need to do the following client-side setup for adding the invisible reCAPTCHA on a specific page only — for example, on the login page.
\nraasoption.invisibleRecaptcha = false;Now, add the following code to render the captcha only at the login page, and here beforeFormRender hook is used.
LRObject.$hooks.register('beforeFormRender', function(name, schema){\nLRObject.options.invisibleRecaptcha = false;\nif (name == 'login' ) {\n LRObject.options.invisibleRecaptcha = true;\n LRObject.util.addRecaptchaJS();\n LRObject.util.captchaSchema("loginradius-recaptcha_widget_login", schema);\n}\n});The above code used the utility method addRecaptchaJS that adds the required JS for invisible reCAPTCHA. It also used the captchaSchema method to add reCAPTCHA within the Login Schema.
The last step is to stop resetting the reCAPTCHA before reCAPTCHA submission. So, add the following code:
\nLRObject.$hooks.register('eventCalls', function(name){\nLRObject.options.invisibleRecaptcha = false;\nLRObject.options.optionalRecaptchaConfiguration.IsEnabled = true;\nif (name == 'login' ) {\n LRObject.options.invisibleRecaptcha = true;\n LRObject.options.optionalRecaptchaConfiguration.IsEnabled = false;\n}\n});When you check your hosted page, invisible reCAPTCHA will appear only on the login page.
\nSimilarly, you can follow the above steps to enable invisible reCAPTCHA on the registration(signup) page or any other page.
\nYou have learned how to use invisible reCAPTCHA on specific web pages and forms with LoginRadius to improve user experience and prevent malicious bot traffic from being effective.
\n","frontmatter":{"title":"How to Integrate Invisible reCAPTCHA for Bot Protection","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"April 08, 2022","updated_date":null,"tags":["reCAPTCHA","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ee08b46582fc03a415b092442f2b0d44/ee604/configure-invisible-reCAPTCHA.png","srcSet":"/static/ee08b46582fc03a415b092442f2b0d44/69585/configure-invisible-reCAPTCHA.png 200w,\n/static/ee08b46582fc03a415b092442f2b0d44/497c6/configure-invisible-reCAPTCHA.png 400w,\n/static/ee08b46582fc03a415b092442f2b0d44/ee604/configure-invisible-reCAPTCHA.png 800w,\n/static/ee08b46582fc03a415b092442f2b0d44/f3583/configure-invisible-reCAPTCHA.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/integrate-invisible-captcha-for-bot-protection/"}}},{"node":{"id":"1c0d26a0-dd8e-570f-8386-035f50a682cd","html":"In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:
\n\nContext provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.
\n
To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.
\nconst App = () => {\n return(\n <ParentClass color= "blue"/>\n );\n}\n\nconst ParentClass = (props) => (\n <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n <p>Color: {props.color}</p>\n)In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.
Using context, we can avoid passing props. Let's create the above example code using context:
\nWe will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.
Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.
This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:
import React from \"react\";
\nconst ColorContext = React.createContext(\"white\");\nexport default ColorContext;
\nTo use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nAfter successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.
import ColorContext from './ColorContext';\n function App() {\n const color= "white";\n return (\n <ColorContext.Provider value = {color}>\n <div className="App">\n <header className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h1 className="App-title">Welcome to my web page</h1>\n </header>\n </div>\n </ColorContext.Provider>\n );\n }The approach to providing context is the same for class and functional components but consuming is a little different for both.
\nMainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n componentDidMount() {\n const colorValue= this.context\n\n console.log(colorValue) // "white" \n }\n\n render() {\n return <div>Color Value is {colorValue} </div>\n }\n}The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n render() {\n return (\n <ColorContext.Consumer>\n {(props) => {\n return <div>{props}</div>\n }}\n </ColorContext.Consumer>\n )\n }\n} You can use useContextin functional components and its equivalent of static contextType. \t
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n // Context state\n state = {\n color:""\n }\n\n // Method to update state\n setColor = (color) => {\n this.setState((prevState) => ({ color}))\n }\n\n render() {\n const { children } = this.props\n const { color } = this.state\n\n\n return (\n <ColorContext.Provider\n value={{\n color,\n this.setColor,\n }}\n >\n {children}\n </ColorContext.Provider>\n )\n }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }Now you can update and view the user from the Context method.
\nimport ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n render() {\n const { color, setColor } = this.context\n\n return (\n <div>\n <button\n onClick={() => {\n const newColorValue= "black";\n\n setColor (newColorValue)\n }}\n >\n Update Color\n </button>\n <p>{`Current Color Value: ${color}`}</p>\n </div>\n )\n }\n}In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?
\nThe problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **
\nThis means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.
\n","frontmatter":{"title":"React's Context API Guide with Example","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"June 09, 2021","updated_date":null,"tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png","srcSet":"/static/157af7ff069ab273224b4718433d9790/69585/title-image.png 200w,\n/static/157af7ff069ab273224b4718433d9790/497c6/title-image.png 400w,\n/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png 800w,\n/static/157af7ff069ab273224b4718433d9790/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/react-context-api-guide-with-example/"}}},{"node":{"id":"9039433e-03b4-58f4-9fcc-6d2244acd635","html":"When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on, which break the application and result in a blank web page, which is not ideal. To resolve this, many methods are created that handle these errors and improve the user and developer experience.
\nIn React, Error Boundaries comes in the picture, which was introduced in React v16 that catch the javascript errors found in UI and handle them efficiently.
\nReact Error Boundaries are React components that catch tricky javascript errors, log those errors and render them into a fallback UI instead of crashing the whole application.
\nNow let's understand the concept with the code.
\nclass UpdateCount extends Component {\n state = {\n count: 0\n };\n handleClick = () => {\n this.setState({\n count: this.state.count + 1\n });\n }\n render() {\n const {count} = this.state;\n if (count === 4) {\n // Imitate an error!\n throw new Error('Application crashed!');\n }\n return (\n <div>\n <h1>{count}</h1>\n <button onClick={this.handleClick}>+</button>\n </div>\n );\n }\n};When an application encounters an error, the component unmounts completely, leaving the user/developer with a blank web page and no idea what to do next.
\nReact Error Boundaries provides a method to handle these errors efficiently!
\nFirst, let's make an error boundary component. Here is an example:
\nclass ErrorBoundary extends Component {\n state = {\n error: ''\n }\n static getDerivedStateFromError(error) { \n // will update the state \n return {error: error.toString()}\n }\n \n render() {\n const {error} = this.state;\n if (error) {\n return (\n <div>\n <p>Looks like an error occurred!</p>\n <p>\n {error}\n </p>\n <div>\n )\n }\n return <div>{this.props.children}</div>\n }\n}In the above example code, you will see a static method getDerivedStateFromError(error). This method is a lifecycle method in which we catch the error and see it as the state. If an error occurs, the state is updated, and instead of a blank web page, a human-friendly error message appears in rendering; if no error occurs, the control is returned to the original element.
Now let’s see how we can use this
function App() { \n return ( \n <div> \n <p><b>Error Boundary Example code</b></p> \n <hr /> \n <ErrorBoundary> \n <p>Two updatecounts component use same error boundary component.</p> \n <UpdateCount /> \n <UpdateCount /> \n </ErrorBoundary> \n <hr /> \n <p>Two updatecounts component use their own error boundary component.</p> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n </div> \n ); \n} \nexport default App In the above code, when we click on the plus (+) button, it increases the count. The program is programmed to throw an error when the count reaches 4. It simulates a JavaScript error in a component. Here, we have used the error boundary in two ways, which are given below.
\nFirst, these two updatecounts are within the same error boundary. If one of the updateCount components crashes, then the error boundary will replace them both.\nSecond, these two updatecounts are within their individual error limits. So if one crashes, the other component is not affected because both have their own error boundary component.
\nReact Error boundary is a really nice feature in React, and it is comparatively less used.\nThere are a lot of nice error boundary packages out there; you should look into them. Here is a link react-error-boundary
\n","frontmatter":{"title":"React Error Boundaries","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"May 20, 2021","updated_date":null,"tags":["React","Error Handling","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png","srcSet":"/static/95277564493241e87bee30b1a4197e71/69585/error_boundary_cover.png 200w,\n/static/95277564493241e87bee30b1a4197e71/497c6/error_boundary_cover.png 400w,\n/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png 800w,\n/static/95277564493241e87bee30b1a4197e71/f3583/error_boundary_cover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/react-error-boundaries/"}}},{"node":{"id":"82bbfa24-7443-56f6-a525-2866dd40eae5","html":"In this article, We will discuss the manipulation of DOM elements with Ref directly with React.
\nReact Framework builds your components and abstracts your code away from manipulation within the DOM but still leaves the door open for developers to access it. Reason are few cases where it might be necessary. That's why React provides an escape hatch know as refs.
Refs are a function that use to access the DOM from components. You only need to attach a ref to the element in your application to provide access to it from anywhere within your component without making use of props and all.
We can also use Refs to direct access to React elements and use callbacks with them.
\nWe should only use refs when the required interaction cannot be achieved using state and props.
We can use refs to do anything that needs to be manipulated in the DOM. Some good cases like focus, test selection, media playback, triggering mandatory animations, or integration with the third-party DOM library.
Note: We should avoid using refs because it removes the purpose of using React. For example, If you want to show and hide a \tpopup component. We should use a boolean prop for it instead of manipulating dom.\n
We can use React.createRef()method to create Refs, and then we can attach to a Dom element via the ref attribute after that, we can access and modify that element through the ref.
class App extends React.Component {\n constructor(props) { \n super(props); \n this.myRef = React.createRef();\n }\n render() {\n return <div ref={this.myRef} />; \n }\n}In above code, We created this.myRef in the constructor by calling React.createRef() method.
Then in the render method , we attached the returned value to ref of the div element, a reference to the node becomes accessible at the current attribute of the ref.
We should not use ref attribute on function components because they do not have instances.
React will assign the current property with Dom element when component mount and assign null to it when component unmount.
ref updates happen before componentDidMount or componentDidUpdate methods.
We can pass refs as props to the component. Example:
\nfunction MyCustomTextInput ({ myInputRef }) { \n return <input ref={myInputRef} />; \n}\n\nclass App extends React.Component { \n constructor(props) { \n super(props); \n this.myInputRef = React.createRef(); \n } \n \n componentDidMount() { \n this.myInputRef.current.focus(); \n }\n \n render() { \n return <MyCustomTextInput inputRef={this.myInputRef} />; \n }\n}In above code, App passed its ref as props to MyCustomTextInput component.
We can create ref using another way called callback refs; it gives us more fine-grain control over when refs are set and unset within the component.
Instead of passing ref returned by createRef() method, we will pass a function to ref attribute.\nThe function receives React component instance or DOM element, which can be stored and accessed anywhere.
class App extends React.Component { \n componentDidMount() { \n this.input.focus(); \n } \n \n render() { \n return ( \n <input ref={element => (this.input = element)} />; \n ); \n } \n}In the above code, React will call the ref callback t store the reference of the input element when the component mounts; then, it will focus the input element automatically and when the component unmounts, call it with null.
\nWe can pass callback refs between components . Example:
\nfunction MyCustomTextInput({ inputRef }) { \n return <input ref={inputRef} />; \n}\n\nclass App extends React.Component { \n componentDidMount() { \n this.myInputElement.focus(); \n } \n render() { \n return <MyCustomTextInput inputRef={el => (this.myInputElement = el)} />; \n } \n}In the above code, We passed the function to inputRef and access it in App component so we can call focus on it to focus the input element.
Callback refs are calling two times during updates if they are defined as an inline function. This is because a new instance of the function is created with each render. We can avoid this by calling it a method of a class.
\nTo understand more about React refs. Read Refs and the DOM
\n","frontmatter":{"title":"React with Ref","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"April 16, 2021","updated_date":null,"tags":["React","Refs","DOM"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0e4deace8ac6b8fceb2ca7ce559fc393/ee604/title-image.png","srcSet":"/static/0e4deace8ac6b8fceb2ca7ce559fc393/69585/title-image.png 200w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/497c6/title-image.png 400w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/ee604/title-image.png 800w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/react-with-refs/"}}},{"node":{"id":"95aac512-ecfd-54b7-8369-a0e09370d010","html":"This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user authentication to react apps. To handle a lot of authentication implementation information, LoginRadius offers a high-level API. Using security best practices, now you can protect your response apps while writing less code.
\nThis article focuses on helping developers learn how to integrate user authentication in the React application. Practice the following security principles to improve authentication on React applications:
\nIn the React application, we can easily and quickly add authentication by using LoginRadius. If you already have a customized login/registration page ready, then I'll guide you to the next step of adding authentication in react apps.
\nA new application was created for you when you signed up for LoginRadius. From here, you get some essential information.
\n<script type="text/javascript" src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>We will use an API framework to call LoginRadius APIs for authentication. Create a new file LoginPage.js, and add the following code.
\n import React, { useState } from "react";\n const lrconfig = {\n apiKey: "*************************", //LoginRadius API key\n };\n const loginradius = {};\n if (window.LoginRadiusV2) {\n loginradius = new window.LoginRadiusV2(lrconfig);\n loginradius.api.init(lrconfig);\n }\n const LoginButton = () => {\n const loginButtonHandler = () => {\n loginradius.api.login({emailid: emailValue,\n password: passwordValue},\n (successResponse)=>{\n //Here you will get the access Token of \n \n \n console.log(successResponse);\n },\n (errors) => {\n console.log(errors);\n });\n }\n const [emailValue, updateEmailValue] = useState("");\n const [passwordValue, updatePasswordValue] = useState("");\n return (\n <React.Fragment>\n <input type="text" value={emailValue} onChange={(e)=>{updateEmailValue(e.target.value)}} placeholder={"email"}/>\n <input type="password" value={passwordValue} onChange={(e)=>{updatePasswordValue(e.target.value)}} placeholder={"Password"} />\n <button onClick={() => loginButtonHandler()}>Log In</button>\n </React.Fragment>\n );\n };\n export default LoginButton;In the above code, you will see the lrConfig object, which has apikey that you will get from the LoginRadius account. After calling loginradius.api.login, you will get the response in which you will get the access Token. Through this access token, you can get the user profile.
Create LogoutPage.js file and add following code:
\n import React, { useState } from "react";\n\n const lrconfig = {\n apiKey: "*************************", //LoginRadius API key\n };\n\n const loginradius = {};\n if (window.LoginRadiusV2) {\n loginradius = new window.LoginRadiusV2(lrconfig);\n loginradius.api.init(lrconfig);\n }\n\n const LogoutButton = () => {\n const token = '************'; // Access Token that you got after login\n const logoutButtonHandler = () => {\n //Note: Call invalidate token api to invalidate the token.**\n loginradius.api.invalidateToken(\n token,\n (successResponse)=>{\n console.log(successResponse);\n },\n (errors) => {\n console.log(errors);\n }\n );\n }\n return (\n <React.Fragment>\n <button onClick={() => logoutButtonHandler()}>Logout</button>\n </React.Fragment>\n );\n };\n export default LogoutButton;In the above code, we have called invalidated token api, which expires your access token.
\nCreate SignupPage.js file and add the following code:
\n import React, { useState } from "react";\n const lrconfig = {\n apiKey: "*************************", //LoginRadius API key\n sott: "***************************" //Secure Token for signup functionality\n };\n const loginradius = {};\n if (window.LoginRadiusV2) {\n loginradius = new window.LoginRadiusV2(lrconfig);\n loginradius.api.init(lrconfig);\n }\n const SignupButton = () => {\n const signupButtonHandler = () => {\n loginradius.api.registration({\n email: [{ type: "Primary", value: emailValue }],\n password: passwordValue\n },\n (successResponse)=>{\n //Here you will get the response after registration\n console.log(successResponse);\n },\n (errors) => {\n console.log(errors);\n });\n }\n const [emailValue, updateEmailValue] = useState("");\n const [passwordValue, updatePasswordValue] = useState("");\n return (\n <React.Fragment>\n <input type="text" value={emailValue} onChange={(e)=>{updateEmailValue(e.target.value)}} placeholder={"email"}/>\n <input type="password" value={passwordValue} onChange={(e)=>{updatePasswordValue(e.target.value)}} placeholder={"Password"} />\n <button onClick={() => signupButtonHandler()}>Log In</button>\n </React.Fragment>\n );\n };\n export default SignupButton;In the above code, You will get a success/error response after calling the registration api.
\nThe most common authentication use case for a React application gets covered in this tutorial: quick login and logout. However, LoginRadius is an expandable and versatile platform that can help you accomplish much more. In this guide, We have used the LoginRadius API Framework. If you want to incorporate our hosted page into your application, follow this documentation.
\nLet me know what you think of this tutorial in the comments below. Thanks for reading :)
\n","frontmatter":{"title":"A Guide To React User Authentication with LoginRadius","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"December 10, 2020","updated_date":null,"tags":["Authentication","LoginRadius","React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/1d36656dce223836227b1b52270427a8/ee604/authentication-main.png","srcSet":"/static/1d36656dce223836227b1b52270427a8/69585/authentication-main.png 200w,\n/static/1d36656dce223836227b1b52270427a8/497c6/authentication-main.png 400w,\n/static/1d36656dce223836227b1b52270427a8/ee604/authentication-main.png 800w,\n/static/1d36656dce223836227b1b52270427a8/f3583/authentication-main.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/user-authentication-react-application/"}}},{"node":{"id":"1f6ac5b6-abb3-5c08-83ba-d6af0872213d","html":"JAMstack is not a specific set of tools or any language. Still, it's a new and modern way of building apps and sites that deliver better performance, higher security, lower scaling cost, and better developer experience. It achieves this by retaining most of the client-side functionality and abstracting all other functionality to the third-party API. APIs do all the heavy lifting. It is based on the client-side, and it doesn't depend on the backend server.
\nJAM stands for JavaScript, APIs & Markup.
\nJavaScript: Any dynamic programming during the request/response cycle is handled by the JS, running entirely on the client-side. It can be any front-end framework or library or even vanilla JavaScript.\nAPIs: All server-side processes or database actions are contained in reusable APIs, accessed over HTTPS with JavaScript. These can be custom-made or leveraged third party services.\nMarkup: Template markup must be pre-built at the time of deployment, usually using a site generator for content sites or a build tool for web applications.
\n\n\nModern web development architecture based on client-side JavaScript, reusable APIs, and pre-built Markup.
\n
The term was introduced by Mathias Biilmann, co-founder of Netlify.
\nWith the JAMstack, we have no longer talk about specific technologies such as web servers, programming languages, or databases.
\nCheck the following best practices defining a JAMstack project:
\nWe can easily understand the JAMstack value when comparing it with a monolithic architecture, today's most common practice in Web development. In a monolithic project, the frontend is closely coupled with a backend server, e.g., node js. Each page request to backend server which pulls data from database renders into Html and then send it across the network. A single page gets regenerated every time the server receives a request for that URL.\nIn a JAMstack architecture, the page request does not go to the server for Html because it directly fetches Html from CDN, where the Html file has been pre-built, and it's ready to be downloaded; that's why no server is involved here.
\nTraditional workflow
\n→ Building and hosting are closely coupled.
\n→ Whenever a user requests a page, The file request to the back end and interacts with a database, back-end code, server, browser, and caching layers.
\n→ Updated code is pushed to servers often through FTP. The database must be updated again.\n→ Updated content is also pushed through CMS like WordPress, Joomla, or drupal.
JAMstack workflow
\n→ Building and hosting are loosely coupled.
\n→ Whenever a user requests a page, The file is already pre-built and directly served to the browser from a CDN.
\n→ Updated code is pushed through Git; Modern tools like static site generators easily re-built the entire site.\n→ Updated content is also pushed through GIt or static site CMS.
A JAMstack architecture can bring all sorts of benefits to the sites and project workflows. Some of the key benefits are:
\nFaster performance: Building JAMstack helps to get pages generated at deploy time since they are mainly stored as Markup and can be served over a CDN.\nHigher security: JAMstack websites reduce server and database, so we don't need to worry about vulnerabilities anymore.\nLower cost: It uses fewer resources, so comparably, it's lower than Others.\nBetter developer experience Frontend developer can focus on frontend development without tied to monolithic architecture. Static site generators remove the need to maintain a separate stack for content and marketing.
\nIn a JAMStack architecture, however, the frontend and backend are decoupled. A frontend consists of JavaScript, HTML, and CSS. SSG generates these files during the build process and sends it over a CDN.
\nA JAMStack backend is a content API that returns JSON/XML. This API can be a hosted datastore, a headless CMS, serverless functions, or a custom application.
\nBiggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.
\nIn this post, We are going to take a closer look at both React hooks and Redux to manage the state.
\nReact components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.
\nThe state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state.
\n\n\nMake a state variable responsible for one concern to use efficiently.
\n
React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult.
\nHere is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product.
\nIf developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application.
\nLet’s discuss how to use react state management using react hooks and redux
\nRedux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works.
\nThere are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does.
\nActions are payloads of information that send data from your application to your store. Actions are sent using store.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:
{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }Here is an example of its action creator:
\nocnst addTodo = (text) => {\n return {\n type: "ADD_TODO",\n text\n };\n}Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows:
\n const TODOReducer= (state = {}, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n};The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods.
\nLet’s create a store for our TODO app:
\nconst store = createStore(TODOReducer);In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong.
\nThese are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class.
\nHooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like useState, UseEffect and useReducer etc. You can also make custom hooks.
Please see the following examples of some react hooks as follows:
\nuseState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.
class Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:
function Example() {\n const [count, setCount] = useState(0);\n}We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.
\nuseReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.
Example of useReducer:
\nuseReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application.
\n +----------------+ +----------------+\n | Component A | | |\n | | | |\n | | | Redux |\n +----------------+ | |\n | connect Redux |<-------------| |\n +--------+-------+ +--------+-------+\n | |\n +---------+-----------+ |\n | | |\n | | |\n+--------+-------+ +--------+-------+ |\n| Component B | | Component C | |\n| | | | |\n| | | | |\n+----------------+ +----------------+ |\n| useReducer | | connect Redux |<----------+\n+----------------+ +--------+-------+\n |\n +--------+-------+\n | Component D |\n | |\n | |\n +----------------+Below an example of todo items is completed or not using the useReducer react hook.
\nSee the following function which is a reducer function for managing state transitions for a list of items:
\n const todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n };There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action.
\nThe state which is managed in this reducer is an array of items:
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n ];In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output
\n const [todos, dispatch] = React.useReducer(\n todoReducer,\n initialTodos\n );Complete file:
\nimport React from "react";\n\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\nconst App = () => {\n const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n const handleChange = todo => {\n dispatch({\n type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n id: todo.id\n });\n };\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default App;Let’s do a similar example with Redux.
\nStore in App.js.
\nimport React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n return (\n <div className="App">\n <Provider store={store}>\n <Todo />\n </Provider>\n </div>\n );\n}\n\nexport default App;Actions in actions/index.js.
\nexport const addTodo = id => ({\n type: "ADD_TODO",\n id\n});\n\nexport const removeTodo = id => ({\n type: "REMOVE_TODO",\n id\n});Reducers in reducers/index.js.
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todos = (state = initialTodos, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\n\nexport default todos;FIle components/Todo.js
\nimport React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n const handleChange = todo => {\n if (todo.complete) {\n removeTodo(todo.id);\n } else {\n addTodo(todo.id);\n }\n };\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n return {\n addTodo: id => dispatch(addTodo(id)),\n removeTodo: id => dispatch(removeTodo(id))\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Todo);React offers react hooks which can be used as an alternative for connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.
But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.
\n","frontmatter":{"title":"React state management: What is it and why to use it?","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"July 17, 2020","updated_date":null,"tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png","srcSet":"/static/ef27359624480604211f0e018dd47f18/69585/title-image.png 200w,\n/static/ef27359624480604211f0e018dd47f18/497c6/title-image.png 400w,\n/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/react-state-management/"}}},{"node":{"id":"eb9edcae-8363-5f44-bb53-51bc22673273","html":"Are you afraid of hackers and feel unsafe for admin and front user to login through same area?
\nNo need to worry as in this article, I am going to guide you with how to create separate login area for admin. Along with that, I will also provide the required steps to disable administrator login through user/login page.
Please follow the following implementation steps.
\nStep by step Guide:
\n t('Admin Login Page'),\n 'page callback' => 'yourmodule_admin_login_page',\n 'page arguments' => array(),\n 'access arguments' => array('access content'),\n 'type' => MENU_CALLBACK,\n );\n return $menu_items;\n}-->function yourmodule_admin_login_page() {\n return theme('yourmodule_admin_login_template');\n}array(\n 'template' => 'yourmodule-admin_login',\n 'render element' => 'form',\n 'path' => $path,\n ),\n );\n return $theme;\n}--> 'hidden',\n '#value' => 'admin_login',\n '#name' => 'hidden_admin_login_form',\n );\n $variables['rendered'] = drupal_render($form);\n}-->Note : In the above code, we have used the hidden element to identify the admin login page.
\n'yourmodule-admin_login.tpl.php'
\n<!--\n \n-->URL : your-site-domain/admin/login
\nAll above steps are used to show admin login page. But if you want that only administrator can login through page admin/login then follow the following the next steps.
\nfunction yourmodule_form_alter(&$form, &$form_state, $form_id) {\n if ($form_id == 'user_login') {\n $form['#validate'][] = 'yourmodule_external_validate';\n }\n}roles);\n if ($access_granted) {\n return TRUE;\n }\n else {\n form_set_error('', t('Only site administrator can login.'));\n return FALSE;\n }\n }\n}-->Note: If you want that administrator can’t login through user login page then add following code to do this.
\nAdd the mentioned code in function yourmodule_external_validate
\nroles);\n if ($user_access_granted) {\n form_set_error('', t('Only front user can login.'));\n return FALSE;\n }\n else {\n return TRUE;\n }\n}-->Complete code of function yourmodule_external_validate looks like:
\nroles);\n if ($access_granted) {\n return TRUE;\n }\n else {\n form_set_error('', t('Only site administrator can login.'));\n return FALSE;\n }\n }\n else {\n $user = user_load($form_state['uid']);\n $user_access_granted = in_array('administrator', $user->roles);\n if ($user_access_granted) {\n form_set_error('', t('Only front user can login.'));\n return FALSE;\n }\n else {\n return TRUE;\n }\n }\n}-->If you are searching over the web and can’t find anything to create separate admin login page in drupal, Please follow the mentioned above steps and you are done. Also create different layout for this admin login page.
\n","frontmatter":{"title":"Separate Drupal Login Page for Admin and User","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"October 29, 2015","updated_date":null,"tags":["Drupal","Admin Panel"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9047619047619047,"src":"/static/1946d03fb98b01c53c55a9c4b72a0ab8/ee604/drupal.png","srcSet":"/static/1946d03fb98b01c53c55a9c4b72a0ab8/69585/drupal.png 200w,\n/static/1946d03fb98b01c53c55a9c4b72a0ab8/497c6/drupal.png 400w,\n/static/1946d03fb98b01c53c55a9c4b72a0ab8/ee604/drupal.png 800w,\n/static/1946d03fb98b01c53c55a9c4b72a0ab8/f3583/drupal.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/separate-login-page-for-admin-and-user/"}}},{"node":{"id":"b61888c5-37f1-5285-a114-be3fb7130184","html":"Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text or changing theme is not a difficult task.
\nTo help you out with that, I have compiled some simple steps to customize your registration or login page. All that you need to do is to add the following code :
\n array(\n 'template' => 'user_login',\n 'render element' => 'form',\n 'path' => drupal_get_path('module', 'yourmodule') . '/templates'\n ),\n 'user_pass' => array(\n 'template' => 'user_pass',\n 'render element' => 'form',\n 'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n ),\n 'user_register' => array(\n 'template' => 'user_register',\n 'render element' => 'form',\n 'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n ),\n );\n return $theme;\n}-->Now that you have implemented hook theme in module file, the next step is to implement three pre-process functions. These functions are used if module needs to override or you want to add something in theme pre-processing.
\nIn the third step, you need to create following template files for login/register/forgot password.
\nNow paste the following code into user_login.tpl.php. Also, don’t forget to modify user_register.tpl.php and user_pass.tpl.php template files accordingly.
\n<!--\n\n \n-->Now your login page will contain new intro text This is my awesome login form. Customization of registration page in Drupal 7 is not difficult and if you follow above mentioned tips, you can design an amazing registration / login / forgot password page according to your audience.
\n","frontmatter":{"title":"Customize User Login, Register and Forgot Password Page in Drupal 7","author":{"id":"Versha Gupta","github":"vershagupta","avatar":null},"date":"August 11, 2015","updated_date":null,"tags":["Drupal"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png","srcSet":"/static/26f698c9942b635d0137bd4039e85ba7/69585/drupal-custom-login-register-password-pages1.png 200w,\n/static/26f698c9942b635d0137bd4039e85ba7/497c6/drupal-custom-login-register-password-pages1.png 400w,\n/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Versha Gupta","slug":"/engineering/customize-user-login-register-and-forgot-password-page-in-drupal-7/"}}}]},"authorYaml":{"id":"Versha Gupta","bio":"She is a software enthusiast, an avid contributor, and a regular blog writer. She usually works with React, UI/UX, Javascript, Node.js, and DevOps.","github":"vershagupta","stackoverflow":"1455329","linkedin":"versha-gupta-4865b339","medium":null,"twitter":"Vershaa_Gupta","avatar":null}},"pageContext":{"id":"Versha Gupta","__params":{"id":"versha-gupta"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}