> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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.
{videoTranscript:publicId=training/config_react}

> **View the code :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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](optimization_tips_tutorial)

Tips for delivering optimized images

[Upload Assets in React](upload_assets_in_react_tutorial)

Upload assets using the Upload widget in a React app

[Optimize Videos in React](optimize_videos_in_react_tutorial)

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;