New to React? I got you!

I read a post once. The author was arguing that learning a programming language was like learning any other human language and eventually, I think I have come to agree with him.

While learning the English Language, for instance, we were first taught that “B is for Ball” and that “Ada is a girl” and after a while, we all started making outrageous sentences with the information we had at the time.

We messed up our tenses, the concept of singular and plural is still foreign to most of us but eventually, we learned how to communicate. Well, some of us. Some people are just better at learning languages than others and it’s no different with React.

Learning React, I struggled with understanding the core concepts. I felt that if I could explain these concepts to a non-programmer, unravel the foundation on which the framework was built, figure out which screw goes where and when to use what, then I’m halfway through.

In this post, I am going to try to explain in layman terms what most of the terms you will come across in React means, hoping that it would help you as you start on your React journey.

According to the information on the React Docs, “React is a single page application that loads HTML pages and all the necessary assets (such as javascript and CSS ) required for the application to run”.

React makes use of components which are just like having the ‘divs’ or ‘sections’ in HTML in separate files. It’s like when you want to write a letter, and you have your little address bar by your right and your ‘Dear Sir’, by the left and then the body and in the body, you also have all these paragraphs and after that, your little signature and “Your’s in whatever”. All these that you bring together to make a whole? they are the components. Make sense?

Some components are functional or stateless while others are class-based or stateful, the difference? well, the functional components are just that, ‘functions’. They don’t have state or lifecycle methods and just output JSX(javascript XML) which is just this cool tool that allows us to write HTML inside javascript. The class-based component, on the other hand, has all of these things.

The state is where you are right now. I am not talking about your location, I’m talking about your feeling. You may be happy right now and then something comes along to change that and suddenly you are raving mad. Happiness was your initial state and whatever changed your mood, simply updated your state. Class-based components have initial states that get ‘altered’ or rather ‘updated’ when something happens.

Most functional components have ‘props’ which is just short for ‘properties’. It is how components ‘communicate’. The stateful component which is usually the parent, tells this functional component stuff what it should do and in the usual fashion of teenagers and young adults, functional components had to find a slang for it because apparently, ‘properties just aren’t cool!’.

Lifecycle methods are exactly what you think it is. Remember back in Biology class studying the lifecycle of a mosquito? from egg to larvae down to the part where it dies?. Components have a cycle like that too. from the point when it mounts to the DOM to the point when it is unmounted.

React gives you ‘methods’ which are rightfully called ‘lifecycle hooks’ which helps you do things to a component at each point in the cycle.

The ‘ComponentWillMount’ method essentially asks ‘Is there something you want me to do before I render this component to the DOM?’

‘ComponentDidMount’ says, ‘Now that the component has mounted, do you want me to do anything?’

‘ComponentWillReceiveProps’ gets called whenever there is a change in state.

There are other methods like the ‘ComponentWillUpdate’ and ‘componentDidUpdate’ and of course, we have the ‘ComponentWillUnmount’ method which is called just before a component is removed from the DOM and which essentially cancels out everything the ‘componentDidMount’ started. Things like network requests and invalidating timers.

‘ComponentWillUnMount’ is like your clean up guy. it is the method you call after committing murder and need your fingerprints completely erased from the scene of the crime.

So there, the key concepts in react or some of them anyway. I hope you found this helpful and remember, what I have done is try to explain what ‘ Boy’ and ‘Obi’ mean. Running around screaming ‘Obi boy’ or ‘Boy Obi’ will make no sense to anybody. You need the ‘is and a’. Peace!