> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# React quick start


[readme-version-support-link]:https://github.com/cloudinary/frontend-frameworks/tree/master/packages/react#version-support
[sdk-image-and-video-upload-link]:react_image_and_video_upload
[alternative-transformations-link]:react_image_transformations#alternative_ways_to_apply_transformations

> **INFO**: :title=Want to build faster?

Try our [React Starter Kit](react_starter_kit) for a faster way to get started with a fully functional React app that includes Cloudinary upload, delivery, and agentic tools built in.
This quick start lets you get an end-to-end implementation up and running using the React SDK in 5 minutes or less.

#### Prerequisites **To perform this quick start, you'll need:**

* A Cloudinary account. If you don't have one yet, you can quickly [register for free](https://cloudinary.com/users/register_free).
* Your product environment credentials. You can find your [credentials](product_environment_settings#api_keys) on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings. 
  * To use your **API environment variable**, copy the provided format and replace the `<your_api_key>` and `<your_api_secret>` placeholders with the actual values found on the page. Your cloud name will already be correctly included in the format.
* A working React development environment with a [supported version][readme-version-support-link] of React.

> **NOTES**:
>
> * This quick start is designed for quick onboarding.  It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.  

> * If you aren't familiar with Cloudinary, you may want to first take a look at the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to Cloudinary features. You may also find our [Glossary](cloudinary_glossary) helpful to understand Cloudinary-specific terminology.
## 1. Set up and configure the SDK

### Install the packages

Install the required packages using the NPM package manager:

```
npm i @cloudinary/url-gen @cloudinary/react
```

> **TIP**: If you prefer not to use a bundler, you can import the packages directly from a CDN. See [CDN import](react_integration#cdn_import) for details.

More info about the packages...

Two libraries are required:

* [frontend-frameworks](https://github.com/cloudinary/frontend-frameworks/tree/master/packages/react) for rendering media using the React framework.
* [js-url-gen](https://github.com/cloudinary/js-url-gen) for building transformations.

> **TIP**:
>
> :title=Tips:

> * To get a more in-depth understanding of the architecture, you may want to take a look at the [React SDK introduction](react_integration). 

> * To start with full example apps, see [React sample projects](react_sample_projects).

### Configure Cloudinary

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

App.js

```react
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'
    }
  });
};
```

More info about configuration...

You can set any [configuration parameters](cloudinary_sdks#configuration_parameters) in this way. Here we're setting `cloudName` to `demo`.  

For the purposes of this quick start, you can optionally keep `demo` as the cloud name, but if you'd like to perform the quick start from your own account, change the `cloudName` value to your cloud name (found on the Cloudinary Console Dashboard).

## 2. Upload an image

If you changed the cloud name in the previous step to your own, you need to use an image that's stored 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](https://cloudinary-devs.github.io/cld-docs-assets/assets/images/models.jpg) locally, then upload it to Cloudinary.

> **NOTE**: For convenience, the instruction below shows you how to manually upload files in the Cloudinary console UI, but as a developer, you'll probably be interested in uploading files programmatically. There are several ways to do this in client-side only applications, as explained in [React SDK image and video upload][sdk-image-and-video-upload-link] or you can use the [CLI](cloudinary_cli).

For the purposes of this quick start, the quickest way to upload a single image is as follows:

1. Log into your [Cloudinary Console](https://console.cloudinary.com/console). 
1. Select [Media Library](https://console.cloudinary.com/console/media_library/search) from the left panel. 
1. Click **Upload** to open the Upload Widget, then click **Advanced** and type "docs/models" into the public ID field. 
1. Click **Browse** to find the image to upload. Once uploaded, you can see the image in the listed assets (set **Creation date** to **Today** in the **Search** to find it quickly).  

In the next step, you'll need the [public ID](cloudinary_glossary#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, double click the asset to open the Manage page, navigate to the **Summary** tab, and copy the **Public ID**:

![Select and copy the public ID](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_grey/f_auto/q_auto/v1742385074/docs/public_id_media_library.png "thumb: w_600,dpr_2.0, width: 600, popup: true")

> **NOTE**:
>
> If your product environment uses the legacy fixed folder mode, you won't see the public ID at the bottom of the **Summary** tab. Instead, it's located at the top left corner of the Manage page.

## 3. Transform and deliver the image

Copy and paste these import statements below the existing ones:

App.js (continued)

```react
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)

```react
  // 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 an image with a public ID other than `docs/models`, make sure to update your code with the public ID of the image you're delivering.

More info about transformations...

There are many ways to transform your assets. Find them all in the [transformation reference](transformation_reference).
The `AdvancedImage` component is used instead of an image tag because it can provide extra functionality, such as lazy loading and responsive images.  Learn more about [React plugins](react_image_transformations#plugins).

If you did want to use an image tag, you could [build the URL](react_image_transformations#direct_url_building) using the `toURL` method, and set the `src` attribute as follows:

```react
const src = myImage.resize(fill().width(250).height(250)).toURL();

...

<img alt="models" src={src} />
```
There are [alternative ways to apply transformations][alternative-transformations-link] to your images, for example:

```js
  import { transformationStringFromObject } from "@cloudinary/url-gen";

  const transformation = transformationStringFromObject({crop: "fill", height: 250, width: 250});
  myImage.addTransformation(transformation);
```

## 4. Run your code

Run the code to see the transformed image.

![Transformed models image](https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/docs/models "with_code: false")

## View the completed code

Here's the full example:

This code is also available in [GitHub](https://github.com/cloudinary-devs/cld-react-sdk-quick-start).

> **Ready to learn more?**:
>
> * Understand the architecture of the React SDK and get a more detailed [overview](react_integration#overview) of the libraries.

> * Find out more about [transforming images](react_image_transformations) using `@cloudinary/url-gen`.

> * Learn about [transforming videos](react_video_transformations) using `@cloudinary/url-gen`.

> * Discover ways to improve load times and make your images responsive and accessible using [plugins](react_image_transformations#plugins).