How to set up Visual Studio Code (VSCode) for next level productivity

23 September, 2019.

On a day-to-day basis, both inside and outside of work, I spend most of my time writing front-end code (specifically, React.js) using VS Code. Productivity is very important, as I am usually under pressure to get work done quickly and to the highest standards. Having the right editor set-up goes a long way to ensuring that I am not wasting time on menial tasks like code formatting and instead spend that time focusing on the problem at hand. My editor and project should be correctly configured…

Continue reading

A reference guide of basics of Regular Expressions (Regex) in JavaScript

16 July, 2019.

Welcome back, future Jon. Congratulations, you have successfully forgotten how to regex again. As a reminder to yourself, you have attempted to learn regex many times over the years, and at times you have gotten pretty good at it. Unfortunately, however, it has probably been a while since you last wrote a regex, and you have completely forgotten how to do ANYTHING and EVERYTHING, even the absolute fundamentals. Fear not, I have you covered. Once you read the following guide it will all start…

Continue reading

The Practical React Developer: Learn By Doing Not-So-Mini-Series

28 January, 2019.

The best way to learn is hands on. This not-so-mini-series will teach you all the basics of building a React Web application through hands-on practical exposure. Introducing ‘Property Finder’, a property listings website This tutorial will teach you, hands-on, all the best and most commonly used features of React and the tooling around it. See a preview of the finished website; What is included in this mini series? What is React, and why use it? How to set up your development environment for…

Continue reading

Get started quickly with React using CodeSandbox

23 January, 2019.

To get up and running quickly developing a React web application, you can use CodeSandbox, a fantastic browser-based development environment. Head over to CodeSandbox and if you do not already have an account, I highly recommend creating one so that you can easily save your work and refer back to it later. We will create a couple of components and then migrate our code from CodeSandbox to our local machine in the next post in this series. Note for clarification as this is also a standalone post…

Continue reading

What is React.js, and why use it?

21 January, 2019.

React is a tool for building dynamic and interactive user interfaces. React promotes building small pieces, called components, (which are often JavaScript functions or classes), that are assembled to form a UI. Notice that we have not used the word “web” or “page” here, because React itself is view-layer agnostic, meaning a separate view renderer is used to create a UI for the user to consume. React is not a framework, like Angular. React is an unopinionated library that, when combined with a…

Continue reading

How to get started quickly with React

02 January, 2019.

This post explores 3 separate ways to get a React application up and running quickly. TL;DR To get start quickly with React, you have three choices; CodeSandbox Create React App Parcel.js How to get started with React using CodeSandbox CodeSandbox is one of the most useful tools on the web today. CodeSandbox enables you to forget all about the complexities of setting up a development environment and enables you to just start coding. CodeSandbox is truly a breath of fresh air and a pleasure to…

Continue reading

Build a React web app with Parcel.js lightning fast

01 January, 2019.

I have been using Webpack for quite some time now, and I have found it to be slow, frustrating to configure and debug, tedious to change and upgrade (and do not even get me started on the documentation!). I have had the exact opposite experience with Parcel.js. I have found Parcel.js to be fast, easy to configure and the documentation has been excellent so far. Build a React app with Parcel.js from scratch We can create a React app from scratch with Parcel with minimal effort. To get started…

Continue reading

How to add Hot Module Reloading (HMR) to a React app

31 December, 2018.

Hot Module Reloading (HMR) is an essential tool in every front-end developers tool chest. When using Webpack along with Webpack Dev Server, with a little extra configuration you can easily enable HMR, which will get your changes in screen quicker and often whilst maintaining the state of your application. Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. How to create a simple React application We are not trying to win any awards here, we…

Continue reading

A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

22 September, 2018.

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase…

Continue reading