DEV Community: Femi Obadimu

How to Cloudinary in React JS.

Femi Obadimu — Sun, 16 Oct 2022 15:15:39 +0000

Hey Fellas, Today we'd discuss how to cloudinary in react js

Firstly i'd love to tell you what cloudinary entails and what its used for .

*Cloudinary is an end-to-end image and video-management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations, file-organizations, to delivery all done in the cloud *

Yes, as stated here .
Say , you're working on a fullstack application and you need a medium whereby you can manage videos, images etc considering speed, optimization and quality of the assets in the application you're building from the frontend to the Cloud. Rather than clogging your backend with all these making in heavy an inefficient.

Cloudinary is the best i've seen so far and i really love it because of its level of simplicity.
Other examples are :
1.Uploadcare
2.Sirv
3.Imagekit.io
4.Cloudconvert

*Steps to set up Cloudinary *
1.Sign up / Login to Cloudinary.
2.Set up a cloudname for the account you've created.
3.Go to Settings/upload
4.Set "uploading enabled : unsigned"
5.Start Using Cloudinary

Steps to Cloudinary in React Js
You need to set up an env file to help store your secret key from the public

REACT_APP_CLOUDINARY_KEY = SECRET-KEY

The package used here is React-Toastify

Below is a react component code, to help out

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Cloud = () => {

  const [image, setImage] = React.useState();
  return (
    <div>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={true}
        newestOnTop={false}
        closeOnClick
      />

      <div>
        <div className="col-span-3">
          <label className="block text-sm font-medium text-gray- 
           700">
            Product Image
          </label>
          <div className="mt-1 border-2 border-gray-300 border- 
          dashed rounded-md px-6 pt-5 pb-6 flex justify-center">
            <div className="space-y-1 text-center">
              {image ? (
                <img src={image.blog} alt="Mart" />
              ) : (
                <svg
                  className="mx-auto h-12 w-12 text-gray-400"
                  stroke="currentColor"
                  fill="none"
                  viewBox="0 0 48 48"
                  aria-hidden="true"
                >
               <path
                 d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 
                 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172- 
                 3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 
                0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
              <div className="flex text-sm text-gray-600">
                <label
                 htmlFor="file-upload"
                 className="relative cursor-pointer bg-white 
                 rounded-md font-medium main-clr  focus- 
                 within:outline-none focus-within:ring-2 focus- 
                 within:ring-offset-2 "
                >
                  <span className="text-center ">Upload a 
                 file</span>
                  <input
                    id="file-upload"
                    name="file-upload"
                    type="file"
                    className="sr-only"
                    onChange={(e) => {
                      e.preventDefault();
                      setImage({
                        file: e.target.files[0],
                        blog: 
                        URL.createObjectURL(e.target.files[0]),
                      });

                      console.log(e.target.files[0]);
                    }}
                  />
                </label>
                <p className="pl-1">or drag and drop</p>
              </div>
              <p className="text-xs text-gray-500">PNG, JPG not up 
              to 1MB</p>
            </div>
          </div>
        </div>

        <div className="text-center my-4">
          <button
            type="submit"
            onClick={onCloudinary}
            className="main-bg mx-3 border border-transparent 
            rounded-md shadow-sm py-2 px-4 inline-flex justify- 
            center text-sm font-medium text-white focus:outline- 
            none focus:ring-2 focus:ring-offset-2"
          >
            {" "}
            Upload
          </button>
        </div>
      </div>
    </div>
  );
};

export default Cloud;

Here's The mail Code Function that triggers when the button is clicked.

This is all you need ..
I hope this helps you out..
fell free to reachout if you dont understand anything

Thanks and Regards..

My Experience at Zuri First Internship

Femi Obadimu — Tue, 17 Aug 2021 16:15:09 +0000

A Triumphant Journey ...

MEET FEMI OBADIMU.....

Hi I am Femi Obadimu . I Started my tech journey(front end Web Development) in my Secondary School days, though we didn't dive in deep we were only taught HTML, only the basic like the opening and closing tag, Headers, Anchors, Paragraph etc.. truly
I was not satisfied with what I was being taught, I had this zeal for technology , so I went online to know more about frontend web development. On seeing what CSS and JavaScript were capable of I was mind- blown, it grew me more interest. After the completion of secondary school, I went to a tech school where I learned frontend development. Last year Due to the Covid-19 lockdown I decided to learn a library related to JavaScript in order to move forward...
My interest was React Js. if you would ask me , the language was very easy, I understood them well , it's cooler than any programing language out there ...
React has been the best so far.
It's fast, light- weight, Scalable etc

I really enjoyed it

ABOUT ZURI INTERNSHIP

Zuri internship:is an engineering-as-a-service business that helps companies build remote teams quickly and cost-effectively. We have 1,000+ software engineers working as full-time, embedded members of development teams at over 200 leading tech companies.

Zuri internship got its first set of interns in 2018 and is now a multi-national corporation, with over 35,000 employees in more than 115 countries. Today, Cisco solutions are the networking foundations for service providers, small to medium businesses, and enterprise customers which include corporations, government agencies, utilities, and educational institutions.

I heard about Zuri from a friend but I didn't apply then due to my ongoing current internship at hash analytics. I must say HNGi8 is very challenging after hearing that interns will be evicted at every stage. now I have to be on top of my game if I want to make it to stage 10.

MY GOAL

My goal is to become an efficient Frontend Developer after the end of the internship, connect with more React Devs During the internship, and get to the last stage of the internship.

FROM ZERO TO HERO

Programming can be difficult if you don't have the right resources, people and mentor to guide through this. There's an African proverb that says

Consistency is the key behind every successful person

Most Developers can testify to this.The first time I wrote my code without any errors I leaped for joy, finally, the pain of spending hours on coding paid off, as time goes on I became a pro or a hero some will say in HTML and CSS.

CLOSING REMARK

Consistency is key, Don't let anyone deceive you, programming needs devotions you, without it you'll probably forget the syntax and semantic of the programming language you wish to learn. You can follow the rule I saw online, which is Eat, Sleep and Rest you do that every day, I assure you that one you'll be one step away from becoming a Hero Here are some free resources wish I know fully well can help you a lot on your journey to programming.

W3school: W3school is THE WORLD'S LARGEST WEB DEVELOPER SITE Launched, 1998. I highly recommend this for any upcoming developer there are tons of tutorials and exercises on any programming language you which to venture into..

Git & GitHub: Git is a free, open-source version control software. It was created by Linus Torvalds in 2005. This tool is a version control system that was initially developed to work with several developers on the Linux kernel...

Here is a Git and Github Crash Course by Brad Traversy. It is short and very easy to understand totally for beginning

HTML Crash Course: You can start with w3school at first, then go for video tutorials, for the video tutorials I'll be recommending Brad Traversy crash course on Youtube, it an hour video which summarizes what HTML is capable of. Brad Traversy is an amazing tutor, that guy knows a lot. Am pretty sure and confident that you'll like this video, be sure to thank me later

Figma: is a vector graphics editor and primarily web-based prototyping tool, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes in real-time on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.

A fast and quick tutorial by freecodecamp which include Wireframe, Prototype, and Design on Figma.

I would also recommend you go through the figma channel on youtube it contains a lot of tutorials for beginners in Figma

A youtube Video by AJ & Smart also gives you a better understanding of the basics of Figma

Finally, You have to test yourself to know how far you've gone in any programming language you desire. There are videos on youtube that can give u a better understanding of how you can create your project..

Thanks for reading, For now, take care.

techforeveryone

You can find me on these social media platforms

Read 😍😍, Clap👏👏👏, Share👍👍

Instagram

Facebook

Twitter

JavaScript Self Typewriting

Femi Obadimu — Tue, 10 Aug 2021 06:54:15 +0000

Get Pumped 😃😃😃 Guys, Because Today we'd be Exploring the world of Self Typewriting in Javascript..

I'm Pretty sure most of you must have seen it, this automated and dynamically typing stuff all over the web today.

Have you wondered how it's been made??

Well, i'm here to let you know how.
This Here explains it in Javascript.

You have to create a function , then use the this keyword attached with some attributes which does the same thing as referring to the function you just created as shown below

Secondly, you use the prototype syntax of writing,
also all logic goes in here, e.g the length, speed of movement etc..

Lastly , You initialize and use it on the DOM , depending on what you want or how you want to use it.

READ, CLAP, SHARE

techforeveryone

follow for more [devsinstitute(https://instagram.com/devsinstitute)

React JS Context Api

Femi Obadimu — Thu, 29 Jul 2021 10:12:28 +0000

Get Pumped Guys !!!

Today we'd be going through reactjs Context Api..along with the other things related to it.
Quickly lets jump right in!

Absolutely , we must have heard of Api's , and if you haven't?
This stands for...
Application Programming Interface which basically contains large amount of data you'd wanna use in your application..
Moreover Api's are formatted differently as the Github Api is different from dribbble's Api..

Now the Context Api in reactjs serves the same purpose only that the data in your api are exclusively for your application..

HOW TO START ?
there are 4 basic steps you need to know.

1. create a types.js file and this file serves as an abstraction layer where we dispatch certain actions to the reducer.

2. import react createContext() and initialize it as shown in the image below

3. Main State. Here is where the data's in the Api fall in, and preferably they are stored in a state and equally dispatching certain actions from the state to the reducer.

4. Reducer Here , you write the code relating to the action you passed from the state..

then BOOM!!!!..... Its All working.

Thats it Guys ....
You now have a Full Reactjs Context Api working.
let me know what you think about this article..
follow on instagram @devsinstitute for more

techforeveryone.

Basic React Component Layout

Femi Obadimu — Wed, 28 Jul 2021 13:08:37 +0000

React js one of the trendy programming languages, comes defaultly with Class based component...
Today we'll be going through the structure of the basic Function Component Layout in react Js..

Firstly this here is very simple , and I love it because by code looks more clearer ..
This is an alternative for Class based component and they work the same way..
One of the major difference between the two ways is that the Class based component has a method called render()... which sometimes is the fastest way to differentiate them and this depicts a lifecycle method.. whereas
Functional based components has no render()..

As I said earlier.. functional based components
makes code structuring more understanding.