Jon Preece

About the author

I am Jon Preece, an experienced full stack website and software developer from Warrington (UK) currently working in and around Manchester (UK).

Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy.

I love to teach, I love to learn and share my knowledge with others, I love to speak at public events.

How to set up your development environment for success

How you set up your development environment can be a very contentious topic, a religious argument in which there may not be one single unified answer, but rather many correct answers. In this post I will discuss exactly how I configure my coding environment. Throughout this post I dicuss tools like ESLint and Prettier several times. Should you like to learn about these tools in more detail, I have written a separate, more detailed, blog post on the topic. How I use ESLint and Prettier for a…

Continue reading

What is React.js, and why use it?

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 I use ESLint and Prettier for a consistent coding environment

I work independently, as part of small teams, and as part of teams that consist of hundreds of individuals. Many developers will have a different idea of how they want to format their code, and what standards they would like to adhere to. Some teams might not have any guidelines in place at all, which will often lead to preventable problems further down the road. Tooling today exists that can make enforcing coding style and standards a breeze. I just used the word enforcing , but tools like…

Continue reading

How to get started quickly with React

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

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…

Continue reading

Getting started with Webpack Dev Server

So far, our application writes out to the console, which is not terribly helpful. Let’s get something up and running in the browser before we configure our React code. To get our website up and running, we will need Webpack Dev Server, which is a simple HTTP server. We will also need a couple of plugins to make everything work properly. Start by creating an file in and add the following code; Now we need to configure Webpack to inject the path to our JavaScript bundle directly into the HTML…

Continue reading

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

Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. Create a simple React application We are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all. Start by installing React, and ReactDOM. Both are required to render a React browser-based web application. Note : These are runtime dependencies, so we use instead…

Continue reading

How to configure SCSS modules for Webpack

Your website will look pretty plain without some styles. SCSS is a popular choice for styling and is fairly straightforward to configure. We will focus on SCSS modules and global SCSS, so let’s get started. Run the following command in your terminal to install Sass and related tooling; What are these packages for? provides binding for Node.js to LibSass, a Sass compiler. is a loader for Webpack for compiling SCSS/Sass files. injects our styles into our DOM. interprets and and resolves…

Continue reading

How to create a production ready Webpack config

We have seen the basics of a Webpack config, but let’s take a few steps to make the config more production ready and useful for development. First, we need to set a Webpack . We have touched on this a couple of times so far as part of this tutorial. The will determine if Webpack minifies/compresses our code, or not. This is important to get right because it makes a huge difference to the resulting bundle. Set the wrong , and you will not be able to debug your code in the browser, or worse…

Continue reading

How to process images with Webpack

With a couple of small Webpack plugins we can add the ability to be able to import images directly in our JavaScript files, and also process those images (compress them). Run the following command in your terminal to install the required plugins; What are these packages for? resolves your s and copies the file to the output directory (usually with a randomly generated name, for cache busting) processes the images using another package called Note that takes many options. For a more…

Continue reading