Since our nosedive in Javascript there is a ton of things to learn and the greatest new insights are written down in posts in this category.

Why and when do you apply Vuex in your project?

Posted in Javascript on September 18, 2017

In this post we will look into the why and when of applying Vuex to a Vue project. Not a detailed, code-heavy tutorial, we rather focus on a simple example in which it becomes apparent that Vuex is a solution to keep the codebase tidy and maintainable.

Coupling Redux to React

Posted in Javascript on November 28, 2016

In the first part of this introduction to Redux we talked about specific Redux things like actions, reducers and the store. So far we just applied these abstract things to our Silly App you probably know by now. However, nothing has been said about coupling Redux to React which is in fact the fun part since this will make the application do something.

Introduction to Redux without todo example

Posted in Javascript on November 22, 2016

When building apps with React managing the state can be hard, especially when the app grows and becomes more complex. Redux was built to make it easy to split the state of your React application from the views. With Redux your React components become even more reusable as they don’t need to be aware of the state no more. The one way flow in Redux as we will discuss in this post makes reasoning about the app also much easier. Combining React with Redux makes way for well designed and structured apps that can easily scale. Let’s go!

A React app inside a Laravel project

Posted in Javascript on August 30, 2016

Suppose you have a Laravel 5 installation that needs some heavy user driven JS on a specific page. The current JS solution does not yet use a JS framework but for this new piece it is definitely needed. Furthermore, assume we choose React to build this new piece of code. How to incorporate this stand alone React app in the Laravel project? We investigated this issue and today we describe our setup.

An introduction to React Router

Posted in Javascript on July 11, 2016

Consider a game with several screens. For example, a new user needs to register, change his settings and may choose an avatar. Then he proceeds to the game itself. In the past we would create a page for each individual URL and load them via the server. However, in modern client side apps, the URL is changed on the client and there are no page reloads. So how does this work in a practise? Well, React Router makes client side routing a breeze. In today’s post we introduce React Router and create a very silly app!

Unit testing React Components

Posted in Javascript on June 20, 2016

In the latest posts we set up a darts game in React. We discussed the setup and performance, but no word about testing so far. In today’s post it is time to change this: We are going to setup unit tests for the React components. Although this seems overkill for a small app, the small app may grow over time or you might refactor parts of it. Automatic tests keep you covered during development. Also, the tests describe the components in normal words which makes it more easy for others to use your components.

React toy project: Tactics (part 3)

Posted in Javascript on May 23, 2016

In parts 1 and 2 of this tutorial I created a working prototype of the Tactics dartgame in React. Playing it for a while you probably noticed it was not as performant as you would like. In this tutorial we discuss the reason for this. In short it all boils down to a correct implementation of the shouldComponentUpdate function. But you don’t have to write this function yourself, just use Immutable state in combination with the PureRenderMixin mixin to obtain a great boost in performance.

React toy project: Tactics (part 2)

Posted in Javascript on May 9, 2016

In part 1 of this series I introduced the dartgame Tactics. So far, only the static version was created. In this post the app becomes fully functional. First, we carefully define the state of the app. Then interactivity is added by hooking up events to the interface to enable playing the game. These events trigger state changes and rerender the interface of the game. Read on for all details!

React toy project: Tactics (part 1)

Posted in Javascript on April 25, 2016

Today it is time to get started with some real React code. Following the approach described in ‘thinking in React’, we start with the setup of a static version of the app. The app we consider is a dartgame called Tactics. In short, two players hit the numbers 20 to 10 three times each. Once a number is completed (i.e., you hit it three times but your opponent did not), you can score points by hitting the number again. When both players have all numbers completed the points are calculated and the player with the highest score wins.

React and JSX: my reminders

Posted in Javascript on April 4, 2016

JSX is the language that React uses to render components. At first glance the syntax is a bit weird but in this post I write down some of the peculiarities in a reminder list. A very simple login form component is included to show how to use JSX in practice.