React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook. Before, make sure to read the previous tutorial for getting an introduction to React's Context : Why React…

React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a shot. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it. Especially if your component hierarchy grows in vertical size, it becomes tedious passing props…

State in React is one of the most important topics when learning React . State breathes live into your React application. It's what makes your application grow beyond static content being displayed on a website, because a user can interact with it. Every interaction of a user with your application may change the underlying state which lead to…

How to learn React is high on the agenda for plenty of JavaScript developers for this year. The recent State of JS survey has shown that many developers are content with React for creating modern web applications. However, due to its popularity and job demand, there are still many JavaScript developers who want to learn React. In this guide, I…

Even though I have written a book about Redux in React, it may be too heavy on the subject for someone who wants only to try out a React Redux tutorial. That's why I extracted this chapter from my book to be read as a tutorial for beginners on my website for free to learn the basics about Redux and Redux in React. And who knows, if you want to dig…

Interested in reading this tutorial as one of many chapters in my advanced React with Firebase book? Checkout the entire The Road to React with Firebase book that teaches you to create business web applications without the need to create a backend application with a database yourself. This comprehensive tutorial walks you through a real-world…

Read more about 

React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook. Before, make sure to read the previous tutorial for getting an introduction to React's Context : Why React…

React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a shot. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it. Especially if your component hierarchy grows in vertical size, it becomes tedious passing props…

State in React is one of the most important topics when learning React . State breathes live into your React application. It's what makes your application grow beyond static content being displayed on a website, because a user can interact with it. Every interaction of a user with your application may change the underlying state which lead to…

Read more about 

If you are new to JavaScript, the question mark after a variable may be confusing to you. Let's shed some light into it. The question mark in JavaScript is commonly used as conditional operator -- called ternary operator when used with a colon (:) and a question mark (?) -- to assign a variable name conditionally. Either the expression is true…

Redux has been with us for a while now. What has gone public 2015 -- demonstrated by Dan Abramov in his infamous talk about time travel -- suddenly turned into many JavaScript developer's day to day business. Especially React developers were hit hard by this phenomenon, because it gave everyone a clear path on how to deal with state management…

The following implementation shows you how to deploy a Github Webhook in Node.js. Personally I am using this kind of GitHub Webhook to deploy my websites automatically on Digital Ocean . Without having to get into my web server with SSH to deploy my website manually, the ever running Webhook on my DigitalOcean instance makes sure (A) to pull the…

Read more about 

React components connected to Redux can turn out pretty complex. Thus most people think that testing these complex components can turn out very complex as well. But it shouldn't be complex at all, if you take full control of the Redux store in your integration/unit test for the React component. I will use only Jest in this brief testing tutorial…

The following implementation shows you how to integrate Redux Persist into Next.js with a quick example. First, the installation of the library on the command line: Second, rather than having a straightforward function which creates our Redux store, we distinguish between server-side and client-side Redux store. In the case of the client-side…

The previous tutorial series covered a lot of ground for Firebase in React. So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React's local state (e.g. users on admin page, messages on home page) and React's…

Read more about 

I have always been of the understanding there are no common sense rules about how to create a minimal Node.js application with Babel. In my search for these answers, it seemed that every tutorial I came across showed something different. As a result, I wanted to streamline this project setup for my readers and myself, so I developed a common…

You may be already using npm (node package manager) for installing libraries (node packages) to your JavaScript projects. For instance, in Node.js you may be used to Express.js for creating REST APIs . In frontend development, you may be used to React.js to build component-based web applications. This makes you a consumer of the npm ecosystem…

This tutorial demonstrates how to setup testing with Mocha, Chai, and Sinon in Node.js. Whereas the previous tutorial has already shown you how to setup your Node.js application, this tutorial sets up a testing environment for your Node.js project. Let's dive into it by setting up Mocha with Chai and Sinon as testing framework. Node.js with Mocha…

Read more about 

In this brief walkthrough, we will use Babel Module Resolver to convert relative paths to aliases for your entire JavaScript application. You can install it via the command line: And use it in your .babelrc file to create your first module alias: In this case, we are giving all our Icons an alias path. Imagine you would have another src…

When I have been working with my clients over the last years, I have seen how crucial it can be to establish a common sense git workflow for a team to become productive . I experienced several constellations -- for instance when working in a team of thrown together developers, in an established team that just transitioned from another version…

I have always been of the understanding there are no common sense rules about how to create a minimal Node.js application with Babel. In my search for these answers, it seemed that every tutorial I came across showed something different. As a result, I wanted to streamline this project setup for my readers and myself, so I developed a common…

Read more about 

When I have been working with my clients over the last years, I have seen how crucial it can be to establish a common sense git workflow for a team to become productive . I experienced several constellations -- for instance when working in a team of thrown together developers, in an established team that just transitioned from another version…

In this tutorial, you will learn how to set up Webpack to use images as assets for your application. Essentially, there is not much in Webpack to include your desired images for your web application. First, put your image files into one folder of your projects application. For instance, your src/ folder may have a folder assets/ which has a…

In this tutorial, you will learn how to set up a local font with Webpack. We will use Open Sans, but you can decide to use any other web font as well. If you have your font files already at your disposal, don't bother about downloading them again. For our case, we will download the font to our local setup from Google Webfonts . Therefore, follow…

Read more about 

In this tutorial I want to walk you through setting up ESLint for React. You should go through the previous tutorials in order to learn about the basic setup for Webpack and ESLint though. It will also tell you about all the benefits that come with the code style improvements which ESLint is giving your projects. Webpack and Babel for React ESLint…

So far, you should have a working JavaScript with Webpack application. In this tutorial, we will take this one step further by introducing ESLint for an enforced unified code style without code smells. Code style becomes an important topic for developers. If you just code for yourself, it might be alright to violate best practices. However, in a…

A brief step by step tutorial on how to install and use Prettier in VS Code. Prettier is an opinionated code formatter which ensures one unified code format. It can be used within VS Code by installing it from the VS Code marketplace. Once you have integrated it in VS Code, you can configure Prettier to format your files when saving them or…

Read more about 

In this tutorial, you will learn how to set up Webpack to use images as assets for your application. Essentially, there is not much in Webpack to include your desired images for your web application. First, put your image files into one folder of your projects application. For instance, your src/ folder may have a folder assets/ which has a…

In this tutorial, you will learn how to set up a local font with Webpack. We will use Open Sans, but you can decide to use any other web font as well. If you have your font files already at your disposal, don't bother about downloading them again. For our case, we will download the font to our local setup from Google Webfonts . Therefore, follow…

Recommended alternative: Instead of Mocha/Chai, using Jest as test runner and assertion library for unit, integration and snapshot tests . Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place. You will introduce a…

Read more about 

If you are using Snapshot Tests with Jest for your components, there are a few pitfalls you have to be aware of. Two of them are very likely to apply to your written tests as well: 1) The output of snapshot tests becomes most often too large, if the actual snapshot test renders a component with lots of child components. This holds two problems in…

Jest got introduced by Facebook for testing JavaScript and especially React applications. It's one of the most popular ways to test React components nowadays. Since it comes with its own test runner, you can simply call Jest from the command line to run all your tests. All your tests are defined as test suites (e.g. describe -block) and test…

Read more about 

In this tutorial, you will learn how to set up a local font with Webpack. We will use Open Sans, but you can decide to use any other web font as well. If you have your font files already at your disposal, don't bother about downloading them again. For our case, we will download the font to our local setup from Google Webfonts . Therefore, follow…

Recommended alternative: Instead of Mocha/Chai, using Jest as test runner and assertion library for unit, integration and snapshot tests . Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place. You will introduce a…

Coveralls is used to show you the test coverage of your JavaScript application. Let's see how it can be used for your JavaScript project which is already on GitHub and connected to your Travis CI due to the previous CI setup tutorial. First, sign up at Coveralls.io with your GitHub account. Second, synchronize your GitHub repositories and toggle…

Read more about 

Read more about 

In this React testing tutorial, we will introduce Enzyme in our Jest testing environment. Jest is commonly used as test runner -- to be able to run your test suites and test cases from the command line with optional configuration -- but also to make assertions in your test cases. In contrast, Enzyme can be used within Jest to render components, to…

Read more about 

Read more about 

The default setup for my JavaScript projects: Prettier + ESLint. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape. In this brief setup guide, I want to show you how to combine Prettier with ESLint without wasting any tear. If you haven't set up Prettier yet…

In this article, you will find a concise step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus on your task at hand as a developer. However, if you like to compose your development environment with lightweight tools rather than with an…

In this article, you will find a concise step by step guide on how to install React on Windows. There are plenty of articles out there on how to setup your web development environment on MacOS, but very few on how to setup it on Windows. Especially when people want to enter the world of React.js in Windows, there is a missing starting point. I…

Read more about 

The default setup for my JavaScript projects: Prettier + ESLint. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape. In this brief setup guide, I want to show you how to combine Prettier with ESLint without wasting any tear. If you haven't set up Prettier yet…

Read more about 

This tutorial teaches you how to build your first Web Components and how to use them in your applications. Before we get started, let's take a moment to learn more about Web Components in general: In recent years, Web Components, also called Custom Elements , have become a standard API for several browsers which allow developers to implement…

Read more about 

The previous tutorial series covered a lot of ground for Firebase in React. So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React's local state (e.g. users on admin page, messages on home page) and React's…

Today, I am thrilled to announce The Road to React with Firebase , my book that started as a tutorial in 2017 and has evolved into course material. The tutorial has been one of the most-read and well-received articles on my website, and this gave me the idea to add enough content to make a complete volume. Perhaps the best thing about the book is…

Those who follow my content know that I always use the good old Firebase Realtime Database in React applications. I am saying good old here, because there is this new cool kid on the block: Firebase's Cloud Firestore . It can be used as alternative to Firebase's Realtime Database . According to Google's documentation, there are four major…

Read more about 

MobX is used for state management in modern applications. Often it is applied in a React.js application, but it is not necessarily bound to React. In addition, it is a valuable alternative to Redux as state management solution. If you are using create-react-app as your application boilerplate, you most likely run into the questions of how to…

I am excited to launch my course Taming the State in React . I worked on the course for the last 6 months and squeezed every of my free minutes during a workweek, weekends and holidays into it. For instance, when writing the book, I woke up two hours earlier before my 9 to 5 job to write ~750 qualitative words a day. It continued by building a…

I used Redux excessively the last years, but spent the recent time with MobX as state management alternative. It seems that Redux alternatives evolve naturally into confusion in the community. People are uncertain which solution to pick. The issue isn't necessarily Redux vs MobX . Whenever there exists an alternative, people are curious what…

Read more about 

Read more about 

Before we start to build full-fledged GraphQL applications, on the client- and server-side, let's explore GraphQL with the tools we have installed in the previous sections. You can either use GraphiQL or the GitHub's GraphQL Explorer. In the following, you will learn about GraphQL's fundamentals by executing your first GraphQL queries, mutations…

Apollo is an entire ecosystem built by developers as an infrastructure for GraphQL applications. You can use it on the client-side for a GraphQL client application, or server-side for a GraphQL server application. At the time of writing this tutorial, Apollo offers the richest and most popular ecosystem around GraphQL in JavaScript. There are other…

In a previous application, you have learned how to mock a GraphQL server in different ways when having Apollo Client as GraphQL client in your React application. The following application shows you how you can take this knowledge to the next level for writing tests for your Apollo Client queries and mutations. So far, the Apollo Client instance can…

Read more about 

The JavaScript and web development community settled down on the major three: React, Angular and Vue. They are frameworks and libraries with full fledged ecosystems . Because of that, I call all of these candidates frameworks. These major three are backed by big companies and communities/individuals . It almost seems as if the JavaScript fatigue…

I did a lot of Angular 1.x back in the days until I started to use React. I can say that I used both solutions extensively. But there were and are several reasons why I moved to React. These reasons were not clear from the beginning, but retrospectively I think I can summarize these very well. In the following I want to give you 10 reasons why I…

Components become more important these days. In the future you will get to hear more and more about Web Components, which get available in Angular 2.0 as well, to create different reusable components. While you already weave multiple angular directives into each other, there are only a few articles which describe this reusability with d3 directives…

Read more about 

The JavaScript and web development community settled down on the major three: React, Angular and Vue. They are frameworks and libraries with full fledged ecosystems . Because of that, I call all of these candidates frameworks. These major three are backed by big companies and communities/individuals . It almost seems as if the JavaScript fatigue…

Read more about 

A couple of my recent articles gave an introduction into a subfield of artificial intelligence by implementing foundational machine learning algorithms in JavaScript (e.g. linear regression with gradient descent , linear regression with normal equation or logistic regression with gradient descent ). These machine learning algorithms were…

A couple of my recent articles gave an introduction to machine learning in JavaScript by solving regression problems with linear regression using gradient descent or normal equation . In a regression problem, an algorithm is trained to predict continuous values . It can be housing prices in a specific area based on a feature set such as…

A recent article gave an introduction to the field of machine learning in JavaScript by predicting housing prices with gradient descent in a univariate regression problem. It used plain mathematical expressions and thus made use of the unvectorized implementation of gradient descent and the cost function. However, the unvectorized approach doesn…

Read more about 

"A state of flow can be achieved by deep work". The subjects flow and deep work are covered in the books Deep Work by Cal Newport and Flow by Mihaly Csikszentmihalyi. I read both books, personally I can say that they are outstanding, and they can be well combined when it comes to satisfaction in a person's life. The following article summarizes my…

As a software engineer you will come to a point where writing matters. Perhaps you want to leave your fellow developers a note, you have to write an e-mail to a customer or you have to sum up the recent meeting notes. In my case, it went even further because I have my own website where I write about software development and where I started to…

Read more about 

This article shows how you can achieve Small Multiples with D3 using Angular.js. According to Edward Tufte (1983) Small Multiples are a concept to visualize multiple homogenous visualizations like maps, line graphs or scatterplots. We will use this visualization concept to draw multiple line graphs with D3 on Angular. Here you can find an example…

Last year Apple released their new collection of iPhones. One innovation of Apple which caught my eyes is the new health app. The dashboard with its health charts is appealing and well designed. Therefore I had to remake one of its components with D3.js. This is what you are going to achieve. Gist for Source Code Example with Source Code…