Pim Hooghiemstra

Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel!

About Pim Hooghiemstra

Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel!

React router and the lifecycle methods

Posted in on August 15, 2016

In my previous post React Router was introduced to handle URL changes on the client side. We created a Silly app to show how it worked. In today’s post we extend the Silly app with some very useful functions 😉

Firstly we like to use the URL to update the styling of the Clickable component we constructed earlier. Secondly we want to display the number of clicks on the button. The first is quite easy as it is described in the React Router docs, for the latter we have to use React’s lifecycle methods.

Read more

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!

Read more

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.

Read more

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.

Read more

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!

Read more

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.

Read more

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.

Read more

Starting with React

Posted in Javascript on March 10, 2016

2015 was definitely React year. React is the hot new framework build by Facebook and in my opinion worth checking out. Starting with React seems to be a bit difficult so after reading a lot of ‘starting with React’ posts, I decided to buy a premium course. In this and coming posts my thoughts on that.

Read more

Javascript this, apply and call

Posted in on February 2, 2016

When cleaning up a large portion of Javascript code the goal is to reduce the complexity of individual functions and improve the overall readability. When we recently cleaned up an overwhelming JS codebase we were faced with some problems. More functions were introduced that were called from different places in the code. Since we were using the this keyword the context of calling these functions became important.

In this blog post we introduce a very simple tabbing system created with some HTML, CSS and JS to explain the different scenarios we encountered.

Read more

Using npm packages in Javascript

Posted in Javascript on December 3, 2015

npm is a big resource of Javascript packages. With some easy commands you just include whatever package directly in your project. The package.json file is very important for several reasons and we will discuss a few in this post.

Read more