asayer·3y5 Tips To Improve Your TypeScript Code
TypeScript is rapidly gaining popularity as a way to write type-safer, maintainable JavaScript code. This article will cover five tips that will help you improve your TypeScript code. To get the most out of this text and become a great developer, you must have sufficient knowledge of JavaScript, including variables, data types, and methods.
Community Picks·3yHow React 18 Improves Application Performance – Vercel
How React 18 Improves Application Performance - Vercel Engineering Wednesday, July 19th 2023. Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. We'll explore how these latest features impact and improve your application's performance.
freeCodeCamp·3yHow to Build a Portfolio Site with Sanity and Next.js
Sanity is a headless CMS framework for managing content. Sanity is Sanity's open source single-page app for managing your data and operations. You'll learn how to use Sanity as a data source to build a portfolio site with Next.js. In this tutorial you'll be mounting it together with your Next.
Community Picks·3yTypescript CRUD API: Next.js, Tailwind, tRPC, Prisma Postgres, Docker
Learn how to build a FULL CRUD API app, including a simple frontend to use it, using the following technologies: Next.js, Tailwind, tRPC, Prisma Postgres, Docker. All the code is available for free on GitHub(link in video description) Learn how to code your own blockchain and create your own crypto-currency with the CoinCamp.
freeCodeCamp·3yHow to Add Real-time Post Notifications to Your React Applications
How to add Real-time Post Notifications to your React app, that updates the user when someone likes or comments on your thread? You must know React and Firebase in order to proceed with the things explained below. If you want to build a social media application, simply refer to the videos below.
freeCodeCamp·3yTypeScript Handbook for React Developers – How to Build a Type-Safe Todo App
TypeScript Handbook for React Developers is just for you. You will learn how to handle state and props with strong typing, how to create React components with TypeScript. By the end of this tutorial, you'll have a solid understanding of TypeScript and be ready to develop type-safe React applications with confidence.
habr·3ySupercharge Your Projects with React Custom Hooks
React Hooks are a feature introduced in React version 16.8 that revolutionized the way developers write and manage stateful logic in functional components. They enable developers to break down complex components into smaller, more manageable pieces, resulting in cleaner and more maintainable code. Hooks allow developers to manage component state and handle side effects effortlessly.
asayer·3yAnimations and Transitions with Tailwind CSS
Animations and Transitions with Tailwind CSS have been a lot of work, but this article will show you how to easily achieve those tasks with TailWind CSS. The major catch of TailwindCSS is that you can make animations right from your inline styling without creating a separate style file as you would in Vanilla CSS.
asayer·3yBuild an app with React and Supabase
Build an app with React and Supabase Back this tutorial will explore building a basic CRUD (Address Book) application using React. We will set up a Supabase database, connecting a React application to it and implementing CRUD operations in our application. By the end of this tutorial, you will have a solid understanding of how to use Supabase.
Community Picks·3y5 most famous React security threats and how to solve them ⛑️
React's JSX does a great job at escaping potentially dangerous strings by default. Cross-Site Scripting (XSS) is one of the most common security threats in any web application. Insecure Direct Object References (IDOR) is a type of vulnerability in a web application that allows an attacker to bypass authorization.
Hacker Noon·3yOptimizing SEO in Next.js: Techniques for Better Search Engine Visibility
Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility.js is a powerful React framework. It provides developers with a solid foundation for building performant and SEO-friendly web applications. In this blog post, we will explore advanced techniques for optimizing SEO in next.js.
freeCodeCamp·3yHow to Use TypeScript Generics with Functional React Components
Generics allow you to define flexible components that can adapt to different data structures. By leveraging Generics in functional components, you can create highly reusable and adaptable UI elements. In this tutorial, we'll begin by understanding the concept of generics in TypeScript and how they can be beneficial in the context of React development.
Hacker Noon·3yUnderstanding React's useEffect Hook: A Deep Dive
Understanding React's useEffect Hook has revolutionized how we handle side effects in our functional components. In this guide, we'll demystify its use cases and how it has made side effects management a breeze compared to the lifecycle methods of class components.
Community Picks·3yDeclaring JSX types in TypeScript 5.1
Declaring JSX types in TypeScript 5.1 - LogRocket Blog: A new feature, described as “ decoupled type-checking between JSX elements and JSX tag types’, arrives with TypeScript5.1. This feature enables libraries to control what types are used forJSX elements.
Product Hunt·3yReshaped v2.0 - Professionally crafted design system in React & Figma
Reshaped is a professionally crafted design system for everyday product development in React and Figma. It first launched on May 7th, 2022, and is rated 5/5 ★ by 3 users. The most active community members Hall of Fame Golden Kitty Awards finalists through the years.
freeCodeCamp·3yHow to Dockerize a React Application – A Step by Step Tutorial
How to Dockerize a React Application: you have developed an application that is ready to be deployed. In this tutorial, I am going to take a React application and show you, step by step, how to build an image, push it to a remote registry, and use that image to run your application in a container.
Community Picks·3yNext.js App Router
Next.js App Router implements React Server Components, a new feature introduced in React 18. To support the App Router, currently all components and hooks from MUI libraries are exported with the directive. Using Material UI with the default theme, you can add Material UI components to Next.js routing files without any additional configuration.
asayer·3yCreating easy custom modals with React
Modal elements are parts of an application that show up as an overlay on a web page and display extra information, request user input, or carry out particular actions. With custom modals, you can specify the transition effects, control how the modal opens and closes, and add interactive elements like texts, images, buttons, forms.
ITNEXT·3yDecoupling UI and Logic in React: A Clean Code Approach with Headless Components
Decoupling UI and Logic in React: A Clean Code Approach with Headless Components. We will demystify this pattern, shedding light on what exactly it is, why it’s beneficial and how it can revolutionize your approach to interface design.
This Week In React·3yThis Week In React #153: Server Components, Astro, MUI, Next.js, Remix, React-Query, AsyncLocalStorage, forwardRef, Storybook, Vaul, Solito, Yoga, Reanimated, React-Tweet, Expo-Router, Lottie, Bun, Ty
This Week in React: Server Components, Astro, MUI, Next.js, Remix, React-Query, AsyncLocalStorage, forwardRef, Storybook, Vaul, Solito, Yoga, Reanimated and React-Tweet. This week's news includes news on the React-Native fronts.
Laravel News·3yInertia vs Livewire
Inertia isn't a frontend framework. It's a wire protocol specification to allow you to build Laravel + React / Vue / Svelte apps monolithically. Instead, you should be keeping up with what new features Vue or React are getting. It solves the problem it set out to solve.