> ## 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.

# Configure the React SDK (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples#react

## Overview

Learn how to install and configure the [Cloudinary React SDK](react_integration) in your React environment. 

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### The Cloudinary React SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The [Cloudinary React SDK](react_integration) provides transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing React application.
|

### Install the React SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=16 :player=cld} | To install the React SDK, in a terminal run:
|

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

### Import Cloudinary and AdvancedImage into your project
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=58 :player=cld} | The `AdvancedImage` component displays Cloudinary images in your app. To use the `AdvancedImage` component, add the following import statements into your project:
|

```react
import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage } from "@cloudinary/react";
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=13 :player=cld} | To configure the SDK for your product environment, you can set your [cloud name](product_environment_settings#api_keys) (in addition to other [configuration parameters](cloudinary_sdks#configuration_parameters)) in a new instance of `Cloudinary`, like this:
|

```react
const cld = new Cloudinary({
  cloud: {
    cloudName: "demo",
  },
});
```

### Use the AdvancedImage component to display an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=33 :player=cld} | Use the `image` method of the `Cloudinary` instance to reference an image in your product environment. The method takes a [public ID](cloudinary_glossary#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:
|

```react
<AdvancedImage cldImg={cld.image('docs/soccer')} />
```

### Resize the image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=08 :player=cld} | Resize the image using the `Resize` action. Import `Resize` and use the `scale` method to resize the image to 250 x 250 pixels. 
|

```react
import { Resize } from "@cloudinary/url-gen/actions/resize";

<AdvancedImage cldImg={cld.image('docs/soccer').resize(Resize.scale().width(250).height(250))} />
```

## Keep learning

> **READING**:
>
> * Follow the [React SDK quick start](react_quick_start) to get up and running in five minutes.

> * Find out how to [upload files to Cloudinary using React](react_image_and_video_upload).

> * Learn how to transform your [images](react_image_transformations) and [videos](react_video_transformations) using the React SDK.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

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

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

  
  
  
    Optimize Videos in React
    Optimize delivery of videos in a React app 
  

&nbsp;

&nbsp;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.
&nbsp;