DEV Community: Vladislav Kresov

Circle of Life in React

Vladislav Kresov — Sun, 08 Mar 2020 12:23:51 +0000

Disclaimer. That an import of my medium blog. All my tech blogs would now be published at Dev.

In my previous blog posts, I forget to mention about the lifecycle of a component in React and methods that we use inside a class component. So let’s fill that gap and knowledge.

Let’s dive in

Before we jump to methods, let discuss what is the life cycle of a component in react.

Belov is the lifecycle of React component

In a nutshell out component has a free life state. The first component is born ( add to virtual react-dom ). The second ( component update, if we computing some data ). And then if needed component died ( if your component placed in inside the main content tag you probably want it to die ( yep all react developers monsters and programming they’re child’s to be killed ).

Ok, we have three states of components but what about methods.

render() {

We already highlighted it in my previous blog about a class component. That the only method strictly required by class component cause without it nothing will be rendered and also, the app will yell at you with all of its power of cyber lungs.

Render method

As we discussed previously that method just renders all your JSX into the DOM. The thing to mention, render method is a pure function ( check out this blog about pure function in JS, click) and it’s not allowing any mutation of data inside it, only rendering of it. Because of that you should call or write other methods outside, before render and after a constructor.

}

componentDidMount () {
Your component mounted, loaded and ready for more action? Let’s make a call for API and bring the data!

No seriously that methods are an ideal place to make an API calls and fetch the data from anywhere and render it on screen. Also here you can setState of the component and it will update it before the browser will update UI. Because of that toying with the state which depends on external data inside of that method is a good idea.

And I’m too lazy for making a screenshot of code example for that component, so let’s go to the next subject.

}

componentWillUpdate (prevProps) {

Another one good method to work with a changing state that invokes immediately after changes are happening.

That method is good in many events that don’t associate with external data like, clicks or typing something in form. One thing to remember when working with this method. You always should check a previous state before the update if you not… an infinite loop will catch you.

}

componentWillUnmount () {

As name methods say, it will unmount, destroy, crush, smash… hmm hmm. The component will be removed from the dom. It’s a healthy practice to clear the timers, canceling API calls inside that method.

Little note. Because component will be destroyed and it never is re-render, so we cant modify state by calling setState() inside this method.

}

A little conclusion. All of this lifecycle is a common practice when working with class components and have some pros and cons in each one. Less common methods exist too but cause I never used them, I don’t include them in the guide. As I say in the previous blog, in my opinion, the future of React lay in the valley of Hooks ( sounds creepy, but promising…. what with me today?). But I anyway will bring the light in the land of a class component.

React Class Component

Vladislav Kresov — Sun, 08 Mar 2020 12:16:26 +0000

Disclaimer. It's an import of my blog post from a medium that I wrote a couple of months ago.

Today we will speak about the Class component.

Class component it’s one of two choices in React when you build your app, another one it’s a functional component but it for another time.

First thing first, what is Class in JavaScript, when was it implemented in the language and what it does?

In a nutshell. JavaScript Class it’s a code sugar for object prototyping that was confusing some of the programmers, who switch from object-oriented programming languages based on classes. They appear at ES6 redaction of JS.

It takes all the features of JS prototyping such as constructors that provide the class ability to create a new object. Also, it uses this property which refers to inner code to that particular class. Super property that refers to other classes to the parent class.

Ok, now we now how classes have appeared in JS and what they do.

But how we use them in React?

Basic class component.

The class component before introducing hooks was our main choice to build an app and manage the state. And build in methods of a class component in React expand our possibilities to manipulate the virtual DOM. One of these methods is the render method, the main purpose of it lays in the name. It’s the only method that the class component requires strictly ( other methods it’s another topic to discuss ).

The picture above is a basic class component.

It’s the most basic class component that you can build. That particular component just renders JSX markup nothing more. But we have plenty of room to improve our components.

Let’s add an ability to manage the state by defining the constructor method.

Above is an ES6 React class component

Couple of things to explain. First, we import { Component } from ‘react’, that needs to extend Component to our ClassComponent, by doing this we create ES6 class and now we can use a constructor. To constructor, we pass props as a parameter, then inside a constructor, we define superclass super which refers to all inner props of a constructor to parent class ClassComponent ( why we even do this? I will explain that in another blog post, For now, just remember to do it every time you build a class component). And at last, we define our state by type this.state, for now, it’s an empty object, soon we will add something to state, and I explain state functionality.

Managing the state. Events. Methods.

Now we properly set up our component and ready to provide some interactivity to its behavior. But how we do it?

First, we need to understand what is the state in react. A component state is a JS object that contains the property value of the class component in the React library. We can display state value on the screen and modify it by events such as click, the input of data, etc ( full list of events on React Docs https://reactjs.org/docs/events.html ).

Above is state example.

Knowing what the state is we can now change its value by events. But behind each event must be some logic, so how we can change our state?

The answer is methods.

Example of method that change count

You can name methods as you want. Basically, it is a function that contains the behavior logic of your app and adds interactivity to a webpage after it bonded to the event ( like onClick in that scenario ). Let look to our little up closely.

Counter class component.

Before wrapup blog, let’s break down what going on here.

I create an ES6 React class component by defining it with a served class word, then extends component by that I open for my self ES6 syntax and use a constructor. Inside of constructor, I create a state object by typing this.state and value to the state. Then I use a render method to display data on the screen. After that, I create a custom method handleClick, inside of the method I use this.setState to modify a state. Then I bind method in the constructor so it will work correctly, and finally, I use a method in onClick event ( don’t forget to type this before the method or it won't work ). And after all those steps simple Class component is ready.

Tremble before my counter!!!!

That all about the basics of a class component in React. Personally now I see the future of React in Hooks. But knowing how to use class components can’t be underestimated because many apps built by the React library already exist. One of your tasks on future work may be the responsibility of supporting old projects built by using class components and maybe add new features using them ( maybe it will be the demand of the project ( I don’t know why, but just in case )). So know how to use it it’s power and your advantage in job searching

Who said, “What are Components in React”?

Vladislav Kresov — Wed, 26 Feb 2020 12:19:36 +0000

Disclaimer. It's one of the first blogs that I wrote on Medium. I decide to write my technical blogs on Dev so I just move some content here. Hope you would like it.

Really what it is?

According to React docs. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Components are a core concept of the React library. You can create magnificent things using that way of writing your code. But what is a component principle?

Also, React use two types of component. Components based on function ( traditional or arrow function ) and Class component. But both these components deserve separate posts for both of them.

But why bother to use components?

That all sound cool but why bother yourself with learning and implement this concept? The thing that’s if you do this, your code will be much cleaner, more readable, working with code that split into tiny pieces will be much easier.
Let’s take some examples.

We have some component, like the header of a website if we do it old way it looks like that:

Relatively hard to read all this stuff and think about new features, isn’t it? And it is just JSX murk up, without any interactivity. But what if we slice it to smaller parts.

Here we cut out the navigation part of markup and move it to a separate component.

And here we move our form in a separate file as well.

The parent component looks like that right now. I also make a separate component for the logo and place it inside the parent component. It's another way to isolate code chunks and make the development process easier.

See how much cleaner code became, and now for us it’s easier to work with. It’s doing the same thing but all the parts are separated. Even if we add interactivity or state and state management to this, all the components will still much easier to maintain and modify.

But that not all. Your components can be used anywhere across the app and even can be put into the library or as npm packages and be used in other your projects. If you keep in mind, eventually you will start to build your components to use it across your app and other projects as well.

Wrapping things up. Components are the core concept of the React library. They provide the ability to divide our code into smaller parts for much faster development features and keep all the things smaller and reusable.

Add background to styled-components while use ".map" method

Vladislav Kresov — Mon, 13 Jan 2020 15:44:31 +0000

Hi everyone, it's my first post on DEV!

Two days ago I hit a small problem, but still, that took time to solve it.

I decide to write a little post about it for future me and maybe someone who will meet the same issue. I hope it will be helpful and save some time for someone!

The thing that I should do, was to display different background on a couple of divs while using styled-components and map method. I try to pass the background as property but it didn't work. I think the reason behind that is either me who pass prop incorrectly, or props in the first place wouldn't work in that case? It doesn't matter cause I came up with another solution.

It's inline styles. I dunno how much the performance unfriendly and I sure that a better solution exists, but if you struggle with the same problem and yet don't find a solution, I hope my small code example would help you!

Thanks for attention.

Edit note. You should use camelCase property when to write inline styles like "backgroundSize". I forget that when write example code. Sorry.