RESOURCES / BLOG / React
Results for Tag ‘React’
How to Upload Multiple Images at Once in React
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…
Read More ->
Optimize Images in Next.js Using Custom Loaders
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…
Read More ->
How to Implement Lazy Loading with Infinite Scroll
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…
Read More ->
3 Ways to Implement a Carousel in Next.js
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…
Read More ->
How to Serve Videos in Next.js Applications With Cloudinary
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…
Read More ->
Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021
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.
Read More ->
React Summit Recap: Web Performance, Media Optimization, and Core Web Vitals
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…
Read More ->
Lazy Loading: Choosing the Best Option
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-…
Read More ->
Lazy-Load React and Boost Page Performance for Your Apps
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…
Read More ->
Start Using Cloudinary
Sign up for our free plan and start creating stunning visual experiences in minutes.
Sign Up for Free