A step-by-step tutorial on adding authentication and authorization to your Next.js apps, with Auth0. We’ll be using a Next.js SDK to connect our application to the Auth0 API and will create the dynamic API route for React.
Read more…
Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!
Read more…
In this article, we’ll look at how to create an outside focus and click handler with React. You’ll learn how to recreate an open-source React component (react-foco) from scratch in doing so. To get the most out of this article, you’ll need a basic understanding of JavaScript classes, DOM event delegation and React. By the end of the article, you’ll know how you can use JavaScript class instance properties and event delegation to create a React component that helps you detect a click or focus outside of any React component.
Read more…
Headless CMS is a powerful and easy way to manage content and access API. Built on React, Sanity.io is a seamless tool for flexible content management. It can be used to build simple to complex applications from the ground up. In this article, Ifeanyi Dike explains how to build a simple listing app with Sanity.io and React. The global states will be managed with Redux and the application will be styled with styled-components.
Read more…
The promise of seamless design to code translation goes back to the early WYSIWYG page builders. Despite the admirable goal, their biggest flaw was the code that they generated. Skepticism remains to this day and whenever this idea reappears, the biggest concerns are always related to the quality and maintainability of the code. In this article, Miroslav Bekyarov will show you how to turn our static designs into a live, code-based prototype with real fields, forms, maps, and animations, and in turn, transform this prototype into React code — all integrated into one tool.
Read more…
In this tutorial, Fortune Ikechi is going to show you how to use Grommet as a UI library for React applications. He’ll use Grommet as a UI library of choice to create a pricing component, this would help you have a better understanding of how to use Grommet. This tutorial will be beneficial to readers who are interested in developing responsive components in their React application using Grommet. This article requires a basic understanding of React and Styled-components.
Read more…
When it comes to building a conversational chat assistant that could be used at a small or enterprise level, Dialogflow would most likely be one of the first options that would show up in your search list — and why wouldn’t it? It offers several features such as the ability to process audio and text inputs, provide dynamic responses using custom webhooks, connect to millions of Google-enabled devices by using the Google assistant, and so much more. But apart from its console that is provided to design and manage an Agent, how can we create a chat assistant that can be used within our built web applications, too?
Read more…
This article is the first part of an upcoming series that provides a practical introduction to Dependency Injection in a manner that immediately permits you to realize its many benefits without being hampered down by theory. Today, Jamie Corkhill will depict only a very practical example of dependency injection in use and mostly neglect the theoretical attributes. He does it this way in order to make it easier to understand what dependency injection is at its core in a manner divorced from the rest of the complexity that people usually associate with the concept.
Read more…
In this article, Ankita Masand will show you how to build an event-based application and send a web-push notification when a particular event is triggered. She’ll set up database tables, events, and scheduled triggers on the Hasura GraphQL engine and wire up the GraphQL endpoint to the front-end application to record the stock price preference of the user.
Read more…
If you have used Redux at any point while developing an application to manage state, you will most definitely have come across reducers. In this tutorial, Fortune Ikechi will show you the concept of reducers and how they work, specifically in React applications. In order to understand and better use Redux, a solid understanding of reducers is essential. Reducers provide a way to update an application’s state using an action. It is an integral part of the Redux library.
Read more…
