How to add routing to a React app using @reach/router

25 January, 2019.

We are building a property listings website, called Premium Property Finder, using React. Our website is a Single Page Application (SPA), designed to load fast and dynamically update based on user interaction or network changes. Traditionally, a user navigates a website by clicking a link (or some other form of interaction) which redirects them to the next page. This process of navigating causes the entire next web-page (including all of its CSS, JavaScript etc) to be (re-)requested and (re…

Continue reading

How to export your React project from CodeSandbox to your desktop with Parcel.js

24 January, 2019.

CodeSandbox is great for getting up and running quickly with no setup. However, CodeSandbox is not usually how I choose to bootstrap my projects and typically the companies I work for do not use an approach like this either (maybe they should, but that is a different post!). You will find that a high percentage of companies today are using Webpack as their preferred front-end build tool. If you would like to learn more about Webpack, I have a comprehensive mini-series, starting with Webpack…

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

Webpack 4 from absolute scratch

31 December, 2018.

Writing your own Webpack 4 configuration from absolute scratch is not strictly necessary. You could go online, find a basic Webpack configuration file and fork it/copy it to your project and use that as your starting point. Whilst using a starter project is good for getting started quickly, it can be better to have a more indepth understanding of the process, which can help with adding/removing functionality (and debugging) later. We will configure Webpack to do the following; Build our…

Continue reading

How to process images with Webpack

31 December, 2018.

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

How to create a production ready Webpack config

31 December, 2018.

You have a Webpack configuration file that you have been using for a while whilst developing your website, and now your ready to deploy your website to production. First, we need to set a Webpack . 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. The best place to set the mode is part of the your NPM script. We will use environment variables to make this work correctly. Note: There is a…

Continue reading