DEV Community: Olena Drugalya

Intro to React Portals

Olena Drugalya — Thu, 10 Jul 2025 11:13:02 +0000

This small blog post is about React Portals - when and where to use them and IF you need to use them.

Introduction

As a frontend developer I am working with React for almost 5 years and I never had a need to use Portals. But once I was watching a learning video and this topic came up. I decided to learn a bit more about Portals and share the knowledge about this topic.

What is Portal?

Portal is a mechanism or pattern, which provides a way to render content outside the current DOM hierarchy.
Usually React renders child components inside the parent components DOM, but sometimes you need to render those children outside the parent's DOM - for example on the higher level of app DOM:

<body>
<div id="modal">{child}</div> <-- for example here
<div id="content">{~~child~~}</div> <-- instead of here
</body>

There are specific use cases where to use Portals and we will look at them below in this post.

Definition

Portal is created by a function call from "react-dom" library createPortal().
It accepts:

child: the React element you want to render.
container: the actual DOM node (outside your app’s root) where it should be inserted.

It returns a React element that React knows how to mount into a different DOM node. It kinda tells React: “Render this child over here”:

ReactDOM.createPortal(child, container)

Here is an example of how it works under the hood:

const modal = document.getElementById('modal');

const portalElement = ReactDOM.createPortal(
  <div>My Modal</div>, 
  modal
);

This means: you’re telling React to render <div>My Modal</div>.
But instead of placing it where the component is written, React inserts it into modal. It’s part of the virtual DOM tree, but lives outside the regular DOM tree.

When to use Portals

There are some child components for which its recommended to use Portals IF you write them from scratch:

Modals / Dialogs
Tooltips
Popovers
Dropdowns
Overlays

For these components there are some benefits when using Portals:

it helps to escape parent styles ( like overflow: hidden style)
it helps to manage their focus correctly - useful for accessibility
it still keeps React context - works with state, hooks etc.

Use Portals WHEN:

you are building your own custom modal or dialog
you are working on design systems or low-level UI frameworks
you need manual DOM isolation for layout or z-index issue

Most of existing UI libraries (like MaterailUI) are using Portals already under the hood - so we benefit from them without writing one ourselves :)

Using Zustand in React applications

Olena Drugalya — Mon, 16 May 2022 12:52:51 +0000

In this post we are going to look closely to one of the state management libraries - Zustand.
This is a good alternative to Redux for development of React applications if you find Redux too complicated or too heavy for your current project.

What is Zustand?

Zustand (a german word that means 'state' in English) - a state-management library. In official documentation they call it "a small, fast and scalable bearbones state-management solution".
It helps to solve such problems as "zombie child" problem, React concurrency and context loss between mixed renderers.
If you want to read about those issues more detailed, here are the links:

React concurency - https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md.
context loss - https://github.com/facebook/react/issues/13332 AND the most beauty of it is that the store it provides is a hook and you can put objects or functions in it. How awesome is that!

How to use Zustand?

Below you will find the step-by step guide about how to use Zustand in your React project.
Before you follow the steps, make sure that you can created a react project either with CRA or Vite and it is up and running.

Step 1 - Import

This library can be imported to your project very easy with npm or yarn:

npm install zustand

yard add zustand

Step 2 - Create Store

Zustand gives us possibility to use the state in any component in our application. In order to do that, we need to create a store for the state.
We will be using a simple To-Do app as an example here.
In the project files we create a folder which we call 'store' and in this folder we create a file with the name 'useToDoStore.ts'.
Remember, that Zustand store is a hook so it has to be named with 'use' at the beginning (rule of custom hooks)

Inside 'useToDoStore.ts' file we create first an interface for our to-do task:

interface ToDo {
  id: string;
  title: string;
}

After that we create an interface for our ToDoStore, which will include an array of ToDos and methods to create, update and delete ToDos:

interface ToDoStore {
  toDos: Todo[];
  createToDo: (title: string) => void;
  updateToDo: (id: string, title: string) => void;
  deleteToDo: (id: string) => void;
}

Now we can continue and create actually a store. To do this, we need to import a specific method create from the Zustand library and than use this method to create a store:

import create from "zustand";

export const useToDoStore = create<ToDoStore>((set, get) => ({
  todos: [], // our array of todos is empty but
             // it could be predefined as well
  createToDo: (title) => {},
  updateToDo: (id, title) => {},
  deleteToDo: (id) => {},
}));

Method create give us access to 2 important functions:

set() - this function update the current state
get() - this function gives access to the current state to outside Those functions work the same way as setters and getters in the class. We will use them when defining our store functions for ToDos.

Step 3 - Create Functions

Here we will use set() and get() functions from create to define what our store functions will do.

Let's start from the function which creates todos:

  createToDo: (title) => {
  const { todos } = get(); // first we get all todos
    const newTodo = {
      id: generateId(),// helper function to create ID
      title,
    };
    set({
      todos: [...todos, newTodo]
    });
  },
}

Than we create a function which updates todos:

 updateToDo: (id: string, title: string) => {
    const { todos } = get();
    set({
      todos: todos.map(todo =>({
        ...todo,
        title: todo.id === id? title : todo.id
      }))
    })
  }

And the function which deletes todo:

deleteToDo: (id: string) => {
    const { todos } = get();
    set({
      todos: todos.filter(todo => todo.id !== id)
    })
  },

Congratulations, we have a store now :) Lets use it!

Step 4 - Use Store

To use a store, go to the file with a component (for example ToDoList.tsx), import the ToDoStore and destructure the state and/or necessary methods from the hook. You can use all methods or just specific method in any component:

 const [todos, createToDo, updateToDo, deleteToDo] = useToDoStore((state) => [
    state.todos,
    state.createToDo,
    state.updateToDo,
    state.deleteToDo,
  ]);

Now your state can be used in the file of specific component where you need it to be used. Use the hook anywhere without any providers.

Conclusion

this library is small and easy to use
renders components only on change
no context providers needed
can be used without React

If you want to learn more about Zustand and what is proposes, visit the official page at https://github.com/pmndrs/zustand

How to plan your first project with microservices and Spring Boot

Olena Drugalya — Mon, 26 Jul 2021 08:42:39 +0000

This blog post is about a possible way of how to prepare and plan your first microservices project. It describes the basic steps which are usually need to be done before you actually can start coding.

To proceed with the blog post, you need to be familiar with:

REST API
Spring Boot framework and know how to create a simple project.
microservices architecture

WHY PLANNING?

When I was a freelance developer, I did not care about too much planning of an application if I had an idea. I would just do a minimal to-do list so that I could just keep track of my activity during the day, and go straight to coding. For me that was enough, since I was the one doing all the work.

When you work in the company, that is totally another story. Depending on the company of course, but in most cases you are not the one who is doing all the job anymore. Usually you are added to a team of developers who are going to cooperate on a project together.

And here planning is crucial for the following reasons:

Everyone sees the project differently
Everyone is going to work and contribute to the same project
Everyone uses different tools for implementation

If planning is done properly and in a right way, everyone can be on the same page, understand every project detail in a same way and use the same tools for development.

STEP 1 - Define Microservices

As you already know, microservices is an architectural style that structures an application as a collection of services.

With simple words, its many small applications which are part of a large application. They are small, independent, easy to maintain and test, and they can be developed separately by a small team.

It is a good practice to define a microservice according to single responsibility principle. It means that one microservice should be responsible just for one task.

Sometimes its difficult to define those logical or business tasks, in some cases they're obvious (for example, with online web shops there definitely would be a microservice for the user or product). Anyway, the important step 1 is to try to define them all at the beginning.

Each microservice should be a separate SpringBoot project, its a good practice to do so if we want to use different technologies for each of them.
For example, one of them could be written in Java and use PostgreSQL database, another one could be written in Kotlin and use MongoDB.

STEP 2 - Define Endpoints

After we have decided, what microservices will be in our application, we can start defining endpoints for API for each microservice.

API Endpoint in simple words is an URL of a service. It is like a location, from which APIs can get the resources they need.

One API can provide multiple endpoints. Every endpoint operates through request and response - Client sends the request and Endpoint sends back the response.

Usually the SpringBoot application runs on localhost:8080, so if our application is for example a clothes shop, one of API Endpoints could be like this:

http://localhost:8080/clothes

When such URL will be obtained by the browser, the browser will make GET request and receive the list of clothes in return.

So, in this second step we make sure we define all the endpoints for our application (for example for the most important HTTP requests like GET, POST, PUT or DELETE etc).

STEP 3 - Define classes

No, we still cannot write any code importunately :) I know how eager you are to start coding at this stage, but be patient, we are almost done with the preparations.

Here at this point we define all the classes we would use in the application. We are pretty much now have the full overview and clear understanding of what exactly would be as building blocks of the app.

We can also write down what attributes and methods each class will have and what type each attribute will be.

STEP 4 - Write Userstories

User story is a part of Agile project management. It is an informal description of a software feature from the perspective of the end user.

A good and simple user story should be a sentence, written according to this template:
“As a [persona], I [want to], [so that].”

For example: "As a customer, I want to be able to update my info, so that I can change first name"

When we break our tasks into concrete user stories and add proper description to them, it means that any developer who will implement the feature, will know exactly what to do.

To learn more about user stories, here is a good article - User Stories with Examples and Template

STEP 5 - Prepare wireframes

After we are done with all the above preparations for the app logic, we can think about its visual look. This step is important, since it let us visualize how exactly our application will look like on the page.

There are hundreds of tools and websites available for doing sketching/ wireframing online or locally (for example such as Sketch or Figma). There is also a good tool which allows to collaborate with other developers live and draw the sketch together - https://excalidraw.com

Wireframing helps to understand and clarify:

how many pages will you application have
what would be the general layout as well as layouts for desktop and mobile view
how header and footer will look like and on which pages they will repeat
how the pop-up windows will look like

After the wireframing of each page is done, we should have solid understanding and view about the application we are going to build. Now we can start actual coding! :)

Java for JavaScript Developer - week 2

Olena Drugalya — Mon, 31 May 2021 07:58:33 +0000

This blog post continues a series "Java for JavaScript Developers", in which I write about my Java learning path after being web developer. Here I will write about basics of Java and what challenges did I have during the study.

Challenge 1 - Data Types.

Java is a static language, it means that data types are checked before the run-time, so we define a variable, we have to define its type as well. In JavaScript we don't need to define a type of variable, it is being checked during the execution of the application. So, for me it was something i had to used to, good thing that I'm using IntelliJ IDE and it has a very clever compiler. So whenever I was defining a variable without a type, the compiler was showing me an error right away.

There are 2 types of data in Java:

primitive
non-primitive

Primitive type is a type, which size in the memory and location are defined. They are the building blocks of data manipulation and the very basic types. They can be divided into 4 categories : Boolean (boolean type), Character (character literal), Integer (integer type) and Floating-Point.

There are 8 types of primitive data types:

boolean
byte
char
short
int
long
float
double

Non-primitive type is a type, which size in the memory and location are not defined. They include String, Classes, Interfaces and Arrays.

Challenge 2 - Semicolon.

Yes, this is painful topic if you came from the world of JavaScript :) Now with Java you should always remember to finish your line of code with a semicolon. It shows the compiler where an instruction ends and where the next instruction begins.
Semicolon allows the Java program to be written in one line or multiple lines, by letting the compiler know where to end the instructions.

Challenge 3 - Variables.

In JavaScript there are 2 types of keywords to define a variable - const and let. They are almost identical with just only one difference - const indicates that the value of variable cannot be re-assigned and let can be re-assigned. So, of course const keyword is widely used in JS.

In Java however, there are no keywords to define a variable. Instead its important to assign a data type first. Also there access modifiers you will have to take into consideration, but those are not so important with variables.

There are three types of variables in Java: local, instance and static.

1) Local Variable

A variable declared inside the body of the method is called local variable. You can use this variable only within that method and the other methods in the class aren't even aware that the variable exists.

A local variable cannot be defined with "static" keyword.

2) Instance Variable

A variable declared inside the class but outside the body of the method, is called instance variable. It is not declared as static

It is called instance variable because its value is instance specific and is not shared among instances.

3) Static variable

A variable which is declared as static is called static variable. It cannot be local. You can create a single copy of static variable and share among all the instances of the class. Memory allocation for static variable happens only once when the class is loaded in the memory.

Challenge 4 - Implicit and Explicit Casting.

This is totally something you never see in JavaScript, so its Java exclusive thing.

Type Casting is nothing but converting a primitive or interface or class into other type. There is a rule in Java Language that classes or interface which shares the same type hierarchy only can be typecasted. If there is no relationship between then Java will throw ClassCastException. Type casting are of two types:

Implicit Casting (Widening)
Explicit Casting (Narrowing)

Implicit Casting/ Widening

Automatic type conversion can happen, if both types are compatible and target type is larger than source type.

byte i = 50;
// No casting needed for below conversion
short j = i;
int k = j;
long l = k;
float m = l;
double n = m;

Explicit Casting / Narrowing

When you are assigning a larger type to a smaller type, then Explicit Casting is required

double d = 75.0;
// Explicit casting is needed for below conversion
float f = (float) d;
long l = (long) f;
int i  = (int) l;
short s = (short) i;
byte b = (byte) s;

Challenge 5 - The Equality Operator.

As you know, JavaScript has 2 equality operators -
== (equality by value)
=== (equality by value and type)

Java offers you just one nice equality operator - == and nothing else, because there is no need to check for equality by type. Just enjoy one operator here :)

Challenge 6 - Methods.

Here is all the fun begins :)
In JavaScript is all about functions, it can be called a building block of the language.
To define the function all you need is

keyword Const
function name (keyword function is needed if we dont use arrow function)
parameters
function body

const myFunction =(..params..)=>{...function body...}

In Java each method consist of:

1.) Access specifier (it is the access type of the method. It specifies the visibility of the method ). Java provides four types of access specifier:

Public: The method is accessible by all classes when we use public specifier in our application.
Private: When we use a private access specifier, the method is accessible only in the classes in which it is defined.
Protected: When we use protected access specifier, the method is accessible within the same package or subclasses in a different package.
Default: When we do not use any access specifier in the method declaration, Java uses default access specifier by default. It is visible only from the same package only.

2.) Return Type: Return type is a data type that the method returns. It may have a primitive data type, object, collection, void, etc. If the method does not return anything, we use void keyword.

3.) Method Name: It is a unique name that is used to define the name of a method. It must be corresponding to the functionality of the method. Suppose, if we are creating a method for subtraction of two numbers, the method name must be subtraction(). A method is invoked by its name.

4.) Parameter List: It is the list of parameters separated by a comma and enclosed in the pair of parentheses. It contains the data type and variable name. If the method has no parameter, left the parentheses blank.

5.) Method Body: It is a part of the method declaration. It contains all the actions to be performed. It is enclosed within the pair of curly braces.

 public Int myFunction(...params...) {...function body...};

So as you might see, there are may different things a developer has to do differently if he/she switches from JavaScript to Java. Although for me personally only the basic syntax was a bit difficult to grasp. The main concepts though like OOP or collections were easy to understand and use.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Learning Java as JavaScript Developer - week 1

Olena Drugalya — Thu, 13 May 2021 08:25:30 +0000

This blog post is a beginning of the series "Java for JavaScript Developers" and it describes my experience while learning Java programming language.

So, as many of you have already know from Twitter, due to my job specification I started to learn Java after being a web developer and using JavaScript for building projects. During a few years of using JavaScript and building projects mostly with React and other front-end frameworks, I have to dig myself into back-end.

That felt a bit weird I should say. Even though I used to learn new languages all the time (I speak 5 languages and finished linguistic university), it takes time to get used to new rules and new syntax.

Differences

After the first week of study I can already distinguish the main differences between 2 languages:

Java is static language and JS is dynamic language.
What this means is they check their data types on different stages.
Java checks types before run-time, each variable has to be associated with a type upon declaration.
JavaScript checks types on the fly, during execution and the type of variable is unknown until program compilation.
Java is one-paradigm and JS is multi-paradigm
What this means is that:
Java is strictly object-oriented, meaning it solves programming problems based on the concept of objects and everything is built around objects.
JavaScript on the contrary can be used as object-oriented, procedural or scripting language (it is used mainly as scripting though).
Java is stand-alone language and JS is co-dependant language
What that means is that:
Java can be used to build a fully-functional application by developer without any additional languages. It can run on multiple platforms.
JavaScript is depending on HTML and CSS and cannot be used as a stand-alone language to build a fully-functional application. Even though nowadays JS is widely used for back-end (Node.js), it still needs cooperation with additional languages.
Java objects are class-based and JS objects are prototype-based
What that means is that:
Java uses classes as templates for objects creation. It allows a class to derive (inherit) the properties of another class. It also supports multiple inheritances i.e.; a class can derive properties from multiple classes.
JavaScript uses prototypes - special objects, to which additional properties can be attached, which will be shared across all the instances of their constructor function. It does not support multiple inheritance.
Java supports multi-threading and JS doesn't.
This one says it all in one sentence :) JavaScript does not support multi-threading because the JavaScript interpreter in the browser is a single thread.

Similarities

BUT there are some similarities between the languages:

Object-Oriented Programming: Both languages have access to OOPs concepts such as abstraction, inheritance, and polymorphism.
Front-end Development: Java and JS both extend their applications in frontend development. JS can be embedded directly into HTML, which is implemented as a framework or a library; whereas, Java is used as Java Applet.
Back-end Development: Both languages offer server-side support. Java supports major backend technologies such as JBoss, Apache, and WebSphere. Node.js serve JavaScript-powered servers.

So, these are the main differences and similarities between Java and JavaScript and if you want to explore even more on this topic, take a look at this article

In my next blog post I will write about basics of Java language and compare them to basics of Java Script :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Introduction to NextJS

Olena Drugalya — Tue, 04 May 2021 13:20:09 +0000

This blog post is an easy introduction to NextJS and it's features.
However, before starting to read this blog post, you must be familiar with React library.

What is NextJS?

NextJS is a React framework, which means is a platform for developing software applications by using React library.
It has a lot of features which make development of React applications easier.

As a programmer, we don’t need to start from scratch when there are already tools designed to help us with our projects. Frameworks are software that is developed and used by developers to build applications, so NextJS is one of them.

Why to Use NextJS?

This question appeared in my head many times before I wasn't familiar with NextJS. I was pretty sure that React library itself is enough to build an application. But as I was developing my web developer's skills and started to build highly-scaled large applications, I had to import many additional libraries together with React (for example, for routing).

NextJS makes the development of large React application easier, since it provides many additional features, which we will discuss below in details. This framework solves many common problems and simply makes the life of React developer easier :) We still write React code and use React features, but also together with that we are provided by lots of built-in features to solve common problems and clear instructions how to use them.

Key Features of NextJS

NextJS offers many benefits for the React developers:

page-based routing system (with support for dynamic routes)
With NextJS we don't need to care about writing a code for routers for the pages, we just create a page in a special folder and NextJS provides it with routing, simple as that :)
pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported
Server-side rendering (SSR) is preparing of content of a page on a server, while one-page React application uses client-side rendering (CSR). The problem with CSR is that it's not actually SEO friendly, because search engines will not see the actual content of the page. By using SSR in NextJS we can avoid such issues as flickering page while data fetching and our website content will be SEO friendly.
built-in CSS and Sass support, and support for any CSS-in-JS library
development environment with Fast Refresh support
full-stack capabilities
NextJS makes it easier for React developers to add back-end code to the project. It very easy here to add our own code for storing data, getting data, authentication etc.

With all that being said, I highly recommend you to consider using this framework and if you have already decided to learn it - congratulations, you made a good choice :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Connecting React project with Firebase

Olena Drugalya — Wed, 21 Apr 2021 09:19:31 +0000

While developing a web application, developers often have to interact with the database (save and fetch data to and from a database).
This blog post describes an easy way to connect your React project with Firebase database.

To read this blog post, you need to be familiar with React library and Firebase database.

What is Firebase

Firebase is a backend service provided by Google. It contains a database and API to which we can send requests. To start working with this service, you only need a Goggle account.

Why to use Firebase with React

When we use React library in our frontend project, we would not want to connect to database directly. If we do so, we will have security issues. Why?

We could simply connect our single page React app in a similar way as we connect a Node.js app (or any other server-side app):

mysql.connect('database-path', 'username', 'password')
    .then(db => db.query('SELECT * FROM users'));

As written in the code above, we could use some database driver/ package (in this example for MySQL) and then use methods exposed by that driver to connect to the database and then run queries against it.

BUT if we connect to database like shown above, we have to put all our database credentials and queries directly into our frontend code. This code is accessible by everyone though!

Just open the dev tools in browser and see the code - that's how web works.

That’s why any code that “talks” to a database belongs onto a server and the users can’t access that code.

This is exactly the way how React works with Firebase - React needs a backend API to which it will send HTTP requests and Firebase provides that API.

Connecting React project with Firebase

As mentioned above, Firebase provides a database API, which accepts a data in a JSON format returns a data in a special format back. React will use this API to fetch data from it or to send data to it to store into database (buy using methods POST and GET).

To configure a Firebase, just simply follow the steps on Firebase official page. Below Ill write down them shortly:

click Get Started
start a new project
go to Realtime Database (on the left side)
create database
choose "Start in test mode"

And you got your database and API link (see screenshot below):

That was simple :) Now let's use it in our project.

Let's assume we have a simple React project with a form. The user fills in the form and after button click all info goes to database.

Our Form component will look like this:

// Form.js

export const Form = () => {
  // We are using refs here to access the value of DOM nodes
  const titleRef = useRef();
  const imageRef = useRef();
  const addressRef = useRef();
  const descRef = useRef();

return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="title">Title:</label>
          <input type="text" id="title" required ref {titleRef} />
        </div>
        <div>
          <label htmlFor="img">Image:</label>
          <input type="url" id="img" required ref={imageRef} />
        </div>
        <div>
          <label htmlFor="address">Address:</label>
          <input type="text" id="address" required ref={addressRef} />
        </div>
        <div>
          <label htmlFor="desc">Description:</label>
          <textarea type="text" id="desc" rows="5" required ref={descRef} />
        </div>
        <div>
          <button>Add</button>
        </div>
      </form>
    </div>
}

When the user fills in the required fields in the form and click on Add button, the form will trigger onSubmit event, which in its turn will call a method handleSubmit.
This method creates an object, which we will use to send the user's data to the database:


const handleSubmit = (event) => {

    event.preventDefault();

    const enteredData = {
      title: titleRef.current.value,
      image: imageRef.current.value,
      address: addressRef.current.value,
      description: descRef.current.value,
    };
  };

Now we can send enteredData object to the database by using API provided by database and JavaScript method fetch().

Method fetch()accepts as parameters:

path (in our case - Firebase API link) Note: When we use the Firebase API link as path, we need to add the name of data we store and .json to the end (for example, if we store todos, we add todos.json to the end of API link)
init object with number of different settings

If we use fetch() just with path, it will execute GET method by default. Since we want to send data, we need to add second parameter and specify that we want to use POST method.

Our handleSubmit method now would look like this:


const handleSubmit = (event) => {

    event.preventDefault();

    const enteredData = {
      title: titleRef.current.value,
      image: imageRef.current.value,
      address: addressRef.current.value,
      description: descRef.current.value,
    };

    fetch(
      "https://test-a02ef-default-rtdb.firebaseio.com/info.json",
      {
        method: "POST",
        body: JSON.stringify(enteredData),
        headers: { "Content-Type": "application/json" },
      }
    );
  };

After the user provided all required data to the form and clicked Add button, the form sends the data to database. We can refresh our Firebase project and see the data being stored there. Yay!

Conclusion

With Firebase we can store our data to the database. We can also fetch the data from our database and render it to the page we need by using the same API link provided by Firebase. It might look as if we are interacting directly with a database, but now we know that this is not what’s happening!

Instead, services like Firebase give you a backend which is kind of hidden from the user and we only use that backend API to interact with the database.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

React Live Coding Interview Tips

Olena Drugalya — Mon, 12 Apr 2021 13:46:26 +0000

This blog post is not about how one should ace or nail the live coding interview for the junior frontend developer, but the practical advices on how to prepare for it and some tasks which might have been given.

All information in this post is based on my own experience and some research which I did in advance. It is not a set of rules of how you should do it, but more like what you can expect and how you can prepare.

Alright, with all that being said, let's imagine we have received that invitation to the next stage of job interview and it would be live coding technical interview. We have a mixture of excitement and fear and impostor syndrome all at once - that is totally fine, just give it a time to settle down :)

Now that we can think clearly again, we understand that there is a level of uncertainty and frustration connected with how we should prepare and what. There are few steps to get rid of those.

Analysing the Given Info

Let's analyse what info do we actually have on your hands.

We know it's a junior position - it means it doesn't have to be that difficult technical-wise.
We know you will be using React library - we are familiar with it, we used it so many times.
We know it would be live coding - it means they will ask us to share our screen and give us tasks which we have to code on the go.

But we still don't know what exactly gonna happen and what we should prepare or repeat. It's a good practice to ask the interviewer about it.

We can write a nice answer back, in which we say thank you for the invitation and ask politely what we should prepare. In most cases they will answer back with some detailed info like "you should write Hello World in a simple CRA project, you should also know how to work with data and events and how to fetch data from API".

Here we go! We have more info now on our hands and that removed uncertainty and frustration, so we can go ahead and make a plan for interview preparation.

Making a Plan for Interview Preparation

Go through the email from interviewer again and write down bullet points from it. Usually it contains a lot of clues of what we should prepare.
Google top 50 React interview questions and save the link - we want to repeat theory as well
Write down and save a coding solution for each bullet point (for example - fetch data from API - write down a code for fetching data with Fetch or Axios; events - write down a code for creating onClick() event and so on.)
Think about and find a person who could perform a mock interview for you - if you have such possibility of course. Otherwise find similar mock interview on YouTube and watch it.

Now that we have a precise plan, we can start your preparations and we will be more confident and calm right now, since we know exactly what we should repeat or prepare.

Preparing for the Interview

Here what we do:

repeat the theory of React library

Keep in mind that the interviewer might ask to explain what is React, its main features, what is component, state, props and JSX. The purpose of that is mostly to see how to you can explain these concepts to another person. It's a good practice to say those loud while preparing.

create a project in advance

It takes time to install CRA with package manager, so to avoid waiting time it's a good practice to do it in advance. remove all unnecessary code from it, so your App function has only return() in it with one div. Install all other dependancies which you think might be helpful to you or can be used (like axios, react-router-dom, bootstrap etc.)

code the solutions for the bullet points

While coding the solutions, try to talk about what are you doing. Here is the example of possible explanation:
"In the return() function of App component we add a button with text Add Count. We add onClick()event to this button and this event will accept a function handleClick. Now we need to create this function. We create an arrow function handleClick and inside the function we increase the counter to 1. We use method setCounter to change the previous value of counter object to the new value".

ask your friend/relative/fellow developer to make a mock interview This is a great way to prepare for the interview. It is possible to find out your weak sides and to improve them, as well as to improve your communication skills.

The Interview Day

So, during these 3-4 days before the interview we have prepared theory, practice and communication and feel ourselves much confident than before. Note, that live coding interview is done with timer (usually it's 45 minutes), so the interviewer will appreciate you being fast and to the point.

There are some good tips to use during the interview:

always ask how the interviewer prefer you to do something (for example, if you have been asked to make a button, it's a good practice to ask if they want you to make a component or just simple JSX element).
listen attentively to the given assignment
If you didn't understand the task, ask to explain you once again. You can explain that by being nervous, not because you don't know how to do it. If the task is long, write down on paper the main points
use shortcuts
Its a very good practice to use keyboard shortcuts in your project. it shows that you are aware of how to save time and that you use your keyboard/text editor easily.
know how to google
Junior position doesn't expect that you know everything (it could be different for higher levels though). So you are definitely allowed to google. Make it your advantage. Instead of trying to remember the syntax of that function, don't waste your and interviewer time - just google it.

Possible Assignments

There is a list of possible tasks which the interviewer might ask to code:

write "Hello World" on the page
create a counter and increase it by clicking on button
fetch data from given API and store it in variable
fetch data from API on the first render of the component
fetch data from given API when you click a button
render fetched data to the page as a string
if the data are Books for example, render only name and author of the book to the page
transform the properties of a book you have just rendered into separate Book component
render Book component to the page
create another component which is a collection of books which contains Book component
render collection of books component to the page
give it some styling so it looks nice (usually here the margins/paddings/colour or grid/flex would be enough)

Conclusion

The live coding interview is an important part of hiring process. It gives the interviewer a quick possibility to see if we really understand the technology, which we claimed we know. Besides the coding part, it shows how we can explain and communicate our code to others, thus give them an impression how we will collaborate with other team mates. It shows also how quick we can understand the task and what we will use to perform it quick and effective.

I wish you all good luck in getting that dream job!

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Ways of Getting Data from API in React

Olena Drugalya — Mon, 05 Apr 2021 09:22:26 +0000

This blog post is about the ways of getting data from API in React.
Before you read this post, you should be familiar with React library and Application Programming Interface (API).

React library is a wonderful tool for building rich and highly scalable user interfaces. One of its powerful features is the possibility to fetch data for the web application from the outside and interact with it.

Why to Fetch Data?

When you are just starting developing web applications with React, you probably won't need any external data at the beginning. You will build a simple applications like ToDo app or Counter and add your data to the state object of your application. And that is totally fine.

However, at some point you want to request real world data from an own or a third-party API. For example, if you want to build a book store or weather application, it is faster and convenient to use one of those free data sources available in the Internet.

Where to Do Data Fetching

Now that we have decided that we want to fetch data from external source, here comes the question - where exactly in our application we should do that?

This question depends the following criteria:

who is interested in data?
who will show the loading indicator in case data is pending?
where to show an optional error message when the request fails?

Usually this is a common parent component in the components tree who will do this job. It will fetch the data, store it to its local state and distribute it to the children:

1. On the first mounting of the component
We use this way when we want the data to be accessible when we first start the application. It means, we need to perform data fetching when our parent component is being mounted.

In class-based components the perfect place for data fetching is componentDidMount() lifecycle method.

In functional components it is useEffect() hook with an empty dependancy array because we need the data to be fetched once.

2. On event being triggered
We can fetch data on triggering an event (for example button click) by creating a function, which will make data fetching and then binding that function to the event.

Ways of Fetching Data

There are many ways to extract data from API in React:

using Fetch API
using Axios library
using async-await syntax
using custom hooks
using React Query library
using GrapthQL API

We will explore these ways now in details.

1. Fetching Data with Fetch API

Fetch API is built into most modern browsers on the window object (window.fetch) and enables us to make HTTP requests very easily using JavaScript promises.

In our CRA we can use fetch() method to get the data. This method accepts just an URL to the data.

To do so, we will create a method called fetchData(). It will call fetch() method with provided URL, then convert the result to JSON object and print it to the console:

const fetchData = () => {
return fetch("https://randomuser.me/api/")
      .then((response) => response.json())
      .then((data) => console.log(data));}

We can use this method now anywhere in the application. Here is an example how to use it in useEffect()hook:

import {useEffect} from "react";

useEffect(() => {
  fetchData();
  }, []);

2. Fetching Data with Axios library

It does the same job as Fetch, but the main difference is that it already returns the result as JSON object, so we don't need to convert it.

First we need to install it using npm:

npm install axios

Than we need to import it to our project and we can use it in the same function fetchData() instead of fetch() method:

import axios from "axios"

const fetchData = () => {
return axios.get("https://randomuser.me/api/")
      .then((response) => console.log(response.data));}

What's convenient about using Axios is that it has a much shorter syntax that allows us to cut down on our code and it includes a lot of tools and features which Fetch does not have in its API.

3.Fetching Data with Async-Await syntax

In ES7, it became possible to resolve promises using the async-await syntax. If you are not familiar with such function, check here.

The benefit of this is that it enables us to remove our .then() callbacks and simply get back our asynchronously resolved data.

Lets re-write our fetchData() function using this syntax:

async function fetchData() {
    try {
      const result = await axios.get("https://randomuser.me/api/")
      console.log(result.data));
    } catch (error) {
      console.error(error);
    }
  }

4.Fetching Data with Custom Hook

We can use the library React-Fetch-Hook to extract the data from API. It includes already several properties we can use: data, error for errors handling and isLoading for loading issues.

First it should be installed:

npm install react-fetch-hook

Then it should be imported and used on top of common parent component:

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://randomuser.me/api/");
console.log(data);

There are other ways for data fetching as React Query library and GraphQL API, but this blog post is not covering them in depth, but you are free to explore those :)
Happy Fetching!!!

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

What is React Helmet and Where To Use It

Olena Drugalya — Mon, 22 Mar 2021 09:19:46 +0000

This blog post is about an interesting React component - React Helmet.
Before you read this article, you have to be familiar with React library. You would also need a basic knowledge about the HTML head element.

I came across this component while building Gatsby website and it got me interested since I have never come across it before. Let's explore what it is, as well as where and how to use it.

What is React Helmet

According to official docs React Helmet is a reusable component, which helps manage all of your changes to the document head.
For example, you can use React Helmet to set the title, description and meta tags for the document dynamically. This is very handy when you have a project with multiple routes and want to update the meta tags for SEO based on the route currently rendered to the page.

How to Install and Use

It exists actually in the "react-helmet" library, so first we need to install this library:



npm install react-helmet --save

Now we can import React Helmet component to our project and use it. The following example sets the page title, language and description.



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = () => {
  return (
    <div>
      <Helmet htmlAttributes>
        <html lang="en" />
        <title>Hello from React Helmet</title>
        <meta name="description" content="Basic example" />
      </Helmet>
    </div>
  );
}

Features

Supports all valid head tags: title, base, meta, link, script, noscript, and style.
Supports attributes for body, html and title tags.
Supports server-side rendering.
Nested components override duplicate head changes (Components further down the tree can override values provided to the Helmet component on a higher level).
Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
Callback for tracking DOM changes.

Dynamic Helmet

Above was an example of simple usage of Helmet, but this is unlikely, that you are going to use it like this in the project. The next example will show how to add title, metadata and other important SEO elements dynamically and importing it inside any component you want.

We are going to create a SEO component, which will receive some data as props and fill it up in to head section of the page.

1.We destructure components props and receive title, description and meta array (it is empty by default):



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = ({title, description, meta = []}) => {.....}

2.Now we can use destructured data as properties of Helmet component. We can also use property htmlAttributes to set up language for the website:



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = ({title, description, meta = []}) => {
 return(
  <Helmet title = {title}
          htmlAttributes={{ lang: "en" }}
          meta={[
        {
          name: `description`,
          content: description,
        } 
      ]}
   />
  )
}

The title and description tags are crawled by search engines, that's why it is important to use those at first place.

3.We can add a bunch of meta objects to the meta array. They are divided into 2 groups - OpenGraph tags and Twitter tags.

OpenGraph tags (marked with og:) are crawled by Facebook whenever you share a link through Messenger/ Facebook:



meta={[
        {
          property: "og:url",
          content: someUrl
        },
        {
          property: "og:type",
          content: someArticle
        },
        {
          property: "og:title",
          content: someTitle
        },
        {
          property: "og:description",
          content: someDescription
        },
        {
          property: "og:image",
          content: someImage
        },
        {
          property: "fb:app_id",
          content: someFbAppId
        }
]

Twitter tags (marked with twitter) are crawled by Twitter accordingly:




meta={[
        {
          property: "twitter:card",
          content: someSummary
        },
        {
          property: "twitter:creator",
          content: someAuthorName
        },
        {
          property: "twitter:title",
          content: someTitle
        },
        {
          property: "twitter:description",
          content: someDescription
        },
        {
          property: "twitter:image",
          content: someImage
        }
]

This was just a simple example how we can create reusable dynamic SOE component. If you wonder how to make a complex one, check this SEO made by Kent Dods.

Conclusion

React Helmet is aimed to manage and dynamically set what’s in the document’s head section.
It comes-in especially handy when combined with server-side rendering because it allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.
Helmet is being used as plugin in Gatsby framework.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Why Gatsby needs GraphQL?

Olena Drugalya — Mon, 15 Mar 2021 09:12:43 +0000

This blog post is going to describe why Gatsby needs GraphQL and how it uses it.

If you read this post, you are probably already familiar with Gatsby (React framework for generating static websites) and GraphQL (query language for web APIs). If you are not familiar with those, I strongly insist on learning those first (I added links to documentation on both of these technologies).

When I decided to build my portfolio using Gatsby, i didn't know that its not that easy :) Well, nothing is easy in a tech world, but I still hoped that if it's a framework and it uses React, i will have my portfolio built in no time. Well, nope.

It appeared that for some reasons (which were unknown to me at the beginning), Gatsby uses GraphQL to make queries. That was what official documentation and tutorials told me.
But it was still unclear WHY it uses GraphQL. So here Im trying to explore this question.

How Gatsby is Managing Data

Gatsby framework is structured the way, that allows to build websites using all parts for that - HTML, CSS, JavaScript and data. The first 3 parts are covered by React, and the data is the rest what lives outside React component.

It is possible to build a website using only React components and everything that is being put inside (texts, images etc.). But sometimes it's necessary to get data from outside the React component or to store it outside and then bring it inside.

Gatsby’s data layer allows to pull data directly into the components from the following sources:

WordPress
filesystems (markdown, JSON etc.)
headless CMS
Drupal
Netlify CMS
APIs
databases

Gatsby and GraphQL: The Mechanism

GraphQL is a query language, which Gatsby is using to pull data to React components. It's absolutely not necessary to use GraphQL to source the data, there are other ways to do that. But because GraphQL is already configured for Gatsby framework and because it's same Facebook technology, it is recommended to use it for data sourcing.

Now that we are figured out, WHY we use GraphQL here, let's see HOW exactly we use it.

When we start the project with Gatsby, we can see our website at localhost:8000 port. If we navigate to localhost:8000__graphQL, we will see all available queries for the website:

The names of the queries on the left are keywords for Gatsby to understand where to get data from.

Alright, let's get to practice! let's consider that we have a Gatsby projects with 3 React components - Layout, Home and About. Both of them want to use the same title info. We can store this info in one location and reference that location from other files.

Below is step-by-step guide with an example of how to do that:

1.Create React components:

src/components/layout.js

import React from "react"
import { Link } from "gatsby"

export default function Layout({ children }) {
 return (
    <div>
      <Link to={`/`}>
        <h3> My Awesome Blog </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

src/pages/index.js

import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return (
    <Layout>
      <h1>Amazing Blog which Im creating with Gatsby</h1>
      <div>
        <img
          src="#"
          alt="Group of pandas eating bamboo"
        />
      </div>
    </Layout>
  )
}

src/pages/about.js

import React from "react"
import Layout from "../components/layout"

export default function About() {
  return (
    <Layout>
      <h1>About My Awesome Blog</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
    </Layout>
  )
}

2.Open gatsby-config.js file.

The place for common pieces of data is the siteMetadata object in the gatsby-config.js file. Add site title to this file:

module.exports = {
  siteMetadata: {
    title: "My Awesome Blog"
  },
  plugins: [],
};

3.Create the query

After we have added data to siteMetadata object, we can make the query with GraphQL to pull this data to the component which need it.

To write the query, we will use useStaticQuery, a new Gatsby feature that provides the ability to use a React Hook to query with GraphQL at build time. Here we should pause and learn the difference between the static query and the page query in case we are not familiar with this.

Let's open Layout.js file, import GraphQL there and create a query which we save to data variable:

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

export default function Layout({ children }) {

const data = useStaticQuery(
    graphql`
      query {
        site {  
          siteMetadata {
            title
          }
        }
      }
    `
 return (
    <div>
      <Link to={`/`}>
        <h3> My Awesome Blog </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

4.Use the data inside the component

We have created a variable data and saved the result of the query in it. The keyword site in the query points Gatsby where to look for the data during the build. Gatsby sees site keyword, goes to gatsby-config.js, finds the object siteMetadata, pulls out title and stores it to variable data.

Now all we need to do is to use data where we want it (in our case - instead of hard-coded h3 tag:

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

export default function Layout({ children }) {

const data = useStaticQuery(
    graphql`
      query {
        site {  
          siteMetadata {
            title
          }
        }
      }
    `
 return (
    <div>
      <Link to={`/`}>
        <h3> {data.site.siteMetadata.title} </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

Since our Home and About components are wrapped up with Layout component, the title will appear in every of them.
If we decide to change the title, all we have to do is to change siteMetadata object property title.

GraphQL is certainly not required, but the benefits of adopting GraphQL are significant. GraphQL will simplify the process of building and optimising pages, so it’s considered a best practice for structuring and writing Gatsby applications.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Introduction to Custom Hooks

Olena Drugalya — Mon, 08 Mar 2021 09:47:22 +0000

This blog post continues the React Hooks series and gives an introduction to Custom Hooks in React.
Let's learn what it takes to create a custom React Hook as well as all the rules we must keep in mind when using Hooks.

What is Custom Hook?

Custom Hook is a JavaScript function which we create by ourselves, when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.

When and How to Use

When we want to share the logic between other components, we can extract it to a separate function. According to official documents, the custom hook has to:

start with the key word use
call other hooks

Because custom hook is a JS function, the Rules of Hooks apply to it as well. Those are:

Never call Hooks from inside a loop, condition or nested function
Hooks should sit at the top-level of your component
Only call Hooks from React functional components
Never call a Hook from a regular function
Hooks can call other Hooks

How to Create Custom Hook?

You create the hook same way as you create any JS function. Look at it as a refactoring of code into another function to make it reusable. It will speed up your productivity and save your time.

Let's consider the following example, where we have useEffect()hook which updates the document title:

import {useState, useEffect } from 'react';

    export const Counter=()=> {
      const [count, setCount] = useState(0);
      const incrementCount = () => setCount(count + 1);
      useEffect(() => {
        document.title = `You clicked ${count} times`
      });

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={incrementCount}>ClickMe</button>
        </div>
      )
    }

What we want to do is to create a custom hook, which accepts a piece of text and updates the document title for us. Here is how we do that:

const useDocumentTitle = (title) => {
        useEffect(() => {
          document.title = title;
        }, [title])
      }

Our useDocumentHook() now accepts the string and calls useEffect() hook inside, which updates the document title with a given title, when the title was changed (we pass title as dependency here).

So our final code would look like this:

import { useState, useEffect } from "react";

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

export const Counter = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
};

And that is all, as simple as that :) In my next blog post I'll share 5 the most commonly used custom hooks, which make your development faster and easier.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)