Skip to content

RESOURCES / BLOG / React

Results for Tag ‘React’

How to Upload Multiple Images at Once in React

Topics Guest Post, Image, Javascript, React
Read Time

Ever implemented an upload file feature with React using an npm package, but it doesn’t have options for selecting multiple images? In thisarticle, we’ll solve that challenge by implementing a simple React app where users can select multiple images. Prerequisites You should have: Knowledge of JavaScript and React…

Optimize Images in Next.js Using Custom Loaders

Topics Guest Post, Image, Next.js, React
Read Time

Next.js has a built-in Image Component that automatically optimizes images for your website or application. The default loader for Next.js applications uses the built-in Image Optimization API. This API optimizes images from anywhere on the web and serves them directly from the Next.js web server. Next.js provides a…

How to Implement Lazy Loading with Infinite Scroll

Topics Guest Post, Image, Javascript, React
Read Time

One of the major challenges we face as frontend developers is to efficiently manage large sets of data. “Efficiently” here means managing the data in a way that doesn’t affect the user experience negatively. The common way of handling this is with Pagination but the problem with pagination is that…

3 Ways to Implement a Carousel in Next.js

Topics Guest Post, Image, Next.js, React
Read Time

Carousels, referred to as image sliders or sliders, provide an improved visual experience on websites by highlighting important aspects of a product, service or value proposition. This post discusses three different ways to add a carousel to our Next.js application. View the source code on Github here. Prerequisites To…

How to Serve Videos in Next.js Applications With Cloudinary

Topics Next.js, React, Video, Video API
Read Time

Videos are a powerful visual medium that fosters engagement by adding emotions and empathy. Web developers are often required to work with videos for websites or applications and must be equipped with the relevant knowledge and expertise. This article shows you how to add videos to a Next.js app…

Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021

Topics CDN, Core Web Vitals, Performance Optimization, React, SDK, Video API
Read Time

tl;dr; Cloudinary conducted a workshop at React Summit 2021 to highlight the effect of media performance on websites by correlating it with Google’s Core Web Vitals and other performance measurements. Also presented were typical optimization techniques along with code samples. Here are the recording and the slides.

React Summit Recap: Web Performance, Media Optimization, and Core Web Vitals

Topics Core Web Vitals, Performance Optimization, React
Read Time

Optimized media assets have always been essential to website performance. To help developers measure, understand and improve website performance, Google created Core Web Vitals, a subset of Web Vitals that focuses on three aspects of the user experience: loading, interactivity, and visual stability. In June 2021, Google plans to…

Lazy Loading: Choosing the Best Option

Topics Javascript, Progressive Web App, React, SDK
Read Time

In today’s digital-first age, online site performance is critical for ensuring business continuity, attracting repeat sales, and gaining a competitive advantage. Lazy loading accelerates performance for websites and apps. Many implementation techniques are available, however, so choose wisely. In particular, become familiar with the universal practices and the language-…

Lazy-Load React and Boost Page Performance for Your Apps

Topics Asset Management, Lazy Loading, React
Read Time

React is a popular open-source JavaScript library for creating user interfaces (UIs) for single-page web applications, with React Native slated for building mobile apps. Helpfully, React organizes UIs into collections of reusable components, rendering feature management a cakewalk. However, to boost user engagement, conversion, and SEO ranking, you…

Start Using Cloudinary

Sign up for our free plan and start creating stunning visual experiences in minutes.

Sign Up for Free