When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application. Table of Contents React Internationalization: Which library should I use? There are two popular libraries…

Every time I used Firebase, I ran into the problem of how to test Firebase's database and authentication. Since I am using Jest as my default testing environment, I figured everything I needed already comes with Jest. In this tutorial, you will learn how to mock Firebase's features. We will use Firebase Admin SDK for the Firebase setup, however…

Here you will learn how to use Jest with Babel Module Resolver for aliases that are defined in your .babelrc file: In order to get the same alias mappings to Jest, the jest.config.js file needs to look like this: Now you can use import statemes with aliases in your Jest testing environment too.

Here you will learn how to use TypeScript with Babel Module Resolver for aliases that are defined in your .babelrc file: In order to get the same alias mappings to TypeScript, the tsconfig.json file needs to look like this: Now you can use import statemes with aliases in your TypeScript files too.

Conditional rendering in React isn't difficult. In JSX - the syntax extension used for React - you can use plain JavaScript which includes if else statements, ternary operators, switch case statements, and much more. In a conditional render, a React component decides based on one or several conditions which DOM elements it will return. For instance…

In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and…

There are three different ways to declare a variable in JavaScript: const, let and var. Historically, var has been the only way of declaring a JavaScript variable : An addition to JavaScript -- to be specific: JavaScript ES6 in 2015 -- has made const and let available to the language: Obviously more options on how to declare and define a…

In JavaScript ES6, you can import and export functionalities from modules. These can be functions, classes, components, constants, essentially anything you can assign to a JavaScript variable . Modules can be single files or whole folders with one index file as entry point. The import and export statements in JavaScript help you to share code…

The content of this section is a crash course in node and npm. It is not exhaustive, but it will cover all of the necessary tools. The node package manager (npm) installs external node packages (libraries) from the command line. These packages can be a set of utility functions, libraries, or whole frameworks, and they are the dependencies of your…