Overview

Learn how to install and configure the Cloudinary React SDK in your React environment.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

The Cloudinary React SDK

0:00	The Cloudinary React SDK provides transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing React application.

Install the React SDK

0:16	To install the React SDK, in a terminal run:

Import Cloudinary and AdvancedImage into your project

0:43	The AdvancedImage component displays Cloudinary images in your app. To use the AdvancedImage component, add the following import statements into your project:

Configure Cloudinary

0:58	To configure the SDK for your product environment, you can set your cloud name (in addition to other configuration parameters) in a new instance of Cloudinary, like this:

Use the AdvancedImage component to display an image

1:18	Use the image method of the Cloudinary instance to reference an image in your product environment. The method takes a public ID as a parameter and returns a CloudinaryImage object. Use the AdvancedImage component with the cldImg property set to the CloudinaryImage to display the image in your app. For example:

Resize the image

1:53	Resize the image using the Resize action. Import Resize and use the scale method to resize the image to 250 x 250 pixels.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.