How to set-up Next.js and Material UI

13 October, 2019.

We love Next.js, and we love Material UI. In fact, we blog about it quite a bit around here. Using it a lot, however, we have noticed that we have started repeating ourselves when it comes to getting the two to play nicely, so we figured we would put the set-up for Next.js and Material UI right here, and refer back to it instead. We will keep this post up to date as the set-up changes over time. Set-up your project quickly with Next.js The fastest and easiest (and in my opinion, the best) way to…

Continue reading

How to use the AWS Rekognition JavaScript API

12 October, 2019.

AWS Rekognition is a powerful, easy to use image and video recognition service that can be used for face detection. AWS can use an image (for example, a picture of you) to search through an existing collection of images, and return a list of said images in which you appear. AWS Rekognition can also we used to find celebrities, text, scenes, activities, and even identify inappropriate content. The purpose of this post is to discuss how to use AWS Rekognition (referred to herein as Rekognition) to…

Continue reading

Test Driven Development (TDD) with React, React Testing Library, and Jest

26 September, 2019.

Test Driven Development (TDD) is a reversal in traditional thinking and coding processes. Rather than writing code, and then writing tests to verify that code, the process is reversed. Tests are written first and then the code. The result of TDD is improved code quality, higher test coverage, and confidence within the team and the business that changes made to the system will not negatively impact it in ways that were unexpected. TDD opens the door to more regular automated releases (continuous…

Continue reading

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

Getting started with Next.js

22 September, 2019.

Next.js is an all-powerful, React based development platform, with everything you need to build a blazing fast, production ready, scalable, enterprise level web application. Next.js (from now on referred to simply as Next) is zero config out of the box, meaning that all the hard work of configuring tooling has been abstracted away into a couple of simple commands, meaning that you can simply get on with coding. Next gets out of your way, so you can focus your time and energy on what really…

Continue reading

10 React.js interview questions (and possible answers)

10 April, 2019.

Interviewing for a developer role does not have to be a stressful experience. Interviewing can be fun. Interviewing can be an opportunity to geek out about the tools and technologies you use every day. More often than not, when you interview for a company you will be asked a broad range of questions about various aspects of software engineering, including, but not limited to, the following; Problem solving Algorithms and data structures Agile, Scrum, Kanban and other working practices Specific…

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

Add advanced filtering to a React app using React Context API

27 January, 2019.

In the previous tutorial, we started building out our home page. We looked at React Context API, where we added some code to fetch data from our static web server, and then we used that data to build (and display) a list of properties that are currently available for sale. Next, we need to ensure that we are in-line with the specification set out by the CTO. The end-user must be able to filter the property listings by ‘price’, ‘postcode’ and ‘sort order’. The page must not reload, the changes…

Continue reading

Adding the finishing touches to 'Property Finder'

27 January, 2019.

At the beginning of this project, we created two components. Those components were designed to display key information about a single property and its location. These components were and . Currently, these components are hard coded and not very useful. In fact, they show the exact same information for every property. Not useful at all! Let’s rectify that. The single best way to learn anything is repeated exposure. For this post we will not be learning anything new, but instead utilising the…

Continue reading

Build a complete property listings page with React.js

26 January, 2019.

As promised, we will now get down to business and really start fleshing out our home page. This post is all about getting our hands dirty by spending time building components, getting our business logic in place, and generally getting some hands-on experience. The approach taken to building out a React application is the same approach you may take when building a real-world production ready application. Take your time, get a good cup of Earl Grey tea, this is going to be a long one. Note for…

Continue reading

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

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

Managing state in modern React web applications

16 October, 2018.

Overview This post details a presentation I gave at my local JavaScript North-West Meetup on 16th October 2018 at Dept Digital Agency in Manchester, UK. Below are the accompanying notes I wrote that acted as a rough speaking guide, and may or may not have been spoken during the event itself. Assumptions Throughout this talk I will assume that you have at least a working to intermediate knowledge of JavaScript and React concepts, and that you have at least worked with React in some capacity in…

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