Recently, I sharpened my React skills while creating a new course for our Cloudinary Academy. My experiences building this course solidified my love for React, and I believe learning to work with it alongside Cloudinary can offer immense advantages for developers engaged with media-rich applications or projects.
React is used by major companies across the globe including Netflix and Uber. One of the main reasons for this popularity is the fact that the React.js library was created by Facebook (then Facebook, now Meta), is open source, and has a large user base of experts that continually contribute to its development and improvement.
React is built on a component-based architecture.
What does that mean?
Simply put, React allows you to create modular components or “chunks” of reusable code.
Why is this good?
Being able to build and focus on smaller individual components helps maintain more complex applications, especially when it comes to scalability.
React’s component-based architecture and Cloudinary’s powerful media management capabilities complement each other seamlessly. Together, React and Cloudinary help developers build visually appealing, responsive, high-performance web applications, so those developers can focus on creativity and innovation rather than infrastructure.
Whether you’re working on a personal project or developing solutions for clients, mastering React with Cloudinary will elevate your development skills.
We used Sandpack to embed Sandbox.io directly into the React SDK Playground, allowing you to programmatically create transformations and instantly see results. This means easy experimentation with code.
Pretty cool, right?
Everything is open source, and you can experiment even more in this course’s GitHub repository.
When you enter the playground, you’ll notice a space to input your Cloudinary Cloud Name and your Unsigned Preset Name.
To make uploads from the frontend, you’ll need this unsigned Upload Preset.
Upload Presets are covered in the course, but if you’re interested, here’s a tutorial that can help you understand how to programmatically create upload presets:
Alternatively, you can also easily create these manually within your Product Environment Settings within your account.
In regards to the Sandbox Code layout, the majority of the code follows a consistent format. Once you become familiar with the pattern, you can focus on the specific details of what makes each transformation work the way it does, understand which modules to import, and what might be the best transformation for your use cases.
Here’s the format:
Firstly, we’ll import the necessary modules.
Secondly, we’ll instantiate asset objects, which can be either images or videos, and we’ll apply transformations to them.
And lastly, we’ll render the transformed assets.
It’s also worth noting that in addition to AdvancedImage, we also provide AdvancedVideo for handling video transformation.
Now that we know the format, it’s time to play!
There are also experiments within each Cloudinary React SDK Playground example! Each experiment involves prompts to modify a parameter in the code.
This allows you to observe the effect on the rendered asset. These are hands-on experiments that will assist you in determining whether or not the parameter is something you want to use when you’re writing your own code.
By actively engaging in these experiments, you’ll gain practical knowledge and develop a deeper understanding of how different parameters influence the desired outcomes with your media assets.
In my opinion, the best way to learn is by doing!
Introduction to Cloudinary for React Developers comprehensively addresses various aspects, including the generation of image and video URLs, the incorporation of diverse transformations for optimization and aesthetic enhancements, and the utilization of Advanced Image and Advanced Video components. These topics provide a deeper insight, which you’ll have the opportunity to delve into should you choose to enroll in the course!
I’ve personally loved diving deeper into the React realm, and recommend you do as well!