DEV Community: Ian Felix

Absolute imports in React Native

Ian Felix — Mon, 27 Feb 2023 04:00:06 +0000

This is a short guide on how to use absolute imports in React Native.

Absolute imports

The absolute imports are a feature that was introduced in ES2020. It allows you to import modules using an absolute path instead of a relative path.

For example, if you have a file called App.js in the src folder, you can import a module called utils.js using the following code:

import { sum } from 'src/utils';

This is a simple example, but it can be very useful when you have a complex project with many files and folders.

How to use absolute imports in React Native

To use absolute imports in React Native, you need to install the babel-plugin-module-resolver package.

yarn add -D babel-plugin-module-resolver

After installing the package, you need to configure it in the babel.config.js file.

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '~/assets': './src/assets',
          '~/contexts': './src/contexts',
          '~/screens': './src/screens',
          '~/styles': './src/styles',
          '~/routes': './src/routes',
          '~/services': './src/services',
          '~/hooks': './src/hooks',
          '~/shared': './src/shared',
        },
      },
    ],
  ],
};

The root property is used to define the root folder of the project. In this case, it is the src folder.

The alias property is used to define the aliases that will be used in the imports. In this case, I defined the following aliases:

~/assets: ./src/assets
~/contexts: ./src/contexts
~/screens: ./src/screens …

The aliases are used to import modules using the ~ character. For example, if you want to import the App.js file in the screens folder, you can use the following code:

import App from '~/screens/App';

If you are using Typescript, you will need to add the following code to the tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

It is important to note that the baseUrl property must be the same as the root property in the babel.config.js file.

Now you will be able to use absolute imports in your React Native project.

Thank you for reading this article.
If you enjoy this article, please upvote and comment.

Follow me on:

Effective Testing in React: A Guide with the React Testing Library

Ian Felix — Thu, 15 Dec 2022 15:48:52 +0000

Writing tests in React using the React Testing Library can help ensure that your application is working as expected and catch any bugs before they are deployed to production.

One of the key benefits of using the React Testing Library is that it encourages you to write tests that closely mimic how a user would interact with your application. This allows you to more accurately test the functionality of your components and avoid relying on implementation details that may change in the future.

To get started with testing in React, you'll need to add the React Testing Library to your project. This can be done using the following command:

npm install --save-dev @testing-library/react

Once the library is installed, you can write tests using the render and fireEvent functions provided by the library. The render function allows you to render a React component and access its output, while the fireEvent function allows you to simulate user interactions such as clicking a button or entering text in a form field.

Here's an example of a test that checks whether a button can be clicked and a message is displayed when it is clicked:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('button can be clicked and displays a message', () => {
  const message = 'Hello, world!';
  const { getByText } = render(<Button message={message} />);

  const button = getByText('Click me');
  fireEvent.click(button);

  expect(getByText(message)).toBeInTheDocument();
});

In this test, we use the render function to render the Button component and pass it a message prop. We then use the getByText function to find the button element and simulate a click using the fireEvent.click function. Finally, we use the expect function provided by Jest (a popular JavaScript testing framework) to check that the message is displayed on the page.

In addition to testing individual components, the React Testing Library also allows you to test how components interact with each other. This can be useful for ensuring that events such as form submissions or API calls are handled correctly.

Here's an example of a test that checks whether a form submission is handled correctly:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Form from './Form';

test('form submission is handled correctly', () => {
  const { getByLabelText, getByText } = render(<Form />);

  const nameInput = getByLabelText('Name');
  const emailInput = getByLabelText('Email');
  const submitButton = getByText('Submit');

  fireEvent.change(nameInput, { target: { value: 'John Doe' } });
  fireEvent.change(emailInput, { target: { value: 'john.doe@gmail.com' } });
  fireEvent.click(submitButton);

  expect(getByText('Form submitted successfully!')).toBeInTheDocument();
});

In this test, we use the render function to render the Form component and use the getByLabelText and getByText functions to find the form fields and submit button. We then simulate filling out the form and clicking the submit button using the fireEvent function.Finally, we use the expect function to check that the message is displayed on the page.

In conclusion, using the React Testing Library can help you write effective tests for your React applications. The library's focus on testing the behavior of components rather than their implementation details allows you to create tests that are less brittle and more closely mimic how users will interact with your application. With the render and fireEvent functions, you can easily test individual components as well as the interactions between them. Writing tests in React can help ensure that your application is working as expected and catch any bugs before they are deployed to production.

You can find more examples in the React Testing Library Documentation.

Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on Twitter

How to invert a string

Ian Felix — Sat, 04 Jun 2022 14:33:22 +0000

First, we need to transform the string into a list of characters. We can use the split() method to do that.

const str = 'Hello World';
const chars = str.split('');
console.log(chars); // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

Then, we need to reverse the list of characters. We can use the reverse() method to do that.

const chars = ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'];
const reversedChars = chars.reverse();
console.log(reversedChars); // ['d', 'r', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'o', 'e', 'l', 'l', 'H']

Finally, we need to join the list of characters back into a string. We can use the join() method to do that.

const reversedChars = ['d', 'r', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'o', 'e', 'l', 'l', 'H'];
const reversedStr = reversedChars.join('');
console.log(reversedStr); // 'dlrow olleH'

So, we have a string that is the reverse of the original string.

const str = 'Hello World';
const reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // 'dlrow olleH'

How to get all previous items of an array in js from a certain value

Ian Felix — Wed, 23 Mar 2022 19:36:36 +0000

We can use two array methods to help us get the previous items from an array:

Array.indexOf()
Array.slice()

Array.indexOf()

We use it to get the index of an item in an array. In our case, we want to get the index of the current item. Returns -1 if the item is not found.

Array.slice()

We use it to get a part of an array. In our case, we want to get the previous items from the current item. Returns an empty array if the item is not found.

Example:

const cars = ['Ford', 'Chevy', 'Honda', 'Toyota'];
const currentCar = 'Honda';
const index = cars.indexOf(currentCar); // two
const previousCars = cars.slice(0, index); // ['Ford', 'Chevy']

You can find more information about slice and indexOf type in the Mdn web docs. - Mdn Docs - slice and Mdn Docs - indexOf

Thanks for reading this article.
If you liked this article, please vote and comment.
Follow me on Twitter

How to get query params from a URL in JavaScript

Ian Felix — Sun, 13 Mar 2022 14:13:46 +0000

Use the property searchParams from URL interface to get the query params from a URL.

Examples:

In the following example, we have a URL with name and lastname as query params.

const url = new URL('https://example.com/path?name=Ian&lastname=Felix');

// using method get from searchParams

const name = url.searchParams.get('name');
const lastName = url.searchParams.get('lastname');

console.log(name); // 'Ian'
console.log(lastName); // 'Felix'

const myName = `${name} ${lastName}`;

console.log(myName); // 'Ian Felix' - this is my name :)

We can use some methods from the searchParams to help us to handle with the query params.

Methods:

Below is a list of some methods from the searchParams property.

URL.searchParams.get();
// returns the value of the first query parameter with the given name

URL.searchParams.getAll();
// returns an array of all query parameters with the given name

URL.searchParams.has();
// returns true if the given query parameter exists

URL.searchParams.set();
// sets the value of the first query parameter with the given name

You can find more information about interfaces and type aliases in the official TypeScript documentation. - MDN Docs

Thank you for reading this article.
If you enjoy this article, please upvote and comment.
Follow me on Twitter

JavaScript ES2020 features: Nullish Coalescing Operator (??) and Optional Chaining (?.)

Ian Felix — Sun, 30 Jan 2022 17:06:06 +0000

The two features are new in JavaScript ES2020. They are used to simplify the code and make it more readable.

I decided to write some simple examples to show how they work.

Nullish Coalescing Operator (??)

It is an operator that returns the first value if it is not null or undefined, otherwise, it returns the second value.

A simple example:

const defaultValue = 'hello';
const nullishValue = null || undefined;
const result = nullishValue ?? defaultValue;
console.log(result); // hello

This operator can be compared with the logical operator || (or), so what's the difference?

The logical operator || returns the first value if it is not falsy(e.g., '', 0, NaN, null, undefined) and not only null or undefined.

See the example below:

const defaultValue = 'hello';
const nullishValue = null || undefined; // undefined
const result = nullishValue || defaultValue;
console.log(result); // hello

- - -

const count = 0;
const result2 = count || 1;
console.log(result2); // result is 1 and not 0

- - -

const text = '';
const result3 = text || 'default';
console.log(result3); // result is 'default' and not ''

This behavior may cause unexpected consequences if you consider 0, '', or NaN as valid values.

To avoid this, you can use the nullish coalescing operator ?? that was introduced above.

Optional Chaining (?.)

The optional chaining operator ? is used to access the properties and methods of an object. It works like the chaining operator . but it does not return an error when the value is nullish.

The operator works like this:

const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};
console.log(students.student1.name); // John

console.log(students.student2.name); // TypeError: Cannot read properties of undefined (reading 'name')

// using optional chaining the error is avoided
console.log(students.student2?.name); // undefined

When the object is accessed, JavaScript checks if the property exists(it doesn't nullish value). If it does, it returns the value. If it doesn't, it returns undefined.

Optional Chaining with nullish Coalescing

The Optional Chaining operator ?. can be used with the nullish coalescing operator ??. This combination of operators is very powerful.

Let's see an example:

const students = {
  student1: {
    name: 'John',
    age: 15,
  },
};

const student = students.student2?.name; // undefined

// using nullish coalescing operator `??` with optional chaining operator `?.`
const student = students.student2?.name ?? 'student not found'; // student not found

You can find more examples in the Optional Chaining and Nullish Coalescing MDN page.

Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on Twitter

Introduction to TypeScript

Ian Felix — Sat, 08 Jan 2022 17:13:59 +0000

Introduction to TypeScript

In this article, we will learn how to use TypeScript and its basic features.

What is TypeScript?

TypeScript is a superset of JavaScript that compiles to plain JavaScript.
Add basically static typing to JavaScript.

Why use TypeScript?

avoid unexpected errors and results.
reduce the amount of bugs.
reduce the amount of time to fix bugs.
IDE support.

Types

Below is a list of basic types in TypeScript.

boolean true/false
string 'foo', "foo", `foo`
number int, float, hex, binary
array type[]
array Array<string | number> // union type of string and number 
tuple (type[number,string]) 
enum key and value 
enum colors { 
    withe = '#fff'
    black = '#000'
}
any (any type)
void () does not return anything
null | undefined
never (never type) no return type
object {}

Type Inference

The own typescript infers the type when passed a simple value.

let message = 'Hello World'; // let message: string

message = 123; // error: type number is not assignable to string

const isActive = true; // const isActive: boolean
const count = 10; // const count: number
const list = [1, 2, 3]; // const list: number[]

const user = {
  name: 'John',
  age: 30,
}; // const user: { name: string; age: number }

user.name = 123; // error: type '123' is not assignable to type 'string'

Type Aliases and Interfaces

Type Aliases:

Type aliases are used to create a new name for an existing type and can be reused.

  type StringType = string;

  type StringOrNumber = StringType | number; // union type of string and number

  type StringOrNumber = {
    id: number;
    value?: string; // optional property
  };


  const value: StringType = 'foo'; // no error
  const value2: StringType = 123; // error: type '123' is not assignable to type 'string'
  const value3: StringType = true; // error: type 'boolean' is not assignable to type 'string'.

Interfaces:

Similar to the type alias but it only works with objects and is more for creating more complex objects.

Use interface for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing. - TypeScript Docs

  interface Game {
    id: string | number; // union type of string and number
    title: string;
    genre: string
    discription: string;
    platform?: string[]; // optional property
  }

Difference between interface and type aliases

- React TypeScript Cheatsheet

You can find more information about interfaces and type aliases in the official TypeScript documentation. - TypeScript Docs

Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on Twitter