Front End Development
Create a Universal Button With React + TailwindCSS
Build a reusable React button component with Tailwind CSS that adapts as a button or link based on props—simple, flexible, and efficient.
JS
Jay
Simons#React 29 posts
Posts tagged with "React"
Front End Development
React: Simple Yet Elegant Toast Notifications
Build lightweight, custom toaster notifications in React using the Context API—no dependencies needed!
JS
Jay
Simons
Front End Development
Using ENUMs to Make JSX Select Inputs More Type-safe
Enhance your React/Next.js projects with TypeScript for better type safety and code hinting. Learn how to use ENUMs for type-safe HTML select elements.
JS
Jay
Simons
Full-Stack Development
A Complete Guide to Authentication in Next.js 14
Master Next.js 14 authentication with our guide on JWTs, custom middleware, cookie storage, and Cloudflare Turnstile for top-notch security and user experience.
JS
Jay
Simons
Native Development
How I Used Electron and React to Create a Sweet UI for FFMPEG
Explore how to create a user-friendly UI for FFMPEG using Electron and React, simplifying video conversions with real-time progress updates and quality control.
JS
Jay
Simons
Front End Development
How to Create an Animated Space / Stars Background Effect in React / Next.js
A quick tutorial on how to create a star field background effect in React / Next.js.
Full-Stack Development
Making Typescript More Flexible: Generics and Discriminated Unions
Master TypeScript's key features—Generics, Discriminated Unions, and Type Guards—with hands-on examples. Boost your code's type safety and flexibility.
JS
Jay
Simons
Front End Development
Implementing a Loading Overlay with next/router Events in Next.js
Build a route change loading overlay using `next/router` events.
Front End Development
How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS
By leveraging the strengths of React, Tailwind CSS, and Daisy UI, we can create a user-friendly and aesthetically pleasing file uploader.
JS
Jay
Simons
Front End Development
React and Tailwind CSS: Making a Typewriter Animation from Scratch
Learn to create a typewriter animation using React and Tailwind CSS. Step-by-step guide to add a retro touch to your web design.
JS
Jay
Simons
Front End Development
Easy Dropdown Menus With Next.js and Tailwind CSS
In this article, I'm going to show you how to create a very simple, yet elegant, dropdown menu using nothing but Next.js and Tailwind CSS.
JS
Jay
Simons
Full-Stack Development
Creating a Basic Authentication Provider in Next.js
In this tutorial, we'll walk you through the process of creating a basic authentication provider in Next.js.
JS
Jay
Simons
Full-Stack Development
Building a Universal Form Controller Using Next.js & Yup
Learn how you can create your own reusable universal form controller to use across your Next.js app.
JS
Jay
Simons
Front End Development
Create A Custom Audio Player Component Using React/Next.js, Tailwind & Howler
In this tutorial, we will explore how to create a custom React component that combines the power of Tailwind CSS for styling and Howler for audio playback.
Full-Stack Development
Create a Google Login Button With No Dependencies in React / Next.js
In this article, we'll be exploring how to create a Google login button in React without relying on any external dependencies.
JS
Jay
Simons
Front End Development
How to Create a Verification Code Input Component in React / Next.js
In this article, I'll show you how to create a robust OTP code input component for React.js, using no other dependencies.
Front End Development
How to Disable Body Scroll When a Modal Dialog is Open in React / Next.js
In this tutorial, I'll show you how to create a modal dialog overlay and disable the body scroll bars when it is open using Next.js 13 / React.
JS
Jay
Simons
Front End Development
Create a Responsive Animated Sidebar Using React / Next.js and Tailwind CSS
In this tutorial, I'll show you how to leverage the power of Tailwind CSS and Next.js to create a simple yet elegant mobile-responsive sidebar using no other dependencies.
JS
Jay
Simons
Full-Stack Development
Turnstile: CloudFlare's New reCaptcha Replacement in NextJS / React
In this article, I'm going to show you how to implement CloudFlare's Turnstile CAPTCHA service in a React or NextJS app using Le0Developer's react-turnstile package.
JS
Jay
Simons
Full-Stack Development
NextJS 13 / React Single Sign-On (SSO) Authentication Via Azure Active Directory (AD)
In this tutorial, I'll show you how to authenticate a user against an Azure AD domain in a NextJS 13 app environment.
JS
Jay
Simons
Full-Stack Development
Internationalization Using React / NextJS 13 and ChatGPT
In this tutorial, I'm going to show you how to utilize OpenAI's text-davinci API, more commonly known as ChatGPT, in conjunction with NextJS's fabulous automatic locale detection and Static Site Generation (SSG), to automate translation of your website content at built-time.
JS
Jay
Simons
Full-Stack Development
How to Create an Infinite Scroll Component in NextJS / React (Updated)
In this tutorial, I'll show you how to create your own infinite scroll component in NextJS / React without depending on an external library.
Full-Stack Development
How to Style Markdown in Next.JS Using React-Markdown and SASS
Markdown is the preferred language for creating content for blogs and websites because it is simpler and easier to learn than HTML. In this tutorial, I'll show you how to format your markdown as HTML in React and then style it with SASS.
Full-Stack Development
Next.JS - How to Implement Incremental Static Regeneration (ISR)
Incremental Static Regeneration is a new feature of Next.JS. It allows specific pages to regenerate without having to completely rebuild the app. I'll show you how to get it up and running in a few minutes and lines of code.
Full-Stack Development
React-Markdown - How To Create a Copy Code Button
In this tutorial, I'll show you how to create a code copy button to our React-Markdown code syntax block.
JS
Jay
Simons
Website Design
How to Create a Blog Using Next.js and Contentful CMS
Learn how to create your own completely-free cloud-hosted blog using Contentful, Vercel and Next.JS.
JS
Jay
Simons
Cloud Computing
React / Contentful - Create Entries with Linked Objects
Contentful is my new favorite headless CMS. I use it primarily for generating React / Next.JS static pages. In this tutorial, I'll show you how to programmatically create a Contentful entry with linked objects (references).
JS
Jay
Simons
Website Design
How to Create a Custom Next.js Link Component With Bootstrap Icon
I'll show you how to create a custom Next.JS next-link component with a Bootstrap icon.
JS
Jay
Simons
Website Design
Automated Responsive Images Using React and Cloudflare Images
In today's mobile world, it's important to serve images according to screen size. I'll show you how to automate this process.
JS
Jay
Simons