To reach as many en.users as possible, applications should be internationalized.

Internationalization Library

There are plenty of internationalization libraries to help us with the tedious task of supporting multiple languages. One of them is the i18next library. It offers a lot of features and is well suited for both React and React Native (react-18next).

In the library’s official example, translations are stored in .json files:

With such defined translations, we just have to use them in our code. An example invocation looks like this: t('hello'). For a chosen language, the corresponding value is displayed (e.g. …

Even though there is technically no such thing as a named parameter in TypeScript (or JavaScript), the language offers a syntax that makes it possible to use a very similar functionality!

Named arguments make life much easier. They allow you to play with function arguments almost like you play with letters in Scrabble. You can pass any argument in whatever order you want just by specifying its name.

Or if you’d prefer a more formal definition:

“[A named parameter is a] computer language’s support for function calls that clearly state the name of each parameter within the function call.” …

Dealing with dates and times in computer programs is difficult. There are so many things to consider — you have to think about different calendars, time zones, and even leap seconds (What is it? 🤔 Check the video below!).

Recently, I have experienced such a problem on my own while setting up a remote Continuous Integration pipeline.

Scene

I work on a project written in React. We write tests in Jest and as a time library use Moment.js (there are other interesting alternatives, e.g. date-fns or Day.js).

For the CI we use Jenkins. It has some drawbacks — the thing that annoyed me the most was that we did not have an indicator of a branch pipeline status directly in Merge Request in GitLab. So I created a .gitlab-ci.yaml pipeline definition and was excited to test it. …

Every workday I write plenty of tests using Enzyme. Even though the library is well designed, there are some tricky points, where it is easy to make a mistake and spend much precious time trying to figure out why one test does not pass… 😤

Updating state onEvent

Let’s consider a simple scenario:

• we mount a component and get a wrapper
• prop.value of the tab has initially value before
• a click event is simulated
• prop.value should have value after

const tab = wrapper.find('.tab');
expect(tab.props().value).toEqual('before');
tab.find('button').simulate('click');
expect(tab.props().value).toEqual('after');

Looks good, doesn’t it? Unfortunately, this might not work 🥴

The issue is further described in the Enzyme’s official issue tracker. …

You get an offer you can’t refuse so you click the button and accept it. In the same moment, an action is sent, reducers execute some logic and the store state is finally changed.

But what if there are different types of offers? And what if every offer needs to be treated differently? Should only one action still be sent? 🧐

In this article, multiple alternatives for handling similar but different actions will be discussed. But first, let’s dive into the concept of actions!

Flux / Redux intro

Flux is the application architecture (…) for building client-side web applications. It complements (…) view components by utilizing a unidirectional data flow. (…) When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application’s data and business logic, which updates all of the views that are affected. …

I bet you’ve already heard about SOLID Principles. But do you know the GRASP Principles (aka GRASP Patterns)? 🧐

They are a learning aid for object oriented design with responsibilities. There are nine GRASP patterns, which I briefly introduce below as problem — solution (with a thematic picture to help to memorize the principle 🎓).

GRASP = object oriented design with responsibilities

Creator

Who should be responsible for creating a new instance of some class?

Assign class B the responsibility to create an instance of class A if one of these is true (the more the better):

• B “contains” or compositely aggregates A. …

If you want to learn a new Design Pattern and read about the differences between enum in TypeScript and Java, you are in the right place! 🎓

Problem description

While working on a project written in React, I encounter plenty of places where other developers use an enum and then switch to handle some different cases:

enum Country {
  POLAND,
  US,  
  GERMANY
}function getCurrency(country: Country) {
  switch (country) {
    case Country.POLAND:
        return "ZLOTY";
    case Country.US:
        return "DOLLAR";
    case Country.GERMANY:
        return "EURO";
  }
}

This solution is not inherently bad, but being a person that prefers polymorphism over switch statements, I want to figure out a better way for handling such situations. …

React, as befits a JavaScript framework, evolves in the course of time. Starting with version 16.3, some of the lifecycle methods became deprecated and instead new methods were introduced.

Refactoring Legacy Lifecycle Methods

Changes in the API mean that the legacy code should be migrated and the new code should conform to the new rules. Recommended patterns for writing code have emerged and are described in the post published on the official React blog. Below code examples for eight typical use cases are presented:

• Initializing state
• Fetching external data
• Adding event listeners (or subscriptions)
• Updating state based on props
• Invoking external callbacks
• Side effects on props…