Learning Object Oriented Programming Vs. Functional Programming for ReactJS

What the heck are these? I thought there was just programming?!

If you are new to programming or you have heard of these programming paradigms but don’t fully understand what the two are I will explain what they are, how you can think in those frames of mind, and how they interact in Web Development when using React.

How To Think In OOP

The best way to understand what OOP(object-oriented programming) is to first understand that everything is an object even yourself, you are the object you are probably most familiar with so that is a great place to start. Think about your characteristics, how tall you are, what’s in your pockets, even what your favorite color is, all these attributes have keys or names and values associated with each one.

Objects can also have functionality not to be confused with Functional Programming. You have attributes but you can also breathe, eat and walk, as an object you can change, you won’t be after you eat.

How to think in FP

If you ever get confused learning what functions are, reading someone else’s code or even reading your own code this is the Core of FP, When using a function value(s) go in and a value is ALWAYS returned at the end of the function.

When using React for your front end, as a mentor of mine once said: “you have an orchestra in front of you and you are the conductor and you have to tell it when to make music and what genre.” , of course, you have to build your components and choose which ones will be smart but ultimately you are the one changing the effects of the functions themselves and when they go to work.

There’s no I in Programming… well there is, but You know the saying

In order to have a fully functional application from frontend to the backend using react, you need to use both Object Oriented and Functional Programming. As you’ve probably figured out by now the backend handles the OOP and the frontend handles the FP of the app.

When you click a link, button or Submit a form you make a request to your backend API so it can do the work of finding the data needed for the page. When you pull your data from the database your data is the object(s) you are working with on the backend which in return you can send back a response to the frontend. Back on the frontend, you customize what is displayed when and where using components, lifecycle methods and handler functions using React. It all runs full circle when you look at the big picture.

In conclusion

It’s pretty simple you and everything around you is an object with attributes and they can change, based off of what happens when you make an interaction. Objects can have functions but that doesn’t make what you’re using it for functional programming, because when you have a function on the frontend it doesn’t have any attributes. Take a walk and look around to see what examples you can find of both types of programming.

Related posts:

The rise in prominence, as well as the expansion of Cryptocurrency investment over the last few years, has created the sector an appealing prospect for those who are ready to take a chance on their…

I am fortunate to be attending the Live Event with my StoryAthlete Partners. We are in the country music capital of the world Nashville TN. There are about fifty of us rooming in an updated hotel…

Amy Blankson is the CEO of Fearless Positivity and author of The Future of Happiness. She believes that “no matter where your baseline for happiness is today, you can always increase your overall…