React quick start

Last updated: Jan-03-2023

This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.

You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.

You can also view the completed code of this quick start in a GitHub repo and code explorer.

Tip
If you aren't familiar with Cloudinary, you may want to first take a look at the Developer get started guide for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts.

You may also find our Glossary helpful to understand Cloudinary-specific terminology.

Two libraries are required:

Tip
To get a more in-depth understanding of the architecture, you may want to start from the React SDK introduction.

Prerequisites

To perform the steps in this quick start, you'll need:

1. Set up and configure the SDK

Install the packages

Install the required packages using the NPM package manager:

Copy to clipboard
npm i @cloudinary/url-gen @cloudinary/react

Configure Cloudinary

Create a basic React app, and in App.js copy and paste the following:

App.js

Copy to clipboard
import React from 'react'
import {Cloudinary} from "@cloudinary/url-gen";

const App = () => {

  // Create a Cloudinary instance and set your cloud name.
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'demo'
    }
  });
};

2. Upload an image

If you changed the cloud name in the previous step, you need to use an image in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then for the purposes of this quick start, the simplest way to upload it is as follows:

  1. Log into your Cloudinary Console.
  2. Select Media Library from the left panel.
  3. Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the Public ID field.
  4. Click Browse to find the image to upload. Once uploaded, you can click Recently Uploaded at the top of the Media Library to see your uploaded image.

In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to docs/models). If using one of the sample images, you can double-click the image in your Media Library and copy the public ID (between the version number and the extension):

Select and copy the public ID

Note
For convenience, the above step shows how to upload files using the Media Library user interface, but as a developer, you'll probably be interested in uploading files programmatically. There are several ways to do this as explained in React SDK image and video upload or you can use the CLI.

3. Transform and deliver the image

Copy and paste these import statements below the existing ones:

App.js (continued)

Copy to clipboard
import {AdvancedImage} from '@cloudinary/react';
import {fill} from "@cloudinary/url-gen/actions/resize";

Copy and paste the following code in the App function, under the configuration code:

App.js (continued)

Copy to clipboard
  // Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'.
  const myImage = cld.image('docs/models'); 

  // Resize to 250 x 250 pixels using the 'fill' crop mode.
  myImage.resize(fill().width(250).height(250));

  // Render the image in a React component.
  return (
    <div>
      <AdvancedImage cldImg={myImage} />
    </div>
  )

Note
If you're using your own cloud name and an image with a public ID other than docs/models, make sure to update your code for the remainder of this quick start with the public ID of the image you're delivering.

4. Run your code

Run the code to see the transformed image.

Transformed models image

View the completed code

Here's the full example:

This code is also available in GitHub.

Ready to learn more?

  • Understand the architecture of the React SDK and get a more detailed overview of the libraries.
  • Find out more about transforming images using @cloudinary/url-gen.
  • Learn about transforming videos using @cloudinary/url-gen.
  • Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

Rate this page: