Photo by Tierra Mallorca on Unsplash

If you are lazy like me and don’t want to read the whole article, here is GitHub gist containing cheatsheet for a refreshing token using Axios interceptors — https://gist.github.com/alitoshmatov/9ba256a7981da4f397072f0679f4344e

When I was a beginner in the field I had no idea how authentication works on the client-side and it took me long before I grasp the concept of authentication. So I am here to do my best to ease your journey into the token-based authentication concept on the client-side.

Let’s refresh our knowledge on how token-based authentication works. So basically when a client requests to log in with valid credentials…


Photo by Maranda Vandergriff on Unsplash

Quite a while ago I was invited to have an interview for the JS developer position at EPAM Systems. Below I am going to share questions I had and leave some comments on them. These are common questions for javascript developers, so this article should help you to understand how any javascript interview goes, and help you prepare for your interview.

Some questions might be different from what I had originally but I do my best to keep main context.

const a = [1];
const b = a;
b.push(2);
console.log(a, b);

There are two main things to consider, both related…


Photo by amir rabiee on Unsplash

Basics

Html is essential to get started in frontend development, knowing what is a tag, element, attribute, what kind of events there are in the HTML element is helpful, especially, it helps you easily understand documentations.

Some of the must-know elements: h1-h6, p, b, img, video, i, span, div, form, input, select, a, header, main, footer, section .

  • How form works, understanding of action, and method.
  • What are the attributes, and corresponding attributes of each element.

How styling works, how to link CSS to HTML, what are selectors. Different types of selectors, — tag name, class, id. Inline, internal, external styling.


Klass komponentlardan, funksional komponentlarga o’tish nisbatan qiyin bo’lishi mumkin, ayniqsa siz lifecycle metodidan juda ko’p foydalansangiz.Lekin sizni ishontirib aytishim mumkin, funksional komponentlardan foydalanish juda ham oson. Ba’zi bir, juda ham kam holatlarda ishlatiladigan metodlardan funksional komponentlar ichida foydalana olmasak ham, ushbu maqolada doimiy ishlatiladigan va sizga hayotiy loyiharda foydasi tegadigan lifecycle metodlarni qanday ishlatilishi haqida ma’lumot beramiz.

Lifecycle metodlaridan funksional komponent ichida foydalanishimiz uchun, bizga faqatgina useEffect() hook metodi kerak bo’ladi, va bu metodimiz react-dan import qilinadi: import {useEffect} from react; Ushbu metodimiz birinchi argumentiga funksiya, va ikkinchisiga array oladi. Ushbu hook metodimiz ikkinchi argument array ichidagi qiymatlardan birortasi o’zgargan…


Photo by Ferenc Almasi on Unsplash

In the first part, we have seen how to set up our client-side routing using react-router-dom. In this part, we are going to explore some of the very useful hooks from react-router-dom.

Have you ever noticed that most websites use dynamic routes, for example, if you visit an article on a blogging website its URL should probably be like exampleblog.com/post/how-to-write-blog matching its title. Probably they don’t create every new route for their article manually. What they use is dynamic routing, the title here /how-to-write-blog is URL parameter, and depending on this our page would retrieve data needed for this title…


Photo by Nick Fewings on Unsplash

All codes below in codesandbox — https://codesandbox.io/s/exciting-cloud-e2ts7?file=/src/App.js:248-475

If you are a fresh beginner in React.js this topic might be a little bit complex for you, but I will do my best to help you build a foundation for your future projects. So unlike server-side rendering, react uses client-side rendering which means all navigations happen independently on the client-side. In this article, we will see how we can set up page navigation in other words routing in react.

To apply routing in react we use a popular npm package called react-router-dom, so let’s install it, in your terminal write this:

npm…


You can check out the first part here.

Extracting reusable code

Like you do in most programming languages you can extract fragments of your code to make it reusable. In Sass, it is pretty simple let's say we are going to center any child elements using flex, we can write:

@mixin center{
display: flex;
align-items: center;
justify-content: center;
}

Notice that every keyword in Sass starts with the ‘@’ symbol. Here we used the mixin keyword which tells our Sass compiler that this is a block of code that could be reused somewhere. …


Sass is a Syntactically Awesome Style Sheets, which means is that it is just an improved and feature-rich version of CSS, and at the end, it compiles down to CSS. This tool makes your work much easier, you write less, you make your code reusable and more readable.

Setup in React

Before we start learning these awesome features let’s tackle how to use sass in React.js. It is very simple we just need to install node-sass module. I will use npm but you are good to go with yarn:

npm i node-sass

Now we can directly import our sass files into our components…


Photo by Mael BALLAND on Unsplash

Nowadays you can see hooks everywhere in most React codebases. The hooks made it very easy to write code and cut down a number of lines. If you are heavily dependent on hooks and get tired of using hooks in third-party packages for your every smallest problem, this article is for you, as we are going to see how you can write your own custom hook. Custom hooks make it easy to apply custom logic on top of hooks and reduce your code size even more.

First of all, what is a custom hook, in simple language based on my…


Arrays essential part in most programming languages including javascript. Mastering it makes your programming life easier than you think. This article is for javascript beginners, and it provides essential array methods every programmer should know.

Unlike some other programming languages like java, c++, c,… in javascript array size is not fixed, meaning that you can add, remove, and change array size however you want.

push() method is used to add new items to the end of an array. You can pass items as an argument of this method.

let arr = [1,2,3];
arr.push(10, 11);
arr.push(100);
console.log(arr); //[1,2,3,10,11,100]

unshift() method is…

Ali Toshmatov

React dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store