What a state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of count to increment and decrement it accordingly.
Effects
\nEffects are triggers or watchers that can help you fire a function when a signal updates.
\nLet's say, in the previous example, you want to throw an alert when the count becomes greater than 5.
\nTo do so, you can create an effect using the createEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
createEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})So now, if you click on the Increment button, you should get an alert when it becomes greater than 5:
\nConditionals
\nSolid provides special components called <Show> to render a template based on a condition or the value of a signal. Here's an example of that:
import { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n <Show when={count()>5}>\n <p>Count is greater than five </p>\n </Show>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Once the count becomes greater than 5, the <p> will start showing on the DOM:
For instance, consider the following example that uses the It renders a list of posts fetched from a dummy API: Here's an example that does that: When you enter the red box, the Let's combine all that knowledge to build a small todo application with Solid. To get started, you'll create a new SolidJS project configured with Vite by running: That should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code): Next, install the dependencies by running: And finally, kickstart the app by running: That should open the project for you at Your initial project structure gives the Notice that you also have an Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like: You'll have your top-most parent First, the Second, the Create a JSX file for each of the above components. The To store the Now let's add the template inside the component's JSX: You bind the input field to the You also need to create the Here's how the entire You also need to render this inside the Once you do that, you should see an input field with a submit button rendered by the Now let's work on two simple components responsible for rendering the todos. First is the You use the When you click on an item, you invoke the Finally, render the Great! Let's complete the todo app by writing the logic for adding and deleting a todo. To add a new todo, you only need to complete the logic inside the You'll add the It looks like you're able to add todos now. Awesome! To delete the todo when they're clicked, populate your First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original You can delete todos as well; fantastic! Functionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our And that should give us a much better-looking todo app now: Using effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications? Solid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences: At the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users. Reactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render. With React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications. Even though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React. Solid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time! Web design and CSS have come a long way. And today, modern websites have everything you could wish for alongside stunning designs. Then why should your website's login and signup forms look boring? The web ecosystem has tons of reliable third-party libraries and frameworks to help you build intuitive designs even if you're not a design wizard. Amidst the plethora of libraries comes a utility first CSS framework called Tailwind CSS. So in this post, you'll learn: I'll then walk you through step by step how to use it to create a modern login and signup form with routing in React. Finally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication). If you've heard of Materialize and Bootstrap, Tailwind CSS is much similar in what it offers. It's a CSS framework that helps developers build layouts, components, themes, and whatnot, without writing all the CSS themselves. However, unlike Bootstrap and Materialize, it doesn't give you built-in components out of the box. Instead, it gives you a wide range of fully customizable utility classes that you can use to style your pages. Also, it's pretty easy to integrate with modern frontend frameworks like React, NextJS, VueJS, Angular, Svelte, etc. I'll also explore that shortly when we add Tailwind to our React app. On the downside, Tailwind might make your HTML bloated with loads of CSS classes for small and specific rules. However, you can control it with a framework like React by building smaller reusable components and using JSX bindings for long class names for more maintainability and readability. In fact, we'll take this optimal approach in building our Login form, so you'll understand some best practices you can use to avoid bloated HTML templates in your React app. We'll create a simple yet modern looking login and signup form that looks like this: It will be interactive using React state, can route to different pages, and we'll also, in the end, talk about how we can make it functional from a backend standpoint. Sounds good? Let's start by understanding how we can add TailwindCSS to our React app. Inside a directory of your choice, create a new React project by running: Next, move inside the project and install react-router-dom by running: Now, add Tailwind to your React project by following the steps given here. First, install Tailwind CSS and its related dependencies by running the following command in the root directory: Next, generate some configurational files by running the following command in the root directory: That should generate a Awesome! Now, go ahead and update the Almost there! We'll now add some necessary Tailwind directives to your Each of the above directives represents a layer of Tailwind's utility classes that you can use in your project. Their declaration allows using these utility classes anywhere in your project. Finally, we'll kickstart your React project by spinning a local development server: You're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app! We'll break down the entire page into small, reusable components to ensure that your code is readable and maintainable and doesn't have bloated HTML templates. For instance, you can have a Similarly, you can have a reusable custom So first, let's go ahead and create these files and folders. You'll develop corresponding files for the Signup page as well. Create the following files and folders inside your root directory: For perspective, here's how we'll use those components to build your entire Login Page: For the Login.js files ( Similarly, you can create such boilerplates for the rest of the files. You've created a The above file has two arrays: one each for your login form fields and signup form fields. Each array contains an object that contains attributes for the input fields. The field names should be self-explanatory as to what they represent. Here's a quick summary of that: Later, we'll use this array to cycle through each input field and render a custom As you already have your components boilerplates in place, let's first set up routing for your app. By default, when a user opens the app, we'll direct them to a Login page. Then, if the route changes to /signup, we'll direct them to a Signup page. Head over to your Notice that you have two containers wrapped around your The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the Finally, we have some padding classes prefixed with Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes. Now, let's create the Head over to Your Using the ' justify-center ' class, we place all these elements inside a flexbox container and horizontally center them. There is also an outer container that simply gives the header some bottom margin using the Then, we give our header image some fixed height and width using the Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight. Let's now go ahead and render the Here's what the login page should now look like: Let's now start building the rest of the Login page form. We'll now create our reusable and great looking Head over to the Remember all those fields' key-value pairs you set earlier in your Those are all the props your Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here? As there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called We also take a Next, create the Based on your Then we have a Then we simply loop through the Before seeing how the login form looks, you need to render it inside your Login page. So render the above Now, if you go back to your React app, you should see your Login page input fields appear as follows: Excellent, it looks like you're almost there! Now add the final pieces to the Login page by writing the The Inside Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI. Let's go to the Add the following code inside this file: Notice that you also have loads of CSS classes inside our At last, we'll put everything together inside And once we do that, we should have a stunning, modern looking login page appear right in front of us: You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further. Feel free to take this as a challenge and build it yourself based on what you've learned. Here's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes. First, create a main Here's how the entire code looks like: Then, render this component inside And that's it! That's all there is to build a great looking signup page that looks as follows: Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here. You can use LoginRadius to quickly set up an authentication backend for your frontend application. First, set up an account, and get your API key from your Account Dashboard. Then, you can use their login endpoint to authenticate users. The endpoint takes an email and password as parameters and validates them against the correct credentials. If we were to integrate this endpoint in our previously built Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself. Curious to learn more? I did a full-fledged guide on authenticating Svelte apps with LoginRadius here. In this tutorial, you have learned to create beautiful registration and authentication forms for your web app with Tailwind CSS. You also learned the advantages and disadvantages of Tailwind CSS and understood how Tailwind CSS works better with React. In this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius. Note: An understanding of React, Hooks, and Next.js is beneficial to follow this tutorial. Authentication is the process of validating that an individual is who they claim to be. Authentication is an essential feature for applications, particularly those that store user data. You should not mistake authentication for authorization. Authorization is the process of verifying that whether a user has required permission to access an asset or data set. Authentication deals with identifying a user, while authorization checks what resources or data an authenticated user has permission to access. Some of the methods used to implement authentication are: Authentication is one of the most critical parts of an application’s security, so you should address it adequately. A few aspects you should consider when assessing if you should build your authentication system or use a third-party solution: Identity Provider Support: How many identity providers do you plan to support, if any? With third-party solutions, you can authenticate users with email/password as well as identity providers such as Google, Github, Facebook, and more. Third-party solutions are always working hard to add support to even more providers. They also provide other authentication methods like Magic Link for passwordless authentication. Can you build an authentication system that allows users to use their preferred authentication method, or will they be restricted? Advanced Security Features: Security and authentication go beyond email/password sign-in. Most third-party solutions provide necessary features, such as email confirmation, two-factor authentication (2FA), etc. You should let the security experts such as LoginRadius do what they do best while focusing on your main tasks — building excellent applications. Considering these factors, it's pretty easier to rely on a third-party solution, and it's also cheaper and more secure than building your own authentication system. Loginradius is the world's first no-code identity platform. It is a simple, implementable solution for adding user authentication and authorization to your website. LoginRadius provides no-code services for authorization, authentication, account security, and much more. It has several interesting features, and some of them are: Next.js offers two authentication patterns — client-side and server-side authentication. With client-side authentication, the authentication logic and user redirection are done in the browser. The page component fully loads before the redirect logic is executed. When this authentication approach is used, developers usually use a loading indicator to indicate to the user that a process is running in the background. The loading indicator helps boost user experience. If the user’s authentication fails, redirect the user to a login page. The following example shows how to handle client-side redirects: The above code snippet handles client-side redirects in the browser using next/router. It also uses an imaginary authentication service, It checks if there is an authenticated user with the This is a simple illustration of client-side authentication and redirection. With server-side authentication, you can redirect a user from, say, A benefit of this pattern is that non-authenticated users do not see flashes of unauthenticated content before they are redirected. The following example below shows how to handle server-side redirects: Using The above code snippet uses the Now that you’ve understood the authentication patterns available, let’s see how to authenticate a Next.js application with LoginRadius. The steps below highlight how you can integrate and authenticate your Next.js applications with LoginRadius: You should create an account to get started with LoginRadius. There is a free plan you can start with. Now that you have an account, you should get the credentials for your Run the following command in your terminal to create a new Next.js application: Next, install the React SDK into the project: You need to wrap the root component with the SDK’s authentication provider. You also need to pass the account credentials to the provider. You can get these credentials from your LoginRadius account dashboard. Navigate to The above code snippet imports the The Now that you've integrated the SDK, let’s add the authentication functionality. Your users should be able to log in and out of our application, so let’s set that up. We will add the log in and log out functionality to a Create a Here, Chakra UI is used for UI components. First, it imports the Then, it passes Having created the Create an With that, you've added authentication to your application. However, you need a way to track the authentication state. You need to know if there is a logged-in user and do something with that information. The SDK also provides You can access information about an authenticated user, such as their email address, from the We are currently rendering both the login and logout buttons in the Let’s update the We conditionally display the login and logout buttons based on the authentication state. If there is a logged-in user, we want to redirect them to the profile page. Navigate to Let’s break down the above code snippet: You have to display information about the authenticated user. Let’s set that up.\nCreate a profile.js file in the pages directory and paste the code below: You should display a user’s information if they're authenticated. Here, you check that they're authenticated with the You can create protected routes to ensure only authenticated users can access those routes. Here, the code snippet uses the The image below shows an authenticated user's profile page. In this tutorial, you have learned about user authentication and understood whether you should develop an authentication system in-house or use a modern identity platform like LoginRadius. Then, you have briefly learned different authentication patterns available in Next.js. And you step-by-step understood how to authenticate Next.js applications with LoginRadius’s React SDK. A working version of the code used in this tutorial is available on Github. All React developers love to leverage the benefits React caters to in developing web applications. But developers need to keep in mind the security postures while creating React web apps. React applications face a vast attack surface and are prone to different vulnerabilities. This article is a checklist of React security best practices that every developer should know before diving into PWA (progressive web application) development.\nIf you are new to progressive web applications and React, let's get familiar with these terminologies first. Progressive Web Apps (PWA) are apps built using web technologies like HTML, CSS, and JavaScript (JS). But these apps deliver the experience, feel, and functionality of a native app. PWA combines new technologies and integrations to build a reliable, engaging, accessible, and secure application. Developers mostly use React on top of HTML and JavaScript to build a progressive web app. React is popular among progressive web app developers. This open-source, robust JavaScript library helps in building user interfaces based on UI components. React gains popularity in the software development industry because it allows developers to create lightweight apps with additional facilities: security, push notification, app-like look and feel, etc. Some popular companies that have become the early adopters of React are Instagram, Netflix, Airbnb, Uber Eats, Discord, the New York Times, etc. React helps developers build a reliable, robust, and secure progressive web app, but these apps face certain security pitfalls also. Developers need to give prior attention to security vulnerabilities, which are often ignored due to faster app development cycles or more focus on product features.\nWith the arrival of each new update in React having more features, the security flaws are getting unnoticed. Such unnoticed actions are increasing security concerns. Here is a list of top React security vulnerabilities that every React developer must address before delivering or deploying their apps. SQL Injection (SQLi) is a widely known web application attack. The cybercriminal intends to perform database manipulation logically to access sensitive information that is not supposed to be displayed. Attackers try to sneak into that sensitive information to collect phone numbers, payment details, addresses, passwords, and other credentials.\nThis technique allows the attackers to manage access to the server, pull the data, and manipulate the values in the database. Apart from data modification, hackers can also delete the data.\nLet us take an example. Let us take an example where the code will search for the current user-ID and the login matching the employee name, where the owner is the current user-ID. Combining both the employee ID and employee name, the following query gets generated. The problem that pops here is that the main code leverages the concept of concatenation that helps in combining those data. The attacker can use a string like There are three major categories of SQL injection based on how attackers gain access to the backend data. In-band SQL Injection: Here the persuader will instigate the attack and gather sensitive credentials via one single channel. Such SQL attacks are simple, and hence, it is one of the most commonly performed SQLi attacks on React apps. It comes with two sub-categories – Inferential/Blind SQL Injection: The attacker pushes payloads targeting the server. Then they observe the behavior and keep track of the server response to know more about the database structure. Here, the attacker cannot witness the data reverting through the attack in-band, hence the name \"Blind.\" There are two sub-categories of blind SQLi. The comprehensive rendering feature of React makes it a preferable choice over other JavaScript libraries and frameworks. But this rendering feature also drags React-based apps to the most widely exploited vulnerability, cross-site scripting (XSS). Cross-site scripting leverages malicious client-side scripts by injecting them into web applications. When the users trigger those scripts, the attackers gain control over the app and steal sensitive information from the web application. Injecting malicious scripts into the react app will make the app release some internal app data. Therefore, React developers should prevent the application from running the script. Here is a typical example of cross-site scripting where the attacker can place and execute a malicious script within the application like this: Now, executing malicious script will make the search look like: Here, StealCredentials() is a function that contains malicious scripts to steal user information.\nLet us now take a look at the types of XSS. This attack gains popularity, not simply because of its potential to harm the target users through the application but because such attacks need more creative and intellectual hackers. But, to prevent such attacks, developers need to become even more creative. You can also use content security policies as the last line of defense against XSS. If all other XSS prevention fails, CSP allows developers to control various things, such as loading external scripts and executing inline scripts. To deploy CSP, developers need to include an HTTP response header called Content-Security-Policy with a value carrying the policy.\nAn example for including CSP is as follows: Broken authentication is a weakness through which attackers can capture one or multiple accounts when authentication or session management is poorly implemented in progressive web apps. This vulnerability helps the attacker take over multiple user accounts, letting the attacker possess the same privileges and access control as the target user. Attackers usually exploit such a React security vulnerability by detecting the authentication solution or bypassing them. The security team labels the authentication as broken when the cybercriminal can compromise users' passwords, session tokens, digital identities, or account information from the React app. Examples of some common reasons for this attack are: Let us take a situation where the attacker could detect the hashes for the following names. The hash function will store the password in a hashed form rather than plain text. But then, humans can easily read the hash. Now, if two different users enter the same password, then these passwords will generate the same hash. Hackers can perform a dictionary attack, and if they crack one password, they can use the same password to gain access to other accounts that use the same hash. Attackers can perform XML External Entities attacks on React web applications that parse XML input. Here the outdated XML parsers of your React app become vulnerable. Such vulnerability can lead an attacker to perform denial of service, port scanning, server-side request forgery, etc. Such attacks occur when an XML input gets referred to an external entity but has a weakly configured XML parser. Here are some examples where attackers are attempting XEE on React web applications that parse XML input. The attacker might attempt to extract data from the server. Another code snippet where the attacker explores the private network of the server by tweaking the code: It is another code snippet where the attacker tries for a Denial of Service (DoS) attack by comprising a potentially perpetual file: It is another popular React app vulnerability where the malicious actor exploits the app by submitting zip files having malicious or arbitrary code within them. React developers enable adding zip files to decrease the file size while they get uploaded. When the app unzips the archive, its malicious file(s) can overwrite other files or perform arbitrary code execution. Attackers can either harm the files existing in the target system or gain remote access to the system. Here is a Zip slip code example demonstrating a ZipEntry path merges to a destination directory without validating that path. Researchers and security professionals have found similar codes in different repositories across many apps. Here is a link to the repository containing libraries and APIs infected by zip slip. CSRF is another React web application vulnerability allowing attackers to persuade users to perform unintentional actions without their direct consent. It does not steal the identity of the legitimate user but acts against their will. For rendering such attacks, the attacker sends an email or a web link convincing the victim to achieve a state-changing request in the application. Before going through the checklist on fixing CSRF vulnerabilities, here is a quick example of how the CSRF GET request will be once the attacker tweaks it.\nA standard GET request for a $250 transfer from person1 to person2 might look like this: When the attacker induces the user to perform some unintended action or runs a malicious script, the $250 gets transferred to the attacker's account. This malicious request might look something like this: Some attackers can also put innocent-looking hyperlinks embedding the request. It might happen that you have pushed a React app's code to GitHub. Now an email/notification is popping up saying, \"One of your dependencies has a security vulnerability.\" That is another method where attackers seek the help of malicious packages to gain access to your React applications. Such malicious packages collect valuable app details and user information and send it to a third party. These packages can also execute malicious code during the package installation phase. These attackers use the concept of typosquatting to make their attacks seamless. Typosquatting is a method of naming the packages based on their original counterparts. It outwits the developers into downloading these malicious packages that can wreak havoc on the React app. Hope this comprehension has given a crisp idea of the top React vulnerabilities and the different checklists developers can use to fix those security flaws. Developers should know how crucial application security is for both the business and its users. As the React features are increasing, there is an equal delay in the number of days taken by the React community to fix any React security issues. In this article, we discussed the most well-known vulnerabilities like SQLi, XSS, Broken Authentication, XXE, Zip Slip, CSRF, and Package & dependency vulnerabilities, plus how to prevent React apps from such attacks. So, developers and product managers should cautiously handle all security-related aspects of a React project by following the checklist given in this article. Writing code to create apps isn't just enough; the code should be as clean and maintainable as your app. Before jumping into the good practices to follow, it's essential to realize the reasons behind the same. It becomes crucial for you to understand coding conventions because of the following reasons: There's basically no defined structure, but you should have a style to follow throughout the codebase. Thus, this section explains how you can structure your codebase for medium to large-sized apps. Put all your imports in order at the very top of the code file. You shall ideally prioritize as follows: Make sure all your imports statements are on new lines, as this will make your imports clean and easy to understand for all the components, third-party libraries, etc. It's easy to get confused about whether to use double quotes (\" \") or single quotes (' ') while working with React. The simple answer is: Also, consider that you use double quotes (\" \") for Please note that I haven't talked about automation extension and tools that can help you maintain most of the best practices easily without looking into separately. But, I wanted to bring this into consideration. Anyhow, you can use extensions like These are the best practices that I've learned practically over time by working in a team, reviewing my mates' codebase, observing open-source projects and repositories, and reading great resources, such as the offical React docs. I hope you gained valuable insights. If you have more suggestions or practices that the React or dev community can follow, please to let us know. Until next time, keep learning, build awesome stuff, and uplift the community. By the way, if you want to add user registration and authentication to your React apps, you can use LoginRadius. It helps you become more efficient and focus more on the core business features of your React apps. A Progressive Web App (PWA) is a more dynamic web application that can run as a standalone. It offers benefits such as: You can learn more about the differences between native apps and PWAs here. In this article, you're going to learn how to build a PWA using React. As React is a popular web framework, this article starts by going over the setup, development process, and spinning it up to see how it looks. For this example, you'll create a simple Counter Page that simply adds or subtracts a number based on button controls. Before you can begin coding, you need to set up your project. Let's start by ensuring you can use React (if you're already familiar with coding in React, you can probably skip this section!). You need to use Node.js with any development using web frameworks such as Angular, React, or Vue -- especially if you wish to use libraries and packages to assist in developing your project. A popular utility in using such packages and libraries is the Node Package Manager, simply referred to as \"npm\". This utility allows you to install/uninstall packages, start your React application build using webpack, and many more other features. For your needs, you can take advantage of npm to create a React application with a PWA template, which allows you to code right away. Whenever you start building a React app, you can use templates offered by Facebook using the 'create-react-app' command with npm. Let's build the PWA starter app by running the following command: The above command can be broken down as follows: Hitting 'Enter' after this command should initiate the build of your starter PWA React application. You should see a stream of prompts in your command-line interface. It may take a few minutes, but if you can see this screen after the command, you have created the project. Here, you can see the following folder structure of your application so far. There are a few files that you shall pay attention to when it comes to PWA's: For your project, you'll build a simple Counter component, similar (if not exactly the same) to the example provided in the React docs: Hooks State Let's start by creating a Counter component. Here, it is named as To speed things up, you can copy and paste the following code in your specific files. Here, it is built out as a simple page and some generic stylings for the component. Note: Here, Material UI's Button component is used. You don't need to and can substitute the Button component with: To use Material UI, run the following npm commands: In your command prompt, entering 'npm start' can spin up your application to a specific With these simple components, let's try to spin this application up and ensure it is working. Enter the command: This starts the application at a set Now, it's all good and ready to have the app live and working, but more interested in the PWA aspect. Focus back on the Essentially, changing the service worker from unregistered to registered will allow you to utilize the app even when it's offline, a key benefit when it comes to PWAs. Check Google's explanation on this topic for more information: Service Worker Registration With the PWA files setup, in order to view the difference, you can deploy your application to a static server using the Once you use the After registering your service worker from In the section above, you can see If you hit the '+' symbol on the right side of the URL ba,r you can install your PWA, just as done here. Use Workbox Lighthouse for testing the capabilities of your PWA: Lighthouse You've learned about what PWAs are and how to build a PWA with React. If you want to quickly add user registration and authentication to your React PWA, you can use LoginRadius. It eliminates the burden of building and maintaining user authentication from scratch and helps you focus entirely on building your app's core features. In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of privileges are assigned to them. You can achieve this with authentication. Through authentication, we validate user-specific credentials to determine if the user is genuine and then assign a specific role, which could be a simple client or administrator access, for example. React user authentication is usually carried out by using a trusted third-party customer identity and access management (CIAM) software. This tutorial uses LoginRadius API to carry out user authentication with React application. You should know React to be able to follow this tutorial. Also, you should have the node package manager or yarn installed on your PC. First, you need to install the LoginRadius React SDK. You can then configure it to provide authentication and role assignment for use within your React application. LoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website. LoginRadius has features to add different login authentication options, including email, phone, and social network logins, such as Google and Facebook. It also provides security on these data. Some security features it offers include: LoginRadius comes with different SDKs, including reactjs authentication, to support different frameworks. One of them is the LoginRadius ReactJS SDK, which allows you to add authentication within your React app. First, you need to create a LoginRadius account with a Developer Pro plan selected instead of the free plan. This is to be able to access role management features, which are only available in the Developer Pro plan. You'll get a page requesting you to create a new application. Click on \"create a new application\". After which, a page comes up where you should enter the name of your app and the URL to your app. Here, Input any name and URL of your choice. LoginRadius allows you to create a custom login page (an auth page that you can customize from the dashboard), which you can then preview. This is a page provided by LoginRadius that you can easily customize to contain different form contents. Features like user log in, signup, email, and password have been pre-implemented on this page. You'll be using this page for registration and authentication with react application. To learn more on how to customize this page to contain more form contents, refer to customizing Auth Page. To be able to use user roles within your app, you first have to set up these roles and their respective privileges from the dashboard. In this tutorial, you'll set up two roles, namely Admin and Client. To set up roles, navigate to your dashboard, click on \"user management\". Click on \"manage roles\" and click on \"add roles\". A popup opens in which you add the role name. And in the permission tab, add what permissions that role should have. This tutorial has added a \"client\" role with a permission called \"view\" and an \"admin\" role with permissions: \"view, edit, delete\". Enable \"set as default\" for the client role to automatically assign the client role to any user in our app by default. To build your application, you'll be using the command-line interface (CLI) with For node users: Alternatively, if you're using yarn, write: Next, Next, you'll install the LoginRadius React dependency using the CLI: For node users: yarn: To use the react-router components, you need to install For node: yarn: Setup a You can find the keys required above in your dashboard within react user authentication configuration: API key and secret. The Auth Page(IDX) is a web page created for you that reflects the configurations you create in our dashboard. You'll utilize this page as the login and signup page within your app and set up routes to route users to a different page based on their roles. Go to the In the above code, you made imports for required modules, set up your Localhosts are whitelisted by default. If you're building your app using a hosted site, you have to whitelist the URL in your dashboard. The entry component in the code is set to the In the Here, you've set up your routes using You'll then create a page that will serve as the landing page for your site. To do this, create a In the code written above, you've used You can style the button to make it easier to see by adding the following code within your As an additional feature, you can use the LoginRadius React SDK to access the API to get parameters that are assigned upon logging in using the login form. You can use this method to check if a user is a client or administrator. Whenever a user creates an account using the form, the user is assigned a unique user-id called In your Here, within your Since it is an asynchronous function, the code below it runs while fetching and awaiting a response. The last code block: You can run the present code by When it successfully starts the server, you would have a similar page as follows: After logging in auth react js, with your user, you'll get redirected to the /login route that then runs the CallAPI component and gives you a result similar to the following: This is the current role of the user. Any user would have the role of client assigned since you've set to assign the client role by default to all our users from your dashboard during the creation of roles. In the above section, you've created a user account with different parameters for the email and password. Upon creation of an account, you get directed to the login page, where you can sign in using the credentials of the created account. Authentication was carried out on the parameters in the input field by the LoginRadius API set up in the Auth Page. Your user authentication is carried out by the API. This checks the input details against the registered user details. If any input not matching this is put in the form, you'll get an alert \"user does not exist\" upon clicking the login button. Upon logging in, your app key and secret are sent by your app to the authentication server. Upon authentication, the server responds with an access token and authorizes the user. To view this token, you can create a new file called The code above runs a fetch request for the access token and displays it when the data is returned. To view the output of this code, import the newly created file into your You then need to run the code by starting the server using the Here, you can see the access token and its details. You can then return your code to the previous You can view and manage user accounts from the dashboard. You can find the panel for this under \"User management\": Manage users: Here, you can view the account information of your users, search for a particular user details using the email, Uid, or phone number as the query in the search box. Also, the panel provides an option to reset the password of a user, block users, and delete users as the above image shows. You can create new users by clicking on the \"add user\" button and filling in the details of the new user. To view all roles and permissions for your app, change the URL in the fetch request to Reload your page, and you'll have an output similar as follows: The user has both client and admin roles because you've added client roles by default to all our users. To assign specific roles to different people, first you should uncheck the set as default in the \"manage roles\" section of your dashboard. You can then run an In the code above, you've created a const email that returned an array containing the user email. To get the email specifically, you've created another variable The This tutorial covered: These privileges can be used to give users certain permissions as to what they can do on your website. LoginRadius is a great tool and is easy to implement if you want to implement authentication in your application. A working version of the code used in this tutorial is available on Github. There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them. This is a Renderer for Figma. It can use React components as a design source. Sample code with react-figma: Nowadays, Figma is the most popular design tool, similar renderers available as well: A device like Arduino can be operated by React components. Let's checkout demo code : Another React solution for CLIs. It allows you to run, build and test your CLI output through components: The code of the demo: Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc.\n This is a great React renderer for threejs on the react-native and web. Let's see a sample code: The library has a great ecosystem along with packages such as A renderer for React that render nothing. It provides you kind of high-level abstraction to Node. Another reconciler for DOCX.js. Let's understand with a sample code: Also, you can checkout Can visit this Github Repo for a curated list of react renderers. 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. Context provides a way to pass data through the component tree\nwithout having to pass props down manually at every level. 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. 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 Using context, we can avoid passing props. Let's create the above example code using context: We 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 Using React.createContext, we can create context and pass anything as an argument to This will also give me import React from \"react\"; const ColorContext = React.createContext(\"white\");\nexport default ColorContext; To 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. After 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 The approach to providing context is the same for class and functional components but consuming is a little different for both. Mainly used way to accessing context in class component using static The traditional way to accessing context values is by wrapping the child component in You can use 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 Now you can update and view the user from the Context method. In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it? The problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. ** This 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. 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. In 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. React 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. Now let's understand the concept with the code. 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. React Error Boundaries provides a method to handle these errors efficiently! First, let's make an error boundary component. Here is an example: In the above example code, you will see a static method Now let’s see how we can use this 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. First, 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. React 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 Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code and set the priority loading of the code snippet. But how do we set the priority or load them whenever required? Using this we can set code priority to the lower or it will load only whenever required. So how to do that? it's easy, let's understand through an example. Once the component is set for a lazy load then we need to set some kind of fallback option as well, till that code is rendered. This fallback option either could be a loader icon, screen, image, etc. Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React application by leveraging LoginRadius and the LoginRadius CLI with the help of examples. Using the LoginRadius CLI, you can perform basic actions of your LoginRadius Dashboard through the command line. The actions include login, register, logout, social configuration, domain whitelisting, site management, etc. Once the actions are performed, changes will be reflected in your application. Please follow the steps below to install the LoginRadius CLI on your system. Once completed, use the CLI to finish registration on the LoginRadius portal and create your application. Install the tap using: Then, you can install LR CLI via: Once you have the CLI installed, the following command can be used to complete the registration process via the LoginRadius portal. This command will open the Portal in the browser, where you can register yourself and create the app. Here, a callback URL refers to a URL in your application that LoginRadius would redirect a user to after they have been authenticated. These URLs must be added to your Application Configuration. If not set, users will be unable to login into the application and receive an error. For security reasons, LoginRadius only processes API calls that are received from the whitelisted domains. To get the list of whitelisted domains, run For the purposes of this tutorial, make sure that you set This tutorial uses a demo app based on the Create React App (CRA) boilerplate. For instructions on how to create a React App, refer to the following docs. The React Demo Application mentioned here will display the User Profile data if the login process is completed successfully. After setting up the boilerplate: From the project root, install This tutorial uses LoginRadius Auth Page(IDX) for authentication, where Registration and Login functionality is already implemented. For example, you can navigate your Register buttons to In your By doing this, we are redirecting our application to the LoginRadius Auth Page and are passing the In your The Login component will call the LoginRadius API to fetch the user data by making use of the In your This component contains logout functionality. Here, Full code of the demo can be found on github. Run the React Application from the command line using Congratulations! You have set up a React Application configured with LoginRadius using LoginRadius CLI. Continue reading to check out some cool and advanced features of the LoginRadius CLI that will help you manipulate and configure the LoginRadius Auth Page for your application through the CLI. This section explains the use of the LoginRadius CLI in enabling users to quickly and efficiently make changes to the LoginRadius Auth Page configured for their application. We can add social login methods like Google, Facebook, etc., to the LoginRadius Auth Page using the CLI. Use the After changing the theme, navigate to the LoginRadius Auth Page using This functionality is only available for paid Developer Plans and above (not available for LoginRadius Free plan). We can update the Registration Page schema using the In the below image 2 fields have been added to the registration schema, Instead of using the The entire description for these commands can be found in the LoginRadius CLI Manual. The LoginRadius CLI is open-sourced under LoginRadius Organization. You are welcome to contribute to it, suggest improvements, or report bugs by following the contributing guidelines. You can also checkout our open source page if you wish to contribute to other opensource projects by LoginRadius. Using the LoginRadius CLI, you can easily setup authentication for your React applications. You can also perform certain LoginRadius functionalities and processes efficiently through the CLI, which saves a bunch of time. LoginRadius will handle all the authentication-related mechanisms so that you can solely concentrate on your application development. I hope you enjoyed this tutorial and found it to be useful. You can provide feedback or suggestions in the comment section below. Cheers!!! Recoil js is another state management library for React. Though we already have Redux. Mobx, Context, but here we got a new light entry in the community. Why I am saying There are two major concepts: Something new? Don't worry will understand this quickly. This is similar to how we use the e.g.: age : this will be used for state variable declaration.\nsetAge :this will be used for state variable updations. Now you need to make a few alterations in your app's root level, like the below snippet. Now update your older code snippet. to Recoil calls this part as atom, where we set the global key, value. Now this atom will be accessible throughout the app. Now update your older code snippet. to For a Larger view, here is Full Code Quite easy. Isn't it?\nNow let's move to another part selectors. This is similar to how Redux manages states. if a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors. In the below example, we are getting Now will use the above-mentioned selector. below code snippet use For a larger view, here is Full Code That's all, Milord. I hope you got why I am saying this as Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community. In this article, We will discuss the manipulation of DOM elements with Ref directly with React. React 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 are a function that use to access the DOM from components. You only need to attach a We can also use Refs to direct access to React elements and use callbacks with them. We should only use We can use Note: We should avoid using refs because it removes the purpose of using React. For example, If you want to show and hide a \t We can use In above code, We created Then in the We should not use React will assign the We can pass refs as props to the component. Example: In above code, We can create ref using another way called Instead of passing 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. We can pass callback refs between components . Example: In the above code, We passed the function to 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. To understand more about React refs. Read Refs and the DOM One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s One of the fundamental differences between ES5 and ES6 in regards to React implementation is the new You would rely on a helper module called And it is within the object passed into Which, in ES6 implementation would be the equivalent of: One difference worth noting is that the Or otherwise use the “arrow function” shorthand which takes care of binding: Since the update to ES6, there have been multiple new React iterations. You could now forgo the You can read more about React's ES5 support in the official doc entry here, and the v0.13.0 beta release blog entry here, for the respective ES6 changes. 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. This 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: In 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. A new application was created for you when you signed up for LoginRadius. From here, you get some essential information. We will use an API framework to call LoginRadius APIs for authentication. Create a new file LoginPage.js, and add the following code. In the above code, you will see the Create LogoutPage.js file and add following code: In the above code, we have called invalidated token api, which expires your access token. Create SignupPage.js file and add the following code: In the above code, You will get a success/error response after calling the registration api. The 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. Let me know what you think of this tutorial in the comments below. Thanks for reading :) Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. This includes making HTTP requests to external services, accessing browser storage, and executing I/O operations. These operations are also known as side effects. Redux Saga helps to organize these side effects in a way that is easier to manage. A redux store natively only knows how to dispatch actions and update its state using its root reducer. Actions represent an event describing something happening in your application and an intention to change your application's state. A reducer accumulates values from or stemming from dispatched actions and accumulates these values into the newly updated state of your application. Reducers must be written as a pure function, as it is necessary to enable useful features of Redux such as time travel (replaying past actions). Actions are simply objects passed on into the reducer and are naturally deterministic. Thus we have a problem; there isn't any place in your Redux application to put your side effects in. A Redux middleware lies between an action and a reducer. This enables actions to contain something else other than a plain object, as long as the middleware intercepts this, performs its logic, and returns a plain object to pass along to the reducer. Redux Thunk, a common alternative to Redux Saga, allows functions to be passed into the Redux store dispatch, which checks to see if it is a function or an action object, executing the function in the former case, and directly passing along the action object to the reducer in the latter case. These functions can then perform whatever complex asynchronous logic that it wants and produce a plain action object to be then passed into the reducer. Redux Sagas are slightly different in that a separate set of actions are defined in your Redux application, which is captured exclusively by watcher functions (as part of your saga). Upon capturing the action, the saga will execute the corresponding logic and dispatch a resultant action to your application's reducer. The saga essentially acts as a separate thread to your application, listening for specific actions from your main application to perform complex asynchronous tasks and updating your application's state once it is completed. While I wouldn't say Redux Saga is inherently better than any of the alternatives available, it does have a few benefits that might make you want to consider using it. Redux Saga offers a place completely decoupled from your action creators for you to handle your application's side effects. Some people may feel that this makes your application's data flow harder to follow (which I would agree with), but I think that this decoupling makes organizing your codebase and extending functionality easier down the road. For example, in a situation where you might need to support a workflow that requires multiple HTTP requests to different services in a particular order, Redux Saga allows you to compose granular sagas into a single one and represent this new high-level function with a separate action. Your application can still access each individual HTTP resource in other workflows, but for this particular one, your React component can simply call this high-level action to load whatever it needs from a single place. As far as your component is concerned, your asynchronous logic to load multiple resources in a particular order is abstracted away. Redux Saga also offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed. For example, one of the most commonly used helper functions is Now imagine that you had two functionally independent components that needed to retrieve the most up to date data from the same place. Previously they existed on two different pages and could both be visited at any time. It would make sense for both components to try to retrieve a fresh copy of the resource whenever it is visited. Now imagine that your specification has changed, and now the two components need to exist on the same page. Now you have a situation where two different components are redundantly spawning the same task. Obviously, you could rewrite one of the components to no longer try to retrieve a fresh copy and rely on the other to create the necessary action to retrieve this resource and populate the application store. Or you could add some logic to ensure that your component does not try to create a new action to retrieve this resource if this resource is already being loaded. But this could also be solved using another Redux Saga helper function: With this, your two independent components can coexist together without changing any component-specific logic! As far as your component is concerned, it asks your saga to retrieve a resource on its behalf and retrieves it from the resultant updated state. Your saga gets to decide how it wants to handle two requests from different components. There is a fair bit more to Redux Saga than I managed to cram into this post. If you're interested in incorporating it into your project or want to know more, check out their fantastic documentation here: Redux-saga. It's packed full of useful examples if you'd like to get into the low-level details. Redux Saga is one of many tools that can help you handle your application's side effects. It's heavy and has a learning curve but contains a lot of functionality that will help keep your codebase neat and modular. React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started building my first React app. Back then, I was used to the concept of serving separate web pages whenever the user redirects from an URL path to another, and it was rather challenging at first to wrap my head around how React handles navigation. With that in mind, this blog post aims to lay down and explain the basic aspects of navigation using React Router, one of the most, if not the most, popular solutions for navigation within a React app. Throughout the first section below, please reference this CodePen example. As hinted at in the preface of this writing, routing in React does not involve replacing the HTML, CSS or JavaScript resources currently being served or reloading the browser content. Instead, using libraries like To accomplish this, the basic building blocks that developers get to play with are First off, let’s create some simple text components. These components are stand-ins for actual components to be swapped in and out in navigation. HelloBanner will be a div containing the simple message “Hello”, and WorldBanner containing “World!”: Now let’s imagine the layout of a conventional web application with a top navigation bar. The navigation bar contains links to each section of the app and the body would show the content of the current webpage. The skeleton code for that container would look something like this in React: If you are currently looking at the render of this structure from the CodePen, you would see this very simple UI: Clicking on the This is demonstrated through the example app. Once you click the links to /hello or to /world, the corresponding component will be swapped in under the A couple of noteworthy things from the code example: The workflow described above is intuitive from the end user’s point of view. However, there are times when the application’s internal logic demands a redirection to be performed following app events. In these occasions, React Router leverages the For a traditional setup, the In the example above, you can see all the components required to extract the For a more updated approach, React Router introduced the hook Certain redirects are unique in nature, and/or contain certain information about the previous user activity that you might want to pass on to the new component. In this case, the information can be passed through history states into the new component, which will then perform custom behavior based on these states: When using The same object can be used as argument to the Once the state has been included with the redirection, on the receiving end, you can extract the state from the The state access is in At this point, hopefully, we have covered all the big bullet points to help you get started with navigation using React Router. I hope this write-up has been informative and helpful to your understanding of navigation in React, as well as helping you build your next React application. React Speech Recognition is a react hook that accesses the Web Speech API to convert speech from the machine’s microphone to the app’s React components. There are two hooks in this framework: This version requires React 16.8 so that React hooks can be used; please see the full framework README here for more information. Note: This framework uses WebSpeech API. Browser support for this API is currently limited, with Chrome having the best experience. As of June 2020 these browsers support the API: I will be making a simple voice memo app with basic voice commands that run in the browser. If you would like to follow this tutorial, please be ready to work with the create-react-app boilerplate. NOTE: We haven't built the Dictaphone component yet; we'll jump into that next! And that's it for our basic setup! Next, we need to fetch certain props out of useSpeechRecognition. The props we will need are transcript, interimTranscript, finalTranscript, resetTranscript, and listening. You can do so like this: We will also need to enable commands through this hook so add commands to gain access: Moving swiftly onward, we need to need to add several functions that are built into the hook and React. First we will be using useEffect to print the transcript to the page. We will add some page elements to access our dictaphone and print the words to the page. We will need three buttons: stop, listen, and reset - to control the dictaphone and reset the transcript. We may also want to add an indicator that informs the user if the dictaphone is listening or not. Within Dictaphone's return div create the following elements: Your return statement should look similar to this: If you go to localhost:3000 in your browser, the dictaphone should now be working. Now that our dictaphone is working, let's add some commands. We won't do anything too complicated but instead access the functions we already have at our disposal. Within the dictaphone component, declare an array called commands. This will be an array of objects containing two properties each: A voice command that resets the transcript should look like this: When the dictaphone picks up the words 'reset' or 'clear' from the user's speech, it will execute the callback associated with the command. Let's add a response feature. If we add a react hook to manipulate the state like this: Then add the message to the output, we can add commands that generate a response. For instance, if I were to say ‘Hello’, the app would print back 'Hi there!' or something to that effect. Below, I've written some simple commands. With that our quick dictaphone is complete! Take a look at this code where it all comes together: Thanks for following along, and I hope this helps! React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application. The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to \"prop drilling\" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux. Talking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the \"store\" and be the parent of all the components that might need that store. Apart from the react context Provider, Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page No. Well, not entirely. Redux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a \"true\" React developer if you don't know your way around Redux.\nHowever, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't: Simplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems: Redux is just a concept. If you are comfortable with using reducers and actions and don't find hindering than you may also create reducers and actions that wrap Context API as the store as Redux's author Dan Abramov explained in his medium article about whether Redux is always required You might think to yourself: \"Well, I'm convinced. How do I implement Context API in react for my app?\" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps: The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient). You'll also be able to notice I used the new \"Hooks\" feature that is shipped with React since version 16.8 to make it even neater and easier to create contexts. I mentioned how people overuse Redux, and it also applies to Context API. Use it only when you need to share state between lot's of components with a lot of nesting.\nMost of the time, the data you have in one component will only be relevant to its children, so passing it in props is more indicative and nicer. You may have come across the term- “lazy loading in React”, but most of you won’t be familiar with exactly what is lazy loading in React. Lazy loading is not a new concept. It has been available for quite some time. In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as Talking about In this post, I will try to explain the advantages of lazy loading in react and how to implement it in In situations where we know that certain code/features will not be accessible to all the users or the user does not access it frequently, it is best to load them when the user requests for it. This improves user experience as well as initial loading time. For example, let's consider that our application has two sections, Note: This is not the general case. Small single-page applications are usually in kbs. To follow this tutorial, you’ll need the following: First of all, create the app using Now run the app by running following command in the project directory root Let the directory structure be From React 16.6+, react added React Suspense which performs lazy loading. In our When talking about react lazy loading, if you are working with React version prior to 16.6, you won't have the Suspense component. It is best to upgrade to the latest version and use Suspense. If you're not able to upgrade and still want this feature, it is still possible to create your own React Suspense component. I will be using Higher Order Component(HOC). Our HOC ( Our calling component, in this case This was all about how to implement lazy loading in react, if you need the fallback feature, you can update HOC's render method where it is returning null. Instead of null, you can return your fallback component, and it can be passed as props too. Now our HOC would look like - Rendering is an essential procedure a programmer has to manage in frontend development. In React, the render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window. Coupled with the clever way React operates around its virtual DOM concept, there are certain subtleties in how this method works. Understanding them will greatly benefit any aspiring React developer. Throughout this writing, I will reference this codepen for a demonstration of discussed behaviors. First of all, As mentioned before, Within the lifecycle, these are the scenarios where render is called: If you have the Codepen opened at this point, before anything is rendered you will see 2 alert messages from the browser: Once the set of alerts is dismissed, a very simple UI will render: The dotted border line distinguishes between elements that belong to the Child component of the example (inside the dotted line) versus the Parent component. A visual and interactive reference to the React lifecycle can be found here. It is worth noting that following a props update or The The characteristics and behaviors mentioned above made it imperative that In terms of return value: The While not every single detail is known about React’s reconciliation algorithm, the characteristics detailed in the official documentation are enough for us to start phasing out certain suboptimal rendering patterns, thus writing a more robust For instance, given this DOM subtree: If a If instead In the example above, appending If you have ever tried to use the A Coming back to the example above, let’s add keys to all the existing list items: In this case, if we were to add an extra “list item 4” at the top of the list, it would not come with the same performance penalty: In case a subtree is generated using a React is a clever framework that offers performance through its rendering scheme, so it follows that, as developers, we should leverage it appropriately to help build performant applications. With that said, it is not a miracle device that optimizes out inefficiencies from the developer’s end, but a tool to be utilized. Understanding the I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects. Have you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred? Chances are there if you are a react developer, Hopefully we can solve this using the Hooks. Hooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal. The key takeaway maybe this: If the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props. React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component. Advantages of react hooks: As you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other. Let us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference. If you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind! Let us understand some basic hooks with examples. I will take one example and will explain all the hooks in that example using a various scenarios. In this example variable If you are wondering about the React Let's understand the As you can see, In this example we have used the But there is one problem, while executing this component you can see that the To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of For eg : I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs. We can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules. So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes. I hope you find this article useful, Happy Reading !!! Biggest 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. In this post, We are going to take a closer look at both React hooks and Redux to manage the state. React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings. The 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. Make a state variable responsible for one concern to use efficiently. 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. Here is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product. If 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. Let’s discuss how to use react state management using react hooks and redux Redux 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. There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does. Actions are payloads of information that send data from your application to your store. Actions are sent using Here is an example of its action creator: 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: The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods. Let’s create a store for our TODO app: 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. These 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. Hooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like Please see the following examples of some react hooks as follows: In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the 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. Example of useReducer: useReducer 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. Below an example of todo items is completed or not using the useReducer react hook. See the following function which is a reducer function for managing state transitions for a list of items: 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. The state which is managed in this reducer is an array of items: 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 Complete file: Let’s do a similar example with Redux. Store in App.js. Actions in actions/index.js. Reducers in reducers/index.js. FIle components/Todo.js React offers react hooks which can be used as an alternative for 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. Overview The “reconciliation” algorithm in React is how the decision to re-render the component is made. In the browser, DOM manipulation is expensive and time consuming, both in mounting and unmounting. Part of what makes React very performant is its reconciliation algorithm. In short, it watches closely for differences, and only updates the DOM when necessary and tries to update only the parts which need to be changed. The “Virtual DOM” The Virtual DOM is a theoretical DOM tree generated by React when a change is made to a component’s state. This is modeled after the state of your application upon modification of the state, for example, after calling this.setState(). React uses what is called a “snapshot” to make this comparison and analysis between the DOM before the update, and the DOM after. This is the point in time when React utilizes its reconciliation algorithm. Updating the Virtual DOM is much faster than the real DOM, since the browser doesn’t need to show a visualization of it. How updates are determined The reconciliation algorithm is run whenever the component level state is updated. It analyzes the current DOM with the Virtual DOM, in order to determine which changes need to be made to the real DOM. After this step, it has determined which DOM nodes on your application require updates, and it calls the render method. Effect on DOM elements and their attributes The reconciliation algorithm does not only look at whole DOM elements, it also looks at individual attributes. You can think of the difference as a PUT request vs. a PATCH request, where it only updates the parts which have changed, rather than updating the entire object if there was a change. While it doesn’t unmount and remount the entire element if it doesn’t have to, sometimes it does have to. An example of this would be if you render an element of a different type. Suppose you wanted to switch between two components or elements, perhaps for conditional rendering. This would result in a full unmounting of the component, regardless of whether or not they contain the same child nodes. This differs from switching attributes on the same type of elements, an example of which might be dynamic class names, based on component state. In this scenario, the DOM element is not destroyed, and only the modified attributes are changed. This is useful because it performs minimal operations on the DOM, which as we know, is more resource-intensive than standard object operations. Keys and rerenders The \"key\" attribute in React can be used to mark whether or not a DOM node is stable. You may have seen a message in the console if you’ve ever attempted to map over a collection and return a JSX element each iteration. This is because the reconciliation algorithm uses the keys to determine if the content has changed, and not including a key may cause unexpected behaviour. For this reason, the keys should be unique so that reconciliation can recognize and identify which elements are stable, and which elements are not. Suppose that you have a list of items, which is derived from an array. If you were to splice an item into the middle of it, that will change all of the indices of the subsequent items. In this scenario, since the keys will not be a stable, unique representation of each item, React can end up mutating the unintended item, which can cause major bugs. A detailed explanation of keys can be found on the official React docs: For an in-depth exploration of how and why reconciliation was implemented, please visit the official React docs:onMount method to fetch and render some data:
\nimport { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n const [posts, setPosts] = createSignal([]);\n\n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n setPosts(await res.json());\n });\n\n return <>\n <h1>Effects: onMount</h1>\n\n <div>\n <For each={posts()}>{ post =>\n <p>\n {post.body}\n </p>\n }</For>\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));onCleanup
\nonCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.
\nimport { render } from "solid-js/web";\nimport { onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n const handleMouseEnter=()=>{\n console.log('Entered the box')\n }\n\n onCleanup(()=>{\n const box=document.querySelector('#box');\n box.removeEventListener('mouseenter',handleMouseEnter)\n })\n\n onMount(async () => {\n const box=document.querySelector('#box');\n const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n });\n\n return <>\n <h1>Effects</h1>\n\n <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>. Build a Todo App with SolidJS
\nSetup
\n
\nnpx degit solidjs/templates/js my-app
\ncd my-app && code .
\nnpm i
\nnpm run starthttp://localhost:3000. Awesome!Architecture & Boilerplate Code
\n<App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
\nimport styles from './App.module.css';\n\n\nfunction App() {\n \n return (\n <div class={styles.App}>\n \n </div>\n );\n}\n\nexport default App;App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way. <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components. <AddTodo> component will be responsible for adding a new todo.<Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component. The
\n<AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.
\n const [newTodo,setNewTodo]=createSignal('')
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event. handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.
\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }<AddTodo/> component looks like:
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;<App/> component:
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n const addTodo=(newTodo)=>{\n \n }\n\n const deleteTodo=(todo)=>{\n\n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n </div>\n );\n}\n\nexport default App;<AddTodo/> component on the screen:Rendering Todos
\n<Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
\nimport { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n console.log(todos())\n return(\n <For each={todos()}>{(todo,ind)=>\n \n }\n </For>\n )\n\n}\n\nexport default Todos;<For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.
\nfunction TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;deleteTodo function and pass the clicked todo item as a parameter. <Todos/> component inside the root <App/> component.
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n const [todos,setTodos]=createSignal([])\n\n const addTodo=(newTodo)=>{\n }\n\n const deleteTodo=(todo)=>{\n \n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n <Todos deleteTodo={deleteTodo} todos={todos}/>\n </div>\n );\n}\n\nexport default App;Adding and Deleting Todos
\naddTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
\nconst addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:deleteTodo function:
\n const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }todos signal with this copy using the setTodos setter. Let's test it out now:Styling the App
\nApp.module.css file:
\n*{\n margin: 0;\n padding: 0;\n}\n\n.App {\n text-align: center;\n height: 100vh;\n background: #F8F8F8;\n padding: 100px;\n display:flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading{\n font-size: 96px;\n margin-bottom: 20px;\n}\n\ninput{\n border-radius: 12px;\n outline: none;\n border: none;\n padding: 5px 20px;\n margin-right: 20px;\n height: 60px;\n width: 400px;\n font-size: 24px; \n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n height: 65px;\n width: 150px;\n border: none;\n outline: none;\n border-radius: 12px;\n font-size: 24px;\n padding: 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n cursor: pointer;\n font-weight: 600;\n background:#2e3136;\n color:#fff;\n}\n\np{\n height: 60px;\n background: white;\n width: 600px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 24px;\n margin: 20px 0px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n background: rgb(232, 169, 146);\n color:#fff;\n cursor: pointer;\n}\n\n\n.header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}Performance
\nSolid is Truly Reactive
\nCommunity Support, Documentation, and Resources
\nConclusion
\n\n
\nWhat is Tailwind CSS?
\nWhat You'll Build Today?
\nProject Setup
\n
\nnpx create-react-app react-tailwind-app
\ncd create-react-app react-tailwind-app && npm i react-router-domInstall Tailwind CSS
\n
\nnpm install -D tailwindcss postcss autoprefixer
\nnpx tailwindcss init -ptailwind.config.js file and postcss.config.js file for you as shown:Configuring Tailwind CSS
\ntailwind.config.js file to support templates for your React component files as shown:
\nmodule.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}index.css file present in the root directory:
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...
\nnpm startFrontend Architecture and Boilerplate
\nComponent Architecture
\n<Header/> component that takes care of the page's heading and displays a link to navigate to another page. <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:Directory Structure
\n
\n.\n├── components/\n│ ├── FormAction.js\n│ ├── FormExtra.js\n│ ├── Header.js\n│ ├── Input.js\n│ ├── Login.js\n│ └── Signup.js\n├── constants/\n│ └── formFields.js\n└── pages/\n ├── Login.js\n └── Signup.js/src/pages/Login.js), you can put down the following code:
\nexport default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Form Fields Constants
\nformFields.js file earlier. This file will hold all the input fields related constants like placeholder, value, name, field type, etc. Inside this file, add the following code:
\nconst loginFields=[\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n }\n]\n\nconst signupFields=[\n {\n labelText:"Username",\n labelFor:"username",\n id:"username",\n name:"username",\n type:"text",\n autoComplete:"username",\n isRequired:true,\n placeholder:"Username" \n },\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n },\n {\n labelText:"Confirm Password",\n labelFor:"confirm-password",\n id:"confirm-password",\n name:"confirm-password",\n type:"password",\n autoComplete:"confirm-password",\n isRequired:true,\n placeholder:"Confirm Password" \n }\n]\n\nexport {loginFields,signupFields}\n
\nlabelText: The label for an input fieldlabelFor: The value that associates a label to the input field via an id attribute on the input fieldid, name , type, and placeholder: Respective attributes on the input field isRequired: If you want to make an input field mandatory, in this case, all our input fields for form submission will be mandatory<Input/> component that you'll create shortly.Set Up Routing
\n/src/App.js file and add the following code:
\nimport './App.css';\nimport {\n BrowserRouter,\n Routes,\n Route,\n} from "react-router-dom";\nimport SignupPage from './pages/Signup';\nimport LoginPage from './pages/Login';\n\nfunction App() {\n return (\n <div className="min-h-full h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">\n <div className="max-w-md w-full space-y-8">\n <BrowserRouter>\n <Routes>\n <Route path="/" element={<LoginPage/>} />\n <Route path="/signup" element={<SignupPage/>} />\n </Routes>\n </BrowserRouter>\n </div>\n </div>\n );\n}\n\nexport default App;<BrowserRouter/> with some long classnames. min-h-full and h-screen classes. Then, it centers everything via flex, items-center to vertically center all the flex child elements, and justifty-center to center them horizontally. p. For top and bottom padding, we use the prefix py- followed by some value. We also have some responsive padding on small and large screen devices prefixed with sm: and lg: respectively. You can learn more about these padding and margin properties to see other similar classes you can use. The Header Component
\n<Header/> component that you can render on both the login and signup pages for quick information and navigation./src/components/Header.js, and add the following code:
\nimport {Link} from 'react-router-dom';\n\nexport default function Header({\n heading,\n paragraph,\n linkName,\n linkUrl="#"\n}){\n return(\n <div className="mb-10">\n <div className="flex justify-center">\n <img \n alt=""\n className="h-14 w-14"\n src="https://ik.imagekit.io/pibjyepn7p9/Lilac_Navy_Simple_Line_Business_Logo_CGktk8RHK.png?ik-sdk-version=javascript-1.4.3&updatedAt=1649962071315"/>\n </div>\n <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">\n {heading}\n </h2>\n <p className="mt-2 text-center text-sm text-gray-600 mt-5">\n {paragraph} {' '}\n <Link to={linkUrl} className="font-medium text-purple-600 hover:text-purple-500">\n {linkName}\n </Link>\n </p>\n </div>\n )\n}<Header/> component takes four props:\n
\nheading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.mb-10 class.h-14 and w-14 classes, respectively. <Header/> component with all the props inside the Login page (/src/pages/Login.js):
\nimport Header from "../components/Header"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n \n </>\n )\n}The Input Component
\n<Input/> component that you'll use to build your Login form./src/components/Input.js file, and add the following code:
\nconst fixedInputClass="rounded-md appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"\n\nexport default function Input({\n handleChange,\n value,\n labelText,\n labelFor,\n id,\n name,\n type,\n isRequired=false,\n placeholder,\n customClass\n}){\n return(\n <div className="my-5">\n <label htmlFor={labelFor} className="sr-only">\n {labelText}\n </label>\n <input\n onChange={handleChange}\n value={value}\n id={id}\n name={name}\n type={type}\n required={isRequired}\n className={fixedInputClass+customClass}\n placeholder={placeholder}\n />\n </div>\n )\n}formFields.js constants file?<Input/> component will take. It will also take a value and a handleChange prop since we want this to be a controlled component linked to some state.fixedInputClass. It contains all the essential styling classes for the input field.customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!The Login Component
\n<Login/> component inside /src/components/Login.js, where the entire Login form will be rendered. This component will also be responsible for owning any state or event handlers passed down as props to other child components.loginFields from your formFields constants, we programmatically generate an initial value for your loginState.handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component. fields array and render an <Input/> component that you've created in the previous section.
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n\n return(\n <form className="mt-8 space-y-6">\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n \n\n </form>\n )\n}<Login/> component inside /src/pages/Login.js file as shown:
\nimport Header from "../components/Header"\nimport Login from "../components/Login"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n <Login/>\n </>\n )\n}<FormExtra> and <FormAction/> components.Wrapping Up the Login Page
\n<FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality. /src/components/FormExtra.js file, add the following code:
\nexport default function FormExtra(){\n return(\n <div className="flex items-center justify-between ">\n <div className="flex items-center">\n <input\n id="remember-me"\n name="remember-me"\n type="checkbox"\n className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"\n />\n <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">\n Remember me\n </label>\n </div>\n\n <div className="text-sm">\n <a href="#" className="font-medium text-purple-600 hover:text-purple-500">\n Forgot your password?\n </a>\n </div>\n </div>\n\n )\n}/src/components/FormAction.js file and create a submit button for the Login form.
\nexport default function FormAction({\n handleSubmit,\n type='Button',\n action='submit',\n text\n}){\n return(\n <>\n {\n type==='Button' ?\n <button\n type={action}\n className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"\n onSubmit={handleSubmit}\n >\n\n {text}\n </button>\n :\n <></>\n }\n </>\n )\n}<button/> element to style it. It makes our HTML appear bloated and difficult to read. We can follow the same approach of using a constant and a prop against the className for the <button/> as we previously did to combat this. /src/components/Login.js file as follows:
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport FormAction from "./FormAction";\nimport FormExtra from "./FormExtra";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n authenticateUser();\n }\n\n //Handle Login API Integration here\n const authenticateUser = () =>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n <FormExtra/>\n <FormAction handleSubmit={handleSubmit} text="Login"/>\n\n </form>\n )\n}The Signup Page
\n<Singup/> component inside /src/components/Signup.js file similar to the <Login/> component you've completed in the previous section. It will render the signup form fields and attach state and event handlers to it.
\nimport { useState } from 'react';\nimport { signupFields } from "../constants/formFields"\nimport FormAction from "./FormAction";\nimport Input from "./Input";\n\nconst fields=signupFields;\nlet fieldsState={};\n\nfields.forEach(field => fieldsState[field.id]='');\n\nexport default function Signup(){\n const [signupState,setSignupState]=useState(fieldsState);\n\n const handleChange=(e)=>setSignupState({...signupState,[e.target.id]:e.target.value});\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n console.log(signupState)\n createAccount()\n }\n\n //handle Signup API Integration here\n const createAccount=()=>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={signupState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n <FormAction handleSubmit={handleSubmit} text="Signup" />\n </div>\n\n \n\n </form>\n )\n}/src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
\nimport Header from "../components/Header";\nimport Signup from "../components/Signup";\n\nexport default function SignupPage(){\n return(\n <>\n <Header\n heading="Signup to create an account"\n paragraph="Already have an account? "\n linkName="Login"\n linkUrl="/"\n />\n <Signup/>\n </>\n )\n}Use LoginRadius Authentication APIs
\n<Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
\n//Handle Login API Integration here\n const authenticateUser = () =>{\n \n \n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n //API Success from LoginRadius Login API\n })\n .catch(error=>console.log(error))\n \n }Conclusion
\n\n
\nWhat is Authentication?
\n\n
\nShould You Build Your Authentication System or Use a Third-party Solution?
\n\n
\nWhat is LoginRadius?
\n\n
\n\n
\nUnderstanding Next.js Authentication Patterns
\nClient-Side Authentication
\n
\nimport { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport authService from "auth-service" //imaginary auth service\n\nexport default function ProtectedPage() {\n const router = useRouter()\n\n useEffect(() => {\n const authUser = authService.getUser()\n\n // if there is no authenticated user, redirect to login page_\n\n if (!authUser) {\n router.push("/login")\n }\n }, [])\n\n return (\n <>\n <h1>Welcome {user.name}. This is a protected page</h1>`\n </>\n )\n}auth-service, for illustration purposes. You’ll work with LoginRadius later in this tutorial.authService.getUser() method in the useEffect. If there is none, it redirects the user to the /login page using Next.js’s router object.Server-Side Authentication
\npages/profile to pages/login. When non-authenticated users try to access a protected page, they are redirected to a login page. All of this is done on the server — before the request reaches the browser.
\nexport default function ProtectedPage({ user }) {\n\treturn (\n\t\t<>\n\t\t\t<h1>Welcome {user.name}. This is a protected page</h1>\n\t\t</>\n\t)\n}\n\nexport const getServerSideProps = async context => {\n\tconst { user } = authService.getUser(context.req)\n\n\t// if there is no authenticated user, redirect to login page\n\n\tif (!user)\n\t\treturn {\n\t\t\tprops: {},\n\n\t\t\tredirect: { destination: "/login" },\n\t\t}\n\n\t\treturn { props: { user } }\n\t}\n}getServerSideProps enables rendering pages on the server. You can take advantage of that to also handle the redirection on the server.authService.getUser() method to get the authenticated user’s object. If there is no user, it returns an object with a redirect object. The redirect object contains a destination key, where you can put the page you want to redirect the user to, which is your application’s login page.Authenticating Next.js Apps with LoginRadius
\nCreate a LoginRadius Account
\nGet Account Credentials
\nappName and apiKey from the dashboard. You'll need them later to use the React SDK.Start a New Next.js Application
\n
\nnpx create-next-app <name-of-project>\n//or\nyarn add create-next-app <name-of-project>Install LoginRadius React SDK
\n
\n```javascript\nnpm install loginradius-react\n//or\nyarn add loginradius-react\n```Integrate the React SDK
\npages/_app.js and update it with the code below:
\nimport Head from "next/head"\nimport { LRAuthProvider } from "loginradius-react"\nimport { ChakraProvider } from "@chakra-ui/react"\nimport Layout from "../layout"\nimport "../styles/globals.css"\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <>\n <Head>\n <title>Loginradius Next</title>\n </Head>\n\n <LRAuthProvider\n appName="your-app-name"\n apiKey="your-api-key"\n redirectUri={"http://localhost:3000/"}\n >\n <ChakraProvider>\n <Layout>\n <Component {...pageProps} />\n </Layout>\n </ChakraProvider>\n </LRAuthProvider>\n </>\n )\n}\n\nexport default MyAppLRAuthProvider component from loginradius-react. It passes the appName and apiKey taken from the LoginRadius account dashboard earlier to LRAuthProvider. It also sets the redirectUri to http://localhost:3000/.redirectUri is the callback URL where you want to redirect users after being authenticated. You should whitelist the redirect_uri in your LoginRadius account dashboard. Localhost URLs are whitelisted by default.Add Login and Logout Functionality
\nNav component. Let’s set up the component.layout folder in the root directory, and create a Nav.js file there. Add the following code to Nav.js:
\nimport { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n const { loginWithRedirect, logout } = useLRAuth()\n\n return (\n <Flex>\n <Stack spacing={[6, 8]}>\n <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n <Button onClick={() => logout()}>Log out</Button>\n </Stack>\n </Flex>\n )\n}useLRAuth hook from the SDK. Next, it accesses the loginWithRedirect and logout methods from the useLRAuth hook.loginWithRedirect and logout to the login and logout buttons’ onClick event handlers, respectively.Nav component, we need to create the Layout component we mentioned earlier.index.js file in the layout folder, and paste the code below:
\nimport { Box } from "@chakra-ui/react"\nimport Nav from "./Nav"\n\nexport default function Layout({ children }) {\n return (\n <Box h="100vh" bg="green.50">\n <Nav />\n <Box>{children}</Box>\n </Box>\n )\n}Tracking Authentication State
\nerror and user objects, along with isLoading and isAuthenticated booleans. You'll use these to track the authentication state.user object. If any, you can display error messages from the error object.isAuthenticated returns true if there is an authenticated user and false if there is not.Nav component. However, we don’t want that. We want to display the login button when there is no authenticated user and logout when there is an authenticated user.Nav.js file with the code below to fix that:
\nimport { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n const { isAuthenticated, user, loginWithRedirect, logout } = useLRAuth()\n return (\n <Flex as="nav">\n <Stack spacing={[6, 8]}>\n {!user && (\n <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n )}\n\n {isAuthenticated && user && (\n <Button onClick={() => logout()}>Log out</Button>\n )}\n </Stack>\n </Flex>\n )\n}pages/index.js file and update it with the code below:
\nimport { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport { useLRAuth } from "loginradius-react"\nimport { Button, Heading, VStack, Center } from "@chakra-ui/react"\n\nexport default function Home() {\n const { isLoading, isAuthenticated, error, user } = useLRAuth()\n const router = useRouter()\n\n useEffect(() => {\n if (user && isAuthenticated) {\n router.push("/profile")\n }\n }, [router, user, isAuthenticated])\n\n if (isLoading) {\n return <div>Loading...</div>\n }\n\n if (error) {\n return <div>Oops... {error.message}</div>\n }\n\n return (\n <Center pt={10}>\n <VStack spacing={[6, 8]}>\n <Heading as="h2">Welcome</Heading>\n <Text fontSize="3xl">Login to continue</Text>\n </VStack>\n </Center>\n )\n}\n
\nuseEffect, it checks if there is a user object and if isAuthenticated is true. If these conditions are true, it redirects the user to their profile page. These conditions will only be true when the user has logged in. You'll set up the profile page later.isLoading boolean. If true, it displays “loading…”. In a production-ready application, you would display a loading spinner.error object and displays it to the user.Displaying Authenticated User Data
\n
\nimport { Box, Center, Heading } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Profile() {\n const { user, isLoading, isAuthenticated } = useLRAuth()\n\n if (isLoading) {\n return <div>Loading...</div>\n }\n\n if (isAuthenticated) {\n return (\n <Box>\n <Center mt={10}>\n <Heading a="h2">\n Welcome to your profile {user.Email[0].Value}\n </Heading>\n </Center>\n </Box>\n )\n }\n}isAuthenticated hook. If they're authenticated, return some JSX and display the user’s email address.Protecting a Route
\n
\nimport { withAuthenticationRequired } from "loginradius-react"\n\nconst Profile = () => {\n\tif (isAuthenticated) {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\t...markup goes here\n\t\t\t</Box\n\t\t)\n\t}\n}\n\nexport default withAuthenticationRequired(Profile,\n\t//Show a message while the user waits to be redirected to the login page.\n\tonRedirecting: () => (\n\t\t<div>Redirecting you to LoginRadius awesome Login page</div>\n\t),\n});withAuthenticationRequired higher-order component to wrap the Profile component. With this, anytime an unauthenticated user tries to access the /profile route, they'll be redirected to LoginRadius’s login page and then back to /profile after they log in.Conclusion
\nWhat are Progressive Web Applications (PWA)?
\nWhat is React?
\nSecurity Vulnerabilities in React and How to Prevent Them
\nSQL Injection
\n
\nstring query = "SELECT * FROM logondata WHERE owner = "'"\n+ empID + "' AND empName = '"\n+ EmpName.Text + "'";
\nSELECT * FROM logondata\nWHERE owner =\nAND empName = ; 'empName' OR 'x'='x' as the employee name. 'x' = 'x' is such a condition, which will always evaluates to True. Therefore, the statement returns True for all values within the table. So, the following query becomes:
\nSELECT * FROM logondata\nWHERE owner = 'karlos'\nAND empName = 'name' OR 'x' = 'x';\n
\n\n
\n\n
\nChecklist to Fix SQLi Vulnerability in React Apps
\n\n
\nCross-Site Scripting (XSS) Vulnerabilities
\n
\n<input type="search" value="PWA"/>
\n<input type="search" value="Attacker "/> <script> StealCredentials() </script>"> ;\n
\nChecklist to Fix XSS Vulnerability in React Apps
\n\n
\n
\ndefault-src 'self'; script-src 'self'; object-src 'none'; frame-src 'none'; base-uri 'none';Broken Authentication
\n\n
\n
\nSue 4420d1918bbcf7686defdf9560bb5087d20076de5f77b7cb4c3b40bf46ec428s\nKarlos 4420d1918bbcf7686defdf9560bb5087d20076de5f77b7cb4c3b40bf46ec624g\nDee 77b177de23f81d37b5b4495046b227befa4546db63cfe6fe541fc4c3cd216egkChecklist to Fix React PWAs from Broken Authentication Vulnerability
\n\n
\nXML External Entities (XXE)
\n\n
\n
\n<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE sample [\n<!ELEMENT sample POO >\n<!ENTITY xmlxxe SYSTEM "file:///etc/passwd" >]> <sample> &xmlxxe; </sample>
\n<!ENTITY xmlxxe SYSTEM "https://186.141.2.1/privnw" >]>
\n<!ENTITY xmlxxe SYSTEM "file:///gkr/rand" >]>Checklist to Fix XXE Vulnerability in React Apps
\n\n
\nZip Slip
\n
\nEnumeration<ZipEntry> entry = zip.getEntries();\n while (entry.hasMoreElements()) {\nZipEntry ez = entry.nextElement();\nFile fil = new File(destinationDir, ez.getName());\nInputStream input = zip.getInputStream(ez);\nIOUtils.copy(input, write(fil));\n }Checklist to Fix Zip Slip Vulnerability in React Apps
\n\n
\nCross-site Request Forgery (CSRF or XSRF)
\nChecklist to Fix React PWAs from CSRF Vulnerability
\n\n
\nVulnerability in Packages and Dependencies
\nChecklist to Fix Malicious Package Vulnerability in React Apps
\n\n
\nWrapping Up
\nWhy Follow React Coding Best Practices?
\n\n
\nStarting with React Best Practices
\nCode Structure
\n\n
\nReact imports <> Library imports <> import * as <> import ./<some file>index.js for each folder to export so that all the imports are referenced on the index.js file, and you don't have to write import statements again and again for every file.maintain consistency whatever you're using. JSX attributes and single quotes (' ') for the JS code (Follow the standard way or maintain consistency).classNames for each element and put all the styling under respective CSS files only.Naming Conventions
\n\n
\n.js or .jsx as explained in code structure for extensions. And PascalCase or camelCase for filenames.Registration-Form → ❌. RegistrationForm → ✔️.variables/functions/modules filenames are consistent with cases.variables/functions/modules/Actions, keeping in mind that it is application-specific so that even a third party or new developer can easily understand you code._onClickSubmit() → ❌Action types as domain/eventNames. For example: ADD_TODO and INCREMENT (in CAPITALS) as this matches the typical conventions in most programming languges for declaring the constant values.cases in a React component, use PascalCase for the same — and for their instances, use camelCase. For example:-
\nconst loginForm = <LoginForm />;\nimport LoginForm from './loginForm';Files and Folders
\n\n
\n
\n└── /src\n ├── /assets - Contains static assets such as images, svgs, company logo etc.\n ├── /components - reusable components like navigation bar, buttons, forms\n ├── /services - JavaSript modules\n ├── /store - redux store\n ├── /utils - utilities, helpers, constants.\n ├── /views/pages - majority of the app pages would be here\n ├── index.js\n └── App.js\n
\nComponent.js, Component.css, Component.test.jsCode
\n\n
\neslint-plugin-react-hooks which enforces these rules. So, add these rules while working on any projectconsole. logs — unless you have strong motivation why you would like it.if-else blocks. Instead, use ternary — best for clean code practicecommented-out codes. The biggest motivation for writing comments is the bad code that you write. It would be good to spend more time writing descriptive functions, methods, and filenames that are self-explanatory.Tests for each component. It's a good practice to write test cases for each component developed as it reduces the chances of getting errors when deployed. You can check all the possible scenarios through unit testing — and for that, some of the most commonly used React test frameworks you can use are JEST and ENZYMES.Good Commenting Practices
\n\n
\n
\n// Prints out the sum of two numbers\nconsole.log(sum);\n
\nES6
\n\n
\noptional chaining if possible.const instead of var or let . const lets you check that a variable should always stay constant. let indicates that the values of the variables can be changed.arrow functions (= >) for more cleaner code. Arrow functions allow simplifying your code to a single line.Basics
\n\n
\nREADME.md file that clearly details or explains your app. Clearly mention the features, functionalities, contributions guidelines, installation process, guide, etc.EsLint throughout your codebase and other automation tools so that most of the best practices are maintained automatically for you.prettier, EsLint, EditorConfig, PLOP etc., to maintain your codebase efficiently.Conclusion
\n\n
\n\n
\nCreate a React App with the Progressive Web App Template
\n
\nnpx create-react-app name-of-our-PWA-app --template cra-template-pwa\n
\n\n
\nservice-worker.js: This is a script that runs in the background once your application starts running. The service worker makes sure that you can use your React application offline and handle multiple requests for the UI. (learn more here)manifest.json: This is basically a configuration file that lists different properties that you can customize specifically for progressive web applications. It can determine such things as icons, names, and colors to use when the application is displayed.serviceWorkerRegistration.js: This file does the job of telling whether or not your service worker was successfully registered. If you look into the file, you'll notice multiple console logs that will be displayed depending on the status of the service worker once you deploy your application.Adding a Simple React Component
\nCounter.jsx and placed in a components folder.
\n//Counter.jsx\nimport React, { useState } from 'react';\nimport Button from '@mui/material/Button';\n\nfunction Counter(props) {\n let [count, setCount] = useState(0)\n\n function increment() {\n setCount(count + 1);\n }\n\n function decrement() {\n setCount(count - 1);\n }\n\n return(\n <div style={{textAlign: 'center'}}>\n <h3>Counter App</h3>\n <div>\n <Button variant="contained" onClick={increment}>+</Button>\n <span> {count} </span>\n <Button variant="contained" onClick={decrement}>-</Button>\n </div>\n </div>\n );\n};\n\nexport default Counter;
\n<button onClick={increment}>+</button>
\nnpm install @mui/material\nnpm install @emotion/react @emotion/styled //these are additional dependencies for me to get Material UI working with the Counter componentRunning Your Application
\nhttp://localhost url. You can start to see what work you've done so far.
\nnpm starthttp://localhost URL. Once the dev server is working and live on the command prompt, go to the URL to view the application. You should see something similar to this:Running Your Progressive Web Application
\nindex.js file. Make the following change:
\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.register(); //change the service worker registration from 'unregistered' to 'registered'serve package that will serve your application to localhost. In a nutshell, make sure you have the serve package by installing, building the application again, and using serve to deploy the application:
\nnpm install serve\nnpm run build\nserve -s build //if you encounter an error with this command, try 'npx serve -s build'serve command, you should see the following message, having your application deployed to http://localhost:5000. It automatically adds the URL to your clipboard as well for quick pasting in your browser.index.js, you should be able to see it running in the Application tab. Inside that tab, on the left side you should see a Service Workers section. From here, you can see for http://localhost:5000. You have a Service Worker from your service-worker.js file and is activated/running.Manifest -- opening that should show you the relevant details you listed from your manifest.json files.Conclusion
\nPrerequisites
\nOverview
\nIntroduction
\nWhat is LoginRadius?
\n\n
\n\n
\nGetting Started
\nCreating a LoginRadius Account
\n![\"Naming](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245515754_Screenshot+97.png\")
Auth Page (IDX)
\n![\"A](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245718848_Screenshot+100.png\")
![\"Role](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245829693_Screenshot+101.png\")
Integrate LoginRadius into React
\nCreating a React Application
\ncreate-react-app
\nnpx create-react-app {project name}
\nyarn add create-react-app {project name}cd into the directory with the command below:
\ncd {project name}Configuring LoginRadius for React
\n
\nnpm install loginradius-react
\nyarn add loginradius-reactreact-router-dom using CLI. Run the following code to achieve this:
\nnpm install react-router-dom
\nyarn add react-router-dom.env file in the root directory with the following details:
\nREACT_APP_LR_APP_NAME={app name}\nREACT_APP_API_KEY={your app key}\nREACT_APP_SECRET={your secret key}Building Login Components
\nindex.js file and add:
\nimport React from "react";\nimport ReactDOM from "react-dom";\nimport App from "./App";\nimport { LRAuthProvider } from "loginradius-react";\n\nReactDOM.render(\n<React.StrictMode>\n <LRAuthProvider\n appName={process.env.REACT_APP_LR_APP_NAME || ""}\n apiKey={process.env.REACT_APP_API_KEY || ""}\n redirectUri={window.location.origin}\n >\n <App />\n </LRAuthProvider>\n</React.StrictMode>,\ndocument.getElementById("root")\n);LRAuthProvider component with parameters appname and apikeys from your .env file, and also created your redirect URI. In this case, it is equal to your current window.location.origin, which is the URL of the webpage -- in this case, it is our localhost.App component.App.js component, add the following code:
\nimport React from 'react';\nimport './App.css';\nimport {\nBrowserRouter as Router,\nSwitch,\nRoute\n} from "react-router-dom";\nimport Auth from "./Landing";\nimport CallAPI from './Return';\n\nfunction App() {\nreturn (\n <Router>\n <div className="App">\n <Switch>\n <Route exact path="/">\n <div>{"Application home"}</div>\n <Auth />\n </Route>\n <Route path="/login">\n <CallAPI />\n </Route>\n </Switch>\n </div>\n </Router>\n);\n}\n\nexport default App;Browser routes, Switch, and Route components imported from the react-router-dom module. The path to your home page is blank (\"/\"). It displays the text Application home. It runs an Auth component that was earlier imported. A second route is made for a second page with a path of \"/login\" that runs the CallAPI component on the new page.Landing.js file in your src folder and input the following code:
\nimport { useLRAuth } from "loginradius-react";\n\nconst Auth = () => {\n\nconst {isAuthenticated,loginWithRedirect,logout } = useLRAuth();\n if (isAuthenticated) {\n return (\n <div>\n <button onClick={() => logout()}>\n Log out\n </button>\n </div>\n );\n } else {\n \n return <button onClick={() => loginWithRedirect("/login")}>Login/Register</button>;\n\n }\n}; \n\nexport default Auth;loginWithRedirect, loginWithPopup, and logout authentication methods from the useLRAuth hook in your components to set up the authentication flow within your React application. You can also get access to the authentication state using isAuthenticated. The isAuthenticated method is used to check if the user is already logged into the app; it true, it returns true and displays a log out button that is connected to a logout function. Else, it returns false and displays a Login/Register button, which when clicked is set up to redirect to the path /login. The loginWithRedirect() and logout() methods use the Auth Page (IDX), where registration and login functionality is already implemented to perform these tasks.App.css file:
\n//for our login button on our landing page \nbutton{\n background-color: #2d56da;\n color: #fff;\n padding: 20px;\n border-radius: 8px;\n}\n//for the output in our login route which we will cover later\nspan{\n font-size: 24px;\n height: 80vh;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}Using the LoginRadius API
\nUid, which you can view in your dashboard under \"manage users\". You can reference this user-id to determine your users’ roles. To do this, you need to fetch and return the Uid of the current user. The fetch request for the user role requires the Uid and your app secret key as parameters within the URL.src folder, create a file name return.js, and populate it with the following code:
\nimport React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n const [resp, setResp] = useState(null);\n const { user } = useLRAuth();\n const uid = user["Uid"];\n \n\n useEffect(() => {\n (async () => {\n try {\n const response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {}\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n })();\n });\n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return <span>{JSON.stringify(resp, null, 2)}</span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>,\n});CallAPI component, you've used usestate hook to create two states resp and setResp to check if you have received a response from the API. A constant user was made to use the LAuth method to get the current user data, and then the next line gets the id of the current user. The useeffect React hook that runs after the render contains an asynchronous function is used to fetch the role of the current user uid. It returns the data and outputs it in JSON form, which value is given to SetResp. Else, it throws an error if the fetch request fails.resp is false during this time while waiting for the result of the asynchronous function. Therefore, it outputs \"Loading...\" on the screen until the async returns the data that it then outputs. export is simply used to show \"Loading...\" on the screen during redirecting. Running the Code
\ncd into your parent directory and running:
\nnpm start/ path in your routes within App.js. If you click on the \"login/register\" button, you'll be redirected to your custom Auth Page (IDX) provided by LoginRadius, where you can create a user account and login. You can manage the users who have accounts from your dashboard in \"manage users\".Managing User Authentication and Data
\nUser Authentication
\nToken.js and insert the following code into it:
\nimport React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n const { getAccessTokenSilently } = useLRAuth();\n const [resp, setResp] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const token = await getAccessTokenSilently();\n const response = await fetch(\n `https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}&apiKey=${process.env.REACT_APP_API_KEY}`,\n {}\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n })();\n }, [getAccessTokenSilently]);\n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return (\n <span>{JSON.stringify(resp, null, 2)}</span>\n );\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>, \n });App.js file. Since the name of the function component in the code is still CallAPI, you don't need to edit the component called in the login route. You just need to comment out the former import for the component from your return.js file as shown below:
\nimport "./App.css";\nimport { BrowserRouter as Router, Switch, Route } from "react-router-dom";\nimport Auth from "./Landing";\n// import Login from "./Login";\nimport React from 'react';\n// import CallAPI from './Return';\n import CallAPI from './Token';\n\nfunction App() {\n return (\n <Router>\n <div className="App">\n <Switch>\n <Route exact path="/">\n <div>{"Application home"}</div>\n <Auth />\n </Route>\n <Route path="/login">\n <CallAPI />\n </Route>\n </Switch>\n </div>\n </Router>\n );\n}\nexport default App;npm start command. Upon starting the server, when you log in, you'll have your user token displayed on the screen. Your output will be similar to the following:CallAPI component imported from Return.js.User Data
\n![\"User](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1628263707754_Screenshot+117.png\")
![\"Manage](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1628263762129_Screenshot+119.png\")
Viewing User Permissions
\nhttps://api.loginradius.com/identity/v2/manage/role, keeping the rest of the URL the same. That is, it still contains your appkey and appsecret parameters.Assigning Client and Admin roles
\nif block to check if the users’ logged-in emails are equal to a particular set of emails and then perform the assignment of admin roles to them; else, assign the client roles instead. Modify your return.js file as below:
\nimport React, { useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n const [resp, setResp] = useState(null);\n const { user } = useLRAuth();\n const uid = user["Uid"];\n var response;\n const email = user["Email"];\n var emailmain = email[0].Value;\n \n \n (async () => {\n if (emailmain.toLowerCase() === "admin@example.com"){\n try {\n \n \n response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {\n method: "PUT",\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n roles: ["Admin"],\n }),\n }\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n }\n else {\n try {\n response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {\n method: "PUT",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify({\n roles: ["Client"],\n }),\n }\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n }\n })();\n \n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return <span>\n Welcome user : {uid}<br/>\n Email : {emailmain}<br/>\n {JSON.stringify(resp, null, 2)}\n </span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>,\n});emailmain which gets the value at a particular array position containing the user email.async request block has now been modified to check if the user email being used for logging in is equivalent to a particular email which you've declared. Alternatively, you can have your emails pulled from a database and assign the admin roles to the ones you want. The else block assigns a client role to emails that do not meet the first criteria. When you create a new account with an email similar to what I have in the if block, that is admin@example.com; when rerouted to the /login path, you'll discover that the role of admin was assigned while any other email will have the client role assigned upon login. The return statement returns the user id of the logged-in user, the email, and then the role in a JSON format. The output would be similar to the following:Conclusion
\n\n
\nReact-Figma
\n
\nimport * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n return (\n <Page name="My Resume" isCurrent>\n <View>\n <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} /> <Text style={{ color: 'white' }}>Hi, There</Text>\n </View>\n </Page>\n );\n};react-sketchapp for Sketch, react-xd for Adobe XD.React Hardware
\n
\nimport React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n const [ledStage, setLedStage] = useState(false);\n\n useEffect(() => {\n setInterval(() => {\n setLedStage(prev => !prev);\n }, 2000);\n }, []);\n\n return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);Ink
\n
\nconst Raiser = () => {\n const [i, setI] = useState(0);\n\n useEffect(() => {\n setInterval(() => {\n setI(prev => prev + 1);\n }, 200);\n }, []);\n\n return <Color>\n Increased by {i} \n\t</Color>;\n}react-blessed is one of the similar libraries.react-three-fiber
\n
\nimport ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n const Ref = useRef()\n const [hover, setOnHover] = useState(false)\n const [enable, setEnable] = useState(false)\n\n useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n return (\n <Ref\n {...props}\n ref={Ref}\n scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n onClick={(e) => setEnable(!enable)}\n onPointerOver={(e) => setOnHover(true)}\n onPointerOut={(e) => setOnHover(false)}>\n <boxBufferGeometry args={[1, 1, 1]} />\n <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n </Ref>\n )\n}\n\nReactDOM.render(\n <Canvas>\n <pointLight position={[10, 10, 10]} />\n <MyFrame position={[-3.2, 0, 0]} />\n <MyFrame position={[2.2, 0, 0]} />\n </Canvas>,\n document.getElementById('root')\n)react-three-flex ,react-xr, react-postprocessing , etc.react-nil
\n
\nimport React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n const [active, set] = useState(false)\n useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n return null\n}\n\nrender(<MyComponent />)react-docx
\n
\nrenderAsyncDocument(\n <section>\n <paragraph heading={Docx.HeadingLevel.HEADING_1}>\n This is a sample paragraph with paragraph tag\n </paragraph>\n <p> This is a sample paragraph with P tag</p>\n <p>\n <t>this is for textrun</t>\n </p>\n <p>\n <img\n src="base64...."\n width={200}\n height={200}\n />\n <href\n src="http://localhost:8080"\n label={"image n links label"}\n />\n </p>\n <Component text="can try componets in this way of course, like react!">\n </Component>\n </section>\n).then((doc) => console.log(doc));react-pdf and redocx for a similar purpose.React's Context API Guide with Example
\n
\nAccording to the React doc: \n
\nWhen to use context
\n
\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)Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme. /src folder.Create Context
\nReact.createContext. In our case, we are passing \"white\" color to provide a light theme.ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:\n
\nProviding Context
\nColorContext.Provider.
\nimport 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 }Consuming the context
\nclass component
\ncontextType. 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.
\nimport 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}Consumer. From there, You can access values as props.
\nimport { 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}Functional component and Hooks
\nuseContextin functional components and its equivalent of static contextType. \t
\nimport React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}Updating Context
\nColorContext.js
\nimport 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 }
\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}Without Error Boundaries
\n
\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};With Error Boundaries
\n
\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}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.
\nfunction 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 1. React.lazy()
\n
\n //generally approach to import Component\n import Blog from './BlogComponent';
\n// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));2. React.Suspense()
\n
\n","frontmatter":{"date":"May 13, 2021","updated_date":null,"title":"Code spliting in React via lazy and suspense","tags":["React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png","srcSet":"/static/12ea532cdd9f0017a02bfb74d888bba7/69585/react.png 200w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/497c6/react.png 400w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png 800w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/implement-authentication-in-react-using-loginradius-cli/"},"html":"// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));\n\nfunction AppComponent() {\n return (\n // Displays <LoaderSpinner> until BlogComponent loads\n <React.Suspense fallback={<LoaderSpinner />}>\n <div>\n <BlogComponent />\n </div>\n </React.Suspense>\n );\n}Configuring LoginRadius
\nLoginRadius CLI Setup
\nMac or Linux
\n\n
\n
\n$ brew tap loginradius/tap
\n$ brew install lrOther Platforms
\n\n
\n
\n$ lr registerConfiguring Callback URLs
\nlr get domain command from the CLI. Similarly, to add a domain, use the lr add domain command.\n
\nhttp://localhost as a whitelisted domain. Setup React JS application
\n\n
\nreact-router-dom.npm install react-router-domsrc/config.js and add the application details in the code as shown below.
\nconst config = {\n APP_NAME: '<<App Name>>',\n API_KEY: '<<API Key>>',\n };\n export default config;\n
\nhttps://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=<Return URL>. Add Code to your Application
\n\n
\nApp.js file as shown below. Notice that the /login route has been added to the App component in which the Login and Logout components are rendered. They will be used to get the user profile data and handle user logout, respectively. The / route will load the LandingPage component. If you already have an existing React application, you can specify the route for these components as per your requirements.
\nimport { BrowserRouter as Router, Route, Switch } from "react-router-dom";\nimport "./App.css";\nimport LandingPage from "./components/LandingPage";\nimport Login from "./components/Login";\nimport Logout from "./components/Logout";\n\nfunction App() {\n return (\n <Router>\n <div className="App">\n <Switch>\n <Route exact path="/">\n <LandingPage />\n </Route>\n <Route path="/login">\n <div style={{ display: "flex", padding: "1em" }}>\n <Login />\n <Logout />\n </div>\n </Route>\n </Switch>\n </div>\n </Router>\n );\n}\n\nexport default App;Add Landing Page
\ncomponents folder under the src folder, create a src/components/LandingPage.js file and add the following code to navigate your Register/Login buttons to the following URL's as shown below.
\nimport React from "react";\nimport config from "../config.js";\nconst LandingPage = () => {\n return (\n <div>\n <h1> React Demo App </h1>\n\n <a\n href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url=${window.location.origin}/login`}\n >\n <button>Register</button>\n </a>\n\n <a\n href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`}\n >\n <button>Login</button>\n </a>\n </div>\n );\n};\nexport default LandingPage;return_url as the current origin. After successful login, the Login component fetches the user profile data as shown in the following step. However, return_url can also be your website, backend server, etc., where you can handle the access token to perform different actions. Add Login Component
\ncomponents folder, create a src/components/Login.js file and add the following code to retrieve User Profile Data.
\nimport React from "react";\nimport { withRouter } from "react-router-dom";\nimport config from "../config";\n\nclass Login extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userProfileResponse: null,\n };\n }\n\n componentDidMount() {\n const token = new URLSearchParams(this.props.location.search).get("token");\n if (token) {\n fetch(\n "`https://api.loginradius.com/identity/v2/auth/account?apikey=" +`\n config.API_KEY,\n {\n method: "GET",\n headers: {\n Authorization: "Bearer " + token,\n },\n }\n )\n .then((res) => res.json())\n .then((res) => {\n this.setState({ userProfileResponse: res });\n })\n .catch((e) => {\n console.log(e);\n });\n } else {\n window.location.assign(\n `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`\n );\n }\n }\n\n render() {\n const { userProfileResponse } = this.state;\n\n return (\n <div>\n <span style={{ whiteSpace: "pre-wrap", textAlign: "left" }}>\n {JSON.stringify(userProfileResponse, null, 4)}\n </span>\n </div>\n );\n }\n}\n\nexport default withRouter(Login);token obtained upon logging in via the LoginRadius Auth Page. Add Logout component
\ncomponents folder, create a src/components/Logout.js file and add the code as shown below.
\nimport React from "react";\nimport config from "../config.js";\n\nconst Logout = () => {\n localStorage.removeItem("token");\n\n return (\n <div class="container">\n <a\n href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout&return_url=http://localhost:3000/`}\n >\n <button>Logout</button>\n </a>\n </div>\n );\n};\nexport default Logout;action=logout is passed to the LoginRadius Auth Page, which will log the user out and return them to the Landing Page specified in the return_url. \n
\nTesting the application
\nnpm start. You will be able to see the output on localhost:3000. You can also directly open the IDX page on https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=http://localhost:3000/login.Advanced LoginRadius CLI features
\nAdding Social Login Methods
\nlr add social command to add a Login method and the lr get social command to view the current active social login methods. Check the image below for a visual representation. lr demo command to view the changes. Adding to the Registration schema
\n\n
\nlr add schema command. Use the lr get schema command with --active or --all flags to get the current Registration fields or view all available fields with their schemas. You can also configure addtional features by choosing the setup advance configuration option.
\nSee the image below for a visual representation of the command flow. Confirm Password and Gender. To view the changes, navigate to the LoginRadius Auth Page using lr democommand.\n
\nlr demo command, you can also view the LoginRadius Auth Page by visiting locahost:3000 and following the same workflow as explained earlier.Contributing to LoginRadius CLI
\nYour Take
\nlight you will figure it out at the end of this blog.Why Recoil
\n\n
\nRecoil concepts
\n\n
\nAtoms
\nuseState hook in react. If you are new to react hooks, checkout react hooks guide.
\n const [age, setAge] = useState(0);1. Let's start with binding root app with Recoil
\nRecoilRoot will behave like a global context provider that will share the global state to your app tree.
\nReactDOM.render( <AppPage />, document.getElementById("root"))
\nimport { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n <AppPage />\n </RecoilRoot>, document.getElementById("root"))2. Set the Atom
\n
\nimport { atom } from "recoil";\n\nconst age = atom({\n key: "age", \n default: 0 // default global value for age key\n});3. use the atom
\n
\n const [age, setAge] = useState(0);
\nimport { useRecoilState } from 'recoil'\nconst [ageState, setAge] = useRecoilState(age);
\nimport { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n key: "age", \n default: 0 // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}Selectors
\n1. set the selectors
\nisChild value from age key, then we can directly use selector instead of adding a new key or atom.
\nimport {selector} from 'recoil'\n\nconst isChild = selector({\n key: "childage",\n get: ({ get }) => {\n const state = get(age);\n return state < 10 ;\n }\n});2. use the selectors
\nage value to isChild.
\n const [ageState, setAge] = useRecoilState(age);\n\n const value = useRecoilValue(isChild);
\nimport {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n key: "childage",\n get: ({ get }) => {\n const state = get(age);\n return state < 10 ;\n }\n});\n\nexport const AgeCalculator = () => {\n const [ageState, setAge] = useRecoilState(age);\n const value = useRecoilValue(isChild);\n}Conclusion
\nlight.refs.ref to the element in your application to provide access to it from anywhere within your component without making use of props and all. refs when the required interaction cannot be achieved using state and props.Use Refs
\nrefs 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.popup component. We should use a boolean prop for it instead of manipulating dom.\nCreating Refs
\nReact.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.
\nclass 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}this.myRef in the constructor by calling React.createRef() method.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.ref attribute on function components because they do not have instances.current property with Dom element when component mount and assign null to it when component unmount. ref updates happen before componentDidMount or componentDidUpdate methods.
\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}App passed its ref as props to MyCustomTextInput component.Callback Refs
\ncallback refs; it gives us more fine-grain control over when refs are set and unset within the component.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.
\nclass 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}
\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}inputRef and access it in App component so we can call focus on it to focus the input element.Caveats with callback refs
\nconstructor and the built in method getInitialState. While the simple answer to this question is indeed simple: “getInitialState is the ES5 friendly method to define the initial state of a React component,” there are a couple more details around getInitialState as well as React’s ES5 support that are interesting and useful to highlight.Constructor vs getInitialState: With or without Classes:
\nclass keyword. It allows definition of React components as classes, which is a familiar data structure for anyone who has had experience with more traditional object-oriented languages such as Java or C++. The class structure also allows for natural organization of the component’s elements like state, props, lifecycle methods and member functions. However, ES5 did not provide the same convenience. So instead of defining a React component as a class:
\nclass HelloWorld extends React.Component {\n render() {\n return <span>Hello World</span>;\n }\n}create-react-class:
\nvar createReactClass = require('create-react-class');\nvar HelloWorld = createReactClass({\n render: function() {\n return <span>Hello World</span>;\n }\n});create-react-class that you could define an initial state by populating the getInitialState attribute:
\nvar HelloWorld = createReactClass({\n getInitialState: function() {\n return {name: this.props.name};\n },\n render: function() {\n return <span>Hello {this.state.name}</span>;\n }\n});
\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n }\n render() {\n return <span>Hello {this.state.name}</span>;\n }\n}Autobinding
\ncreate-react-class method automatically binds this to every attribute method. This no longer holds true if you define React components using the common ES6 class syntax, making it so that you have to manually bind this to internal methods:
\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n\n this.changeName = this.changeName.bind(this);\n }\n changeName() {\n this.setState({ name: "World" });\n }\n ...\n}
\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n }\n changeName = () => {\n this.setState({ name: "World" });\n }\n ...\n}Parting Words
\nconstructor declaration altogether and just declare state inline as a class member, or utilize React Hooks as a new way to initialize states. However, the ES5 support remains useful for legacy systems and adds to the overall flexibility of React as a toolset.\n
\nConfigure LoginRadius for React Application
\n\n
\nAdd following LoginRadius JS library into your application
\n
\n<script type="text/javascript" src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>Add Authentication when you have customized Login Page
\nAdd Login to your react application
\n
\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;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.Add Logout to your react application
\n
\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;Add Signup to your react application
\n
\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;Wrap up
\nA High-Level Introduction to Redux Saga
\nWhy do we even need this?
\nThe solution
\nRedux Saga vs. alternatives
\ntakeEvery(). This instructs the middleware to spawn a new task for every action dispatched to your store matching a given pattern. This provides a behaviour similar to Redux Thunk and is as simple as it gets: \"Application tells you to fetch something, go fetch it\".take(). This function instructs the middleware to spawn a new task for an action dispatched matching a given pattern but will effectively ignore any new actions until the spawned task has been completed.Concluding thoughts
\n\n
\nreact-router allows containers to be swapped in and out dynamically based on the current URL location, and this all happens client-side. With that in mind, React Router can more generally be understood as a wrapper that handles conditional rendering based on URL path.<Route>, <Switch> and <Link>. Let us look at a basic example making use of these 3 components:
\nconst HelloBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_hello" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/hello"</span>\n </div>\n ) \n}\n\nconst WorldBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_world" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/world"</span>\n </div>\n ) \n}
\nclass AppContainer extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n <div id="div_app_container" className="app-container">\n <div id="div_nav" className="nav-bar">\n <span>Navigation bar</span>\n <Link to="/hello">\n <span>Link to /hello</span>\n </Link>\n <Link to="/world">\n <span>Link to /world</span>\n </Link>\n <Link to="/clearlyinvalidpath">\n <span>Link to a clearly invalid path.</span>\n </Link>\n </div>\n <div id="main_container" className="main-container">\n <span>Main Container</span>\n <Switch>\n <Route exact path="/">\n <div>\n <span>\n Default container. We are in root path\n </span>\n </div>\n </Route>\n <Route path="/hello" component={HelloBanner} />\n <Route path="/world">\n <WorldBanner />\n </Route>\n <Redirect to="/" />\n </Switch>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <BrowserRouter>\n <AppContainer />\n </BrowserRouter>,\n document.getElementById("app")\n);<Link>’s in the navigation bar will “navigate” you to the corresponding paths. In effect, what this does is twofold:\n
\n<Route> components to rerender according to the current path.<Switch> container.\n
\n<Switch> component allows swapping between <Route>’s and render the correct component with a given URL path. However, <Route> components do not have to be wrapped inside a <Switch>. While standalone, a <Route> will simply render when the URL path matches its own path prop.<Redirect> component at the end acts as the default route. In case none of the other routes match with the current URL path, it simply redirects the user back to root.history object to allow for programmatic redirection:history object can be accessed through a component’s props through the user of the withRouter higher order component:
\nimport * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface SampleComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface SampleComponentStateState {\n // states go here\n}\n\nclass SampleComponent extends React.Component<SampleComponentProps, SampleComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n performRedirect = () => {\n const { history } = this.props;\n\n history.push("/desired-pathname")\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<SampleComponentProps>(SampleComponent);history object, as well as the history.push() call to perform the redirection.useHistory, which should blend in more naturally when programming with a React Hooks intensive workflow.\n
\n<Link> component redirect, populate the to prop with an object that contains the new path as well as states, instead of just the string for pathname:
\n<Link\n to={{\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n }}\n>\n Link text here.\n</Link>history.push() call to achieve similar results:
\nhistory.push({\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n})history.location.state object:
\nimport * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface ReceivingComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface ReceivingComponentStateState {\n // states go here\n}\n\nclass ReceivingComponent extends React.Component<ReceivingComponentProps, ReceivingComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n componentDidMount() {\n const { history } = this.props;\n if (history.location.state && history.location.state.stateName) {\n // stateName can be accessed here if it is passed in from a previous redirect action.\n console.log(history.location.state.stateName);\n }\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<ReceivingComponentProps>(ReceivingComponent); componentDidMount in the example above.\n
\nOverview
\n\n
\nPrerequisites
\n\n
\nWhat We’ll Make
\nLet's Get Started
\nStep 1: Setting up the workspace
\n\n
\n
\nnpx create-react-app dictaphone\n
\n
\nimport Dictaphone from './dictaphoneSetup.js'\n\nfunction App() {\n return (\n <div className="App">\n <header className="Dictaphone-Tester">\n <Dictaphone />\n </header>\n </div>\n );\n}\n\nexport default App;\n
\n
\nnpm i react-speech-recognition\n
\n
\nimport React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';Step 2: Setting up the dictaphone
\n\n
\n
\nimport React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone = () => {\n return (\n <div></div>\n );\n};\n\nexport default Dictaphone1;\n
\n
\nconst {\ntranscript,\ninterimTranscript,\nfinalTranscript,\nresetTranscript,\nlistening,\n} = useSpeechRecognition();
\n} = useSpeechRecognition({ commands });
\nuseEffect(() => {\nif (finalTranscript !== '') {\n console.log('Got final result:', finalTranscript);\n}\n}, [interimTranscript, finalTranscript]);
\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n SpeechRecognition.startListening({\n continuous: true,\n language: 'en-GB',\n });\n };Step 3: Building the dictaphone controls and page elements
\n\n
\n
\n return (\n <div>\n <div>\n <span>\n listening:\n {' '}\n {listening ? 'on' : 'off'}\n </span>\n <div>\n <button type="button" onClick={resetTranscript}>Reset</button>\n <button type="button" onClick={listenContinuously}>Listen</button>\n <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n </div>\n </div>\n <div>\n <span>{transcript}</span>\n </div>\n </div>\n );Step 4: Adding commands
\n\n
\n
\n const commands = [\n {\n command: 'reset',\n callback: () => resetTranscript()\n },\n {\n command: 'clear',\n callback: () => resetTranscript()\n }\n ]
\nconst [message, setMessage] = useState('');
\n const commands = [\n {\n command: 'reset',\n callback: () => resetTranscript()\n },\n {\n command: 'shut up',\n callback: () => setMessage('I wasn\\'t talking.')\n },\n {\n command: 'Hello',\n callback: () => setMessage('Hi there!')\n },\n ]
\nimport React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone1 = () => {\n const [message, setMessage] = useState('');\n const commands = [\n {\n command: 'reset',\n callback: () => resetTranscript()\n },\n {\n command: 'shut up',\n callback: () => setMessage('I wasn\\'t talking.')\n },\n {\n command: 'Hello',\n callback: () => setMessage('Hi there!')\n },\n ]\n const {\n transcript,\n interimTranscript,\n finalTranscript,\n resetTranscript,\n listening,\n } = useSpeechRecognition({ commands });\n\n useEffect(() => {\n if (finalTranscript !== '') {\n console.log('Got final result:', finalTranscript);\n }\n }, [interimTranscript, finalTranscript]);\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n SpeechRecognition.startListening({\n continuous: true,\n language: 'en-GB',\n });\n };\n return (\n <div>\n <div>\n <span>\n listening:\n {' '}\n {listening ? 'on' : 'off'}\n </span>\n <div>\n <button type="button" onClick={resetTranscript}>Reset</button>\n <button type="button" onClick={listenContinuously}>Listen</button>\n <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n </div>\n </div>\n <div>\n {message}\n </div>\n <div>\n <span>{transcript}</span>\n </div>\n </div>\n );\n};\n\nexport default Dictaphone1;What is Context API?
\nReact context API: How it works?
\nContext API will replace redux?
\n\n
\n\n
\nImportant Note
\nHow to use Context API?
\n\n
\n
\nimport React, { createContext } from "react";\nconst UserContext = createContext();\n
\n
\nExample using React Hooks:
\nconst UserProvider = ({ children }) => {\n const [name, setName] = useState("John Doe");\n const [age, setAge] = useState(1);\n const happyBirthday = () => setAge(age + 1);\n return (\n <UserContext.Provider value={{ name, age, happyBirthday }}>\n {children}\n </UserContext.Provider>\n );\n};\n
\n
\nExample using React Hooks:
\nconst withUser = (Child) => (props) => (\n <UserContext.Consumer>\n {(context) => <Child {...props} {...context} />}\n {/* Another option is: {context => <Child {...props} context={context}/>}*/}\n </UserContext.Consumer>\n);\n
\n
\nexport { UserProvider, withUser };\n
\n
\nFor example:
\nReactDOM.render(\n <UserProvider>\n <App />\n </UserProvider>,\n document.getElementById("root")\n);
\nexport default withUser(LoginForm);Final piece of advice
\nOverview
\ncode splitting and data fetching. Now, the next question is, how to do lazy loading in react? React specifically, it bundles the complete code and deploys all of it at the same time. Now, usually, that's not a bad idea, since React SPAs (Single page application) are quite small and do not affect the performance. But what if we have a gigantic application, like a content management system with a customer portal, admin portal etc. In such a case, it does not seem like a smart idea to load the complete application.\n
\nReact.Advantages
\nA and B. Size of A is 1 MB and its loading time is approximately 1 second. Size of B is also 1 MB and so its loading time is also 1 second. And we know that a user will access either of the sections, or a user accessing section A will rarely access section B and vice versa. If we were to load the complete application at the starting of our application, it would cost the user 2 MB of data and the loading time will also be 2 seconds. The user might not like to wait for 2 seconds or won't be happy that a site is costing them a lot of data. This can be improved and halved with proper lazy loading through lazy load react components.\n
\nPrerequisites
\n\n
\ncreate-react-app tool
\nnpm install -g create-react-appGeneral instructions
\n\n
\nnpm create-react-app
\nnpm create-react-app my-app
\nnpm starthttp://localhost:3000
\n|\n|-src\n|\t|-components\n|\t|\t|-Admin.js\n|\t|\t|-Customer.js\n|\t|\t|-Home.js\n|\t|-app.js\n|-index.jsapp.js which will have an input field. We will pass the input received as props to Home, and render Home.js. Based on props received, we will either render Admin or Customer.Using React Suspense (
\nReact 16.6+)\n
\nHome.js, we will lazy load Admin and Customer
\nimport React, { Suspense } from "react";\nconst Customer = React.lazy(() => import("./Customer.js"));\nconst Admin = React.lazy(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn (\n\t\t\t// fallback component is rendered until our main component is loaded\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Admin />\n\t\t\t</Suspense>\n\t\t);\n\t} else if (props.user === "customer") {\n\t\treturn (\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Customer />\n\t\t\t</Suspense>\n\t\t);\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};Without React Suspense
\n\n
\n","frontmatter":{"date":"October 05, 2020","updated_date":null,"title":"Lazy loading in React","tags":["React","Lazy loading","React Suspense"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/00a89fc56461ea1529439d89072c93f1/14b42/react.jpg","srcSet":"/static/00a89fc56461ea1529439d89072c93f1/f836f/react.jpg 200w,\n/static/00a89fc56461ea1529439d89072c93f1/2244e/react.jpg 400w,\n/static/00a89fc56461ea1529439d89072c93f1/14b42/react.jpg 800w,\n/static/00a89fc56461ea1529439d89072c93f1/9842e/react.jpg 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akshay Avinash","github":"akshay11298","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/understanding-react-rendering/"},"html":"lazyLoader.js)
\nconst lazyLoader = (importComp) => {\n\treturn class extends React.Component {\n\t\tstate: {\n\t\t\tcomponent: null; //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? <C {...this.props} /> : null;\n\t\t}\n\t};\n};\nexport default lazyLoader;Home.js
\nimport React from "react";\nimport { lazyLoader } from "./lazyLoader";\n\nconst Customer = lazyLoader(() => import("./Customer.js"));\nconst Admin = lazyLoader(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn <Admin />;\n\t} else if (props.user === "customer") {\n\t\treturn <Customer />;\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};
\nconst lazyLoader = (importComp, fallback) => {\n\treturn class extends React.Component {\n\t\tstate = {\n\t\t\tcomponent: null, //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? (\n\t\t\t\t<C {...this.props} />\n\t\t\t) : fallback ? (\n\t\t\t\tfallback\n\t\t\t) : (\n\t\t\t\t<div>loading</div>\n\t\t\t);\n\t\t\t// If component is not loaded then return fallback component, if fallback is not provided then use default loading\n\t\t}\n\t};\n};\nexport default lazyLoader;1.
\nrender() 101render() is not user callable. It is part of the React component lifecycle. Generally, it gets called by React at various app stages when the React component instantiates for the first time, or when there is a new update to the component state. Render does not take any arguments and returns a JSX.Element which contains the view hierarchy of the current component. This view hierarchy will later be translated into HTML and displayed in the browser window.render() is not user callable as it is an event that happens in the component’s lifecycle. With that said, if it is absolutely necessary to render the view manually, you can instead call the built-in class method forceUpdate(). Keep in mind that this is considered an anti-pattern. If you were designing sensible React components, its state and props changes should naturally control the render process, and you should never feel the need to make a manual call.\n
\nconstructor() call.setState() call\"render() is called in Parent component!\", and \"render() is called in Child component!\". These messages are invoked from the corresponding render() methods of the example's parent and child component. They serve to introduce the first case of render() invocation: when the component is first instantiated.\n
\nchildElementText state of the Parent component, which in turns updates the text prop of the Child component, triggering a render in both Parent and Child.
\n onChildPropChange = () => {\n this.setState({\n childElementText: "I am the child element! I am updated following a prop change."\n })\n }\n
\nhelloWorldMessage state within Child component, triggering a render following a state change.
\n onTextChange = () => {\n this.setState({\n helloWorldMessage: "Hello React! (state change after setState call)"\n })\n }setState(), the method shouldComponentUpdate() is invoked to determine whether render() should be called. By default, this method always returns true. But it can be overloaded to implement custom logic. It is the actual way to define custom render behavior in each React component.shouldComponentUpdate() provides you with nextProp and nextState as arguments, which allows you to compare the current state and props of the component. For example, this code block will invoke render() only when the text prop changes:
\n shouldComponentUpdate(nextProps: NewComponentProps, nextState: NewComponentState) {\n if (this.props.text !== nextProps.text) {\n return true;\n } else {\n return false;\n }\n }render() is a pure function. That means inside render(), you should not make an update to the component's states or props (no setState() call nor Redux state update). This makes sense because an update to the component will then trigger a new render() call, which can potentially lock you into an infinite render loop.render() returns a single JSX element, as mentioned above. This comes with certain implications:\n
\n<div>, or a <React.Fragment>. It is worth noting that once rendered, <React.Fragment> will vanish from the DOM structure. It is only meant to be a wrapper component and does not appear in the final DOM in the browser. This makes it a more sensible choice over a <div> wrapping to avoid nesting div’s.render() method, it is helpful to think about how the entire UI will look like at a moment in time, instead of thinking about how a certain element updates over time. “Thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.”2. Notes on reconciliation, and the
\nkey proprender() method in each React component then feeds into what is called the Reconciliation Algorithm. This is the primary algorithm that dictates how React renders the real DOM in your browser based on a virtual DOM maintained internally by React. To intelligently determine what needs to be rendered on every call, React compares the current state of the virtual DOM and the real one and only makes changes to the physical DOM where it recognizes that the UI has been updated.render() method.\n
\n
\n<div>\n <span key="li-1">list item 1</span>\n\n <span key="li-2">list item 2</span>\n\n <span key="li-3">list item 3</span>\n</div><NewComponent> is then added to the top of the list:
\n<div>\n <!-- previously <span>list item 1</span> - element is detached and <NewComponent /> instantiated -->\n <NewComponent />\n\n <!-- previously <span>list item 2</span> - content will be updated to "list item 1" -->\n <span>list item 1</span>\n\n <!-- previously <span>list item 3</span> - content will be updated to "list item 2" -->\n <span>list item 2</span>\n\n <!-- new <span>list item 3</span> is element created -->\n <span>list item 3</span>\n</div><NewComponent> is added to the bottom:
\n<div>\n <!-- previously <span>list item 1</span> - no change -->\n <span>list item 1</span>\n\n <!-- previously <span>list item 2</span> - no change -->\n <span>list item 2</span>\n\n <!-- previously <span>list item 3</span> - no change -->\n <span>list item 3</span>\n\n <!-- new instance of <NewComponent /> is added -->\n <NewComponent />\n</div><NewComponent> to the end of the list will result in 1 new instantiation, versus 1 instantiation, 3 updates and 1 tear down. In a larger application scale, this will prove to be a significant performance difference in the long run.\n
\nmap() method to iterate over an array to render a list of elements, it is likely that you have seen React complaining about a missing key prop to each rendered list item. So what does the key actually do?key is React’s way to recognize elements in the DOM tree, comes reconciliation time. When React is parsing all children of an element, it can leverage keys to match elements that were present from the last update. That allows you to shuffle the order of child elements without interfering with the algorithm. As long as the key matches between updates, React will preserve the element configuration.
\n<div>\n <span key="li-1">list item 1</span>\n\n <span key="li-2">list item 2</span>\n\n <span key="li-3">list item 3</span>\n</div>
\n<div>\n <!-- new item - <span> is instantiated -->\n <span key="li-4">list item 4</span>\n\n <!-- matched with the old "li-1" key - element stays unchanged between renders -->\n <span key="li-1">list item 1</span>\n\n <!-- matched with the old "li-2" key - element stays unchanged between renders -->\n <span key="li-2">list item 2</span>\n\n <!-- matched with the old "li-3" key - element stays unchanged between renders -->\n <span key="li-3">list item 3</span>\n</div>map() or other iterative methods, React requires that keys are provided with the element. However, even in case a DOM subtree is manually added, keys should be provided on subtrees that have complex behaviors regarding conditional rendering.3. Parting words
\nrender() nd its implication to the reconciliation algorithm is the first step to make sure we are leveraging the framework instead of working against it. It is also one of the first steps to mastering React.Overview
\nWhat are Hooks?
\n\n
\n\n
\nBenefits of React Hooks
\n\n
\nA Practical View
\nComponent without Hook: Class Component
\n
\nimport React, { Component } from "react";\nclass Greeting extends Component {\n state = {\n text: "",\n };\n handleChange = (e) => {\n this.setState({ text: e.target.value });\n };\n render() {\n return <input value={this.state.text} onChange={this.handleChange} />;\n }\n}\nexport default Greeting; Components with Hook:Functional Component:
\n
\nimport React, { useState } from "react";\nexport default () => {\n const [text, setText] = useState("");\n return (\n <input\n value={text}\n onChange={(e) => {\n setText(e.target.value);\n }}\n />\n );\n};\n
\nBasics Of React Hooks
\n\n
\nuseState()
\n
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n return <h1>{message}</h1>\n};\n\nexport default App;message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.
\nthis.state = {\n message: "Hi there, how are you?"\n}\n
\nsetMessage @line 3 then be calm, I will explain later in this tutorialuseEffect()
\nuseEffect() function can be executed in 3 different React component life cycles that are\n
\nuseEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.
\nimport React, { useState, useEffect } from "react";\n\nconst App = () => {\n const [message, setMessage] = useState("Hi there, how are you?");\n\n useEffect(() => {\n console.log("trigger use effect hook");\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000);\n });\n\n return <h1>{message}</h1>;\n};\n\nexport default App;useEffect hook to trigger the setMessage method the change the message variable after 1 second.console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.
\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n useEffect(() => {\n console.log('trigger use effect hook');\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000)\n }, []);\n\n return <h1>{message}</h1>\n};\n\nexport default App;props or state we can add that variable in the array.[state.message] here hook will fire on the update of message variable only.The Rules of Hooks
\n\n
\n\n
\nConclusion
\nWhat is React State Management?
\n\n
\nWhy do you need React state management?
\n\n
\nWhat is Redux?
\nActions in Redux
\nstore.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:
\n{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }
\nocnst addTodo = (text) => {\n return {\n type: "ADD_TODO",\n text\n };\n}Reducers in Redux
\n
\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};Store in Redux
\n
\nconst store = createStore(TODOReducer);What is React Hook?
\nuseState, UseEffect and useReducer etc. You can also make custom hooks.React Hook Rules
\n\n
\nWhat is useState and how to use it
\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}.
\nclass Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n useState Hook directly inside our component:
\nfunction Example() {\n const [count, setCount] = useState(0);\n}what is useReducer and how to use it
\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.
\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 +----------------+
\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 };
\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 ];
\n const [todos, dispatch] = React.useReducer(\n todoReducer,\n initialTodos\n );
\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;
\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;
\nexport const addTodo = id => ({\n type: "ADD_TODO",\n id\n});\n\nexport const removeTodo = id => ({\n type: "REMOVE_TODO",\n id\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 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;
\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);connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.